jQuery Interview Questions and Answers

PHPZAG Team Interview Questions, JQuery

jQuery is the most popular and most used feature rich JavaScript library. Due to simplicity and features, jQuery becomes the essential part of every web project to handle client end functionality.

If you’re a web developer then jQuery must for you and whenever you go for job interview, jQuery will be on top.

So here is the list of the most asked jQuery interview questions with answers for both beginners and experienced developer.

1. What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

2. How we can use specific characters in place of $ in jQuery?

We can use our own variable in place of $ by using the method called no Conflict () method like below.


var jQ = $.noConflict()

3. What is jQuery wildcard selector?

The jquery wildcard selector used to get the id or class of all the elements whose id begin with particular string like below.

$(document).ready(function() {
  $("[id^=upload_]").click(function() {
      console.log($(this).attr("id"));
  });
});

4. How to use selector caching in jQuery?

It is wasteful to constantly call $(selector) over and over again with the same selector. You should generally keep a cached copy of the jQuery object in a local variable, unless you expect it to have changed or you only need it once.

var element = $("#elementid");
element.click( function() {		
});

5. What is chaining in jQuery?

The chaining makes your code short and easy to manage. When chaining is used, jQuery has to find the elements once and it will execute all the attached functions one by one. As the chain starts from left to right. So left most will be called first and so on.

$(document).ready(function(){
    $('#elementid').addClass('myclass')
          .css('color', 'blue')
          .fadeOut('fast');     
});​

6. What is difference between jQuery parent(), parents() and closest() functions

There are following difference among them:

  • parent() method selects one element up the DOM tree
  • parents() method is similar to parent() but selects all the matching elements up the DOM tree.
  • closest() method selects the first element that matches the selector, up from the DOM tree.

7. What is difference between jQuery find() and closest()

There are following difference between them:


  • find() method allows us to search through the descendants of the elements in the DOM tree and construct a new jQuery object from the matching elements.
  • closest() method selects the first element that matches the selector, up from the DOM tree.

8. What is fastest children() or find() in jQuery?

The children() method only looks at the immediate children of the node, while find() traverses the entire DOM below the node, so children() method should be faster given equivalent implementations. However, find() uses native browser methods, while children() uses JavaScript interpreted in the browser. In my experiments there isn’t much performance difference in typical cases.

9. What is difference between $(window).load() and $(document).ready()

$(document).ready() is a jQuery event, it runs when the DOM is ready, means all elements are there to be found, but not necessarily all content.
$(window).load() fires later when images and page contents are loaded, so if you’re using image dimensions for example, you often want to use this instead.

10. What is the use of jQuery.data() method?

The jQuery data() is used to work with data attribute. For example if we have “data-id” attribute then we can access this data attribute by passing just “id” instead of “data-id” like below.

$("#elementid").data("id");

You may also check: