Showing posts with label jQuery interview questions. Show all posts
Showing posts with label jQuery interview questions. Show all posts

Tuesday 22 April 2014

jQuery: Difference between parent(), parents() and closest()

HTML

<xmp>
<html lang="en">
  <head>
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  <body>
     <div>
        
            <a href="https://www.blogger.com/blogger.g?blogID=5288802523561781990#" id="anchorTag">Click here</a>
         


      </div>
</body>
</html>

jQuery
   $('#anchorTag').parent();      //This would return p, immediate parent of a#anchorTag.
parents(selector) : This returns the multiple ancestors. Its not restricted to only one level of parent/ancestors of the element. This is the main difference between the parent and parents method.
In the above HTML Snippet. If i do
   $('#anchorTag').parents();        //This would return all the ancestors (p, div, body, html)

   //On passing selector it will filter down the matched parent elements by selector

   $('#anchorTag').parents('div');   //This would give me only div
closest(selector) : It works like parents(), except that it returns only one parent/ancestor. This is ideal for the situation i mentioned earlier. If i want to check for existence of element in the ancestry tree, then i would prefer to use the closest rather than parents as it only target the selector rather than filtering it from all the ancestor elements. Here is example
$('#anchorTag').closest();           //This would give me empty object as we have not mentioned the selector
$('#anchorTag').closest('div');      //This would give me the div.
Hope this post has helped in terms of using the parent, parents and closest methods of jQuery library. Thank you for reading.

Monday 14 April 2014

jQuery interview questions


How is body onload() function is different from document.ready() function used in jQuery?

1. We can have more than one document.ready() function in a page where we can have only one onload function.
2. Document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.
  • Is jQuery a library for client scripting or server scripting?
    Ans: Client scripting
  • Is jQuery a W3C standard?
    Ans: No
  • What are jQuery Selectors?
    Ans: Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.
  • The jQuery html() method works for both HTML and XML documents?
    Ans: It only works for HTML.
  • Which sign does jQuery use as a shortcut for jQuery?
    Ans: $(dollar) sign.
  • What does $("div") will select?
    Ans: It will select all the div element in the page.
  • What does $("div.parent") will select?
    Ans: All the div element with parent class.
  • What is the name of jQuery method used for an asynchronous HTTP request?
    Ans: jQuery.ajax()
  • What is CDN and what are the advantage of loading jQuery framework from CDN?
  • How to load jQuery locally when CDN fails?
  • What is jQuery.noConflict()
  • Difference between $(this) and 'this' in jQuery
  • jQuery empty() vs remove()
  • jQuery remove() vs detach()
  • Is window.onload is different from document.ready()
  • How to check if element is empty
  • width() vs css('width') and height() vs css('height')
  • How to Check element exists or not in jQuery
  • Difference between bind() vs live() vs delegate() function
  • How to use jQuery Selectors with Examples
  • How to Disable-Enable all controls of page using jQuery
  • What are the possible problems can occur when jQuery and Ajax used in ASP.NET?
  • Why to use Google hosted jQuery CDN?
  • Q1. What is jQuery?
    Ans: jQuery is Lightweight and CrossBrowser JavaScript Library/Framework which helps in to traverse HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. The biggest advantage over Javascript is that it reduces lines of code as huge code written in JavaScript, can be done easily acheived with jQuery in few lines.

    Q2. Why jQuery?
    Ans: Due to following functionality.
           1. Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
           2. AJAX functions
           3. CSS functions
           4. DOM manipulation
           5. DOM transversal
           6. Attribute manipulation
           7. Event detection and handling
           8. JavaScript animation
           9. Hundreds of plug-ins for pre-built user interfaces, advanced animations, form validation etc.
           10. Expandable functionality using custom plug-ins

    Q3. Is jQuery replacement of Java Script?
    Ans: No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. 

    Q4. What is the basic need to start with jQuery?
    Ans: To start with jQuery, one need to make reference of it's library. The latest version of jQuery can be downloaded from jQuery.com.

    Q5. What does dollar Sign ($) means in JQuery?
    Ans: Dollar Sign is nothing but it's an alias for JQuery. Take a look at below jQuery code. 
    $(document).ready(function(){
    });
    
    Over here $ sign can be replaced with "jQuery" keyword. 
    jQuery(document).ready(function(){
    });
    Q6. Is there any difference between body onload() function document.ready() function used in jQuery?
    Ans: document.ready() function is different from body onload() function due to 2 reasons.
           1. We can have more than one document.ready() function in a page where we can have only one body onload function.
           2. document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.

    Q7. Can we have multiple document.ready() function on the same page?
    Ans: YES. We can have any number of document.ready() function on the same page.

    Q8. What are the different type of selectors in Jquery?
    Ans: There are 3 types of selectors in Jquery
           1. CSS Selector
           2. XPath Selector
           3. Custom Selector

    Q9. Name some of the methods of JQuery used to provide effects?
    Ans: Some of the common methods are :
           1. Show()
           2. Hide()
           3. Toggle()
           4. FadeIn()
           5. FadeOut()

    Q10. What is JQuery UI?
    Ans: jQuery UI is a library which is built on top of jQuery library. jQuery UI comes with cool widgets, effects and interaction mechanism.