Top 10 jQuery Interview Questions – a MUST HAVE

In this tutorial about jQuery Interview Questions, we will try to explore most important concepts and key features of jQuery by answering following questions. It will not only be helpful for an interview but also enable a web developer to better understand jQuery. In order to meet both above mentioned requirements, this post is designed to include conceptual as well as coding material with practical scenarios.

Right now, this tutorial has top 10 jQuery Interview Questions but later on, I’ll add more to this list.

Top jQuery Interview Questions List

1. What is jQuery and How it’s different from JavaScript?

jQuery is a lightweight and feature-rich JavaScript Library that simplify the usage of client-side scripting for JavaScript-based application development. Being lightweight and fast, it extensively simplify the use of JavaScript on a website. jQuery comes with lots of features including:

• Page Content Manipulation
• Applying styles to make more attractive User Interface with ease.
• Simplified DOM traversal.
• Easily making AJAX calls.
• Animation
• and much more…

As oppose to JavaScript (which is a scripting language), jQuery is a library written in JavaScript that is easy to learn and use. It’s further expandable and there are various jQuery plug-ins available that can be used to fulfill specific development needs.

Remember; jQuery is not going to replace JavaScript. It’s one of the most popular JavaScript library among other libraries like YUI Library, Dojo Toolkit, Prototype JavaScript Framework, AngularJS etc. For a complete list of different JavaScript libraries, you can follow here.

Back to top

2. Briefly explain $(document).ready() function in jQuery?

$(document).ready() function starts executing after DOM (Document Object Model) is loaded. Don’t confuse $(document).ready() function with body.onload() function. It’s not the same because body.onload() function is called when everything is loaded including DOM and all other resources like images etc. Our jQuery code should be place inside this function as:

$(document).ready(){    
//code here... as below        
alert("DOM loaded....");
});

Here Dollar sign behaves like an alias for jQuery, so we can use “jQuery” instead of “$” sign. So our above function will become as below:

jQuery(document).ready(){
    //code here... as below        
alert("DOM loaded....");
});

We can also use shorthand for above function as below, although this approach is not recommended because code looks confusing and not widely used or even understood for beginners.

$(function() {
    // code here...
});

So, following is considered to be a basic code snippet for using jQuery.

<script src="http //ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">/script>
<script>
$(document).ready(function() {
    // code here...
});
</script>

Back to top

3. Can we have multiple $(document).ready() function on a page? Explain with example.

Yes, It’s legal to have multiple $(document).ready() functions on a page but it reduces code readability if overused. There are scenarios when we may have multiple .js file referred in our code that might be using $(document).ready() function. Consider the below piece of code: Case 1:

$(document).ready(function() {
    alert('Hello Naveed');
});
$(document).ready(function() {
    alert('Hello Farhan');
});

is same as that of below: Case 2:

$(document).ready(function() {
    alert('Hello Naveed');
    alert('Hello Farhan');
});

Important Note: For Case 1, Order of execution is totally independent of the other $(document).ready() function, so never rely on it if using this function multiple times on same page. Back to top

4. What are selectors in jQuery? Explain different types of selectors?

jQuery selectors are used to identify quickly and easily any single or a set of page elements. Undoubtedly, it’s one of the most important feature of jQuery. To practically understand the usage of jQuery selector is as follows:

$(jQuerySelector).someMethod();

Now, take an example and apply the above given syntax. For example, we want to access all the heading (h1) tag on our HTML page and change it’s font style to “italic”. So, simply do as below:

$("h1").css("font-style", "italic");

In jQuery, many different types of selectors available but following are some of the basic selectors:

• Element Name Selector: Using this selector to select all elements matching the given element Name. For example, $(“p”).
• #ID Selector: Basic selector to select a single element which matches with the given id. For example, $(“#total”).
• .Class Selector: In order to select all elements matching with the given class name. For example, $(“.MyRedTheme”).
• Attributre Selector: Selecting element(s) on the basis of attribute value.
• and many others…..For a complete list of jQuery Selectors, please follow here.

A good thing about jQuery selectors is that it follows a familiar CSS syntax.
Back to top

Correct Answer: A, C, D
For a Complete Online Free Test on jQuery and other web technologies, click here.

5. What is jQuery Chaining?

jQuery has the capability that we can apply multiple jQuery methods to a single jQuery object and that’s called jQuery Chaining. jQuery Chaining provides more efficient way of doing certain tasks. Let’s understand the concept with the help of an example. Consider a scenario that we have a heading (h2) tag on our HTML page and we want to do multiple things with heading tag i.e.

• We want to change the text to “I AM A CHANGED TEXT”, and
• change heading font style to Italic

we can do this as follows:

$("h2").text("I AM A CHANGED TEXT"); $("h2").css("font-style", "italic");

Above code will do the task correctly but it’s not the most efficient way of doing this. As every jQuery method returns a jQuery object to which it’s working with, so we can achieve the desired functionality by chaning the above code to below (jQuery Chaining) as:

$("h2").text("I AM A CHANGED TEXT").css("font-style", "italic");

Now this is more efficient and simplified approach. It’s really helpful when we are writing our own jQuery plugin. Back to top

6. Difference between parent() and parents() methods in jQuery? Explain with an example.

• parent() method will select the first parent element up in DOM tree.
• parents() method will select all the parent elements up in DOM tree.

Take a following example to understand the difference:

<html>
<body>
<div class="parent1">
<div class="parent2">
<p>
<span>Here we want to understand parent() vs parents().</span>
</p>
</div>
</div>
</body>
</html>


$(“span”).parent() will return the <p> tag.
$(“span”).parents() will return all parents up in DOM tree including p, div.parent2, div.parent1, body, html.
Back to top

7. What is the difference between $(this) and ‘this’ in jQuery?

‘this’ refers a DOM element of invocation and it’s behavior remains the same as in jQuery. Normally, we use ‘this’ in JavaScript as follows:

this.innerText

But if we want to add additional power of jQuery to ‘this’, we can write as $(this) that will be able to call jQuery function like following:

$(this).text()

So, in simple words, we can pass ‘this’ to $() as a parameter and easily call it’s methods or functions.
Following piece of code clearly showing the use of ‘this’ and $(this) in a simple practical example.

$(".categoriesCheckboxes").change(function(){
if(this.checked)
alert("category checked");
});

On the other hand,

$(".categoriesCheckboxes").change(function(){
if($(this).is(":checked"))
alert("category checked");
});

Back to top

8. What is the use of .each() method? Kindly explain with an example

.each() method is used to iterate over each DOM element of a specific jquery object (a kind of looping mechanism).
For example, in order to iterate over each element of below unordered list and display/alert using .each() method:


<ul>
<li>Ahmad</li>
<li>Hamza</li>
<li>Ali</li>
<li>Saad</li>
</ul>



$( "li" ).each(function(index) {
alert( index + ": " + $( this ).text() );
});


Back to top

9. What is the difference between eq() and get() methods in jQuery?

In order to understand the difference between eq() and get() methods in jQuery, lets take an example first. Take unordered list as we used in above question.

<ul>
<li>Ahmad</li>
<li>Hamza</li>
<li>Ali</li>
<li>Saad</li>
</ul>

We can access any element in above list using both eq() and get() jQuery methods. To get first element, we can use following code:

$("li").get(0);
$("li").eq(0);

BUT
eq() will return the DOM element wrapped in jQuery Wrapper.
get() will return the raw DOM element.

So, if we want to call a jQuery method on returned element, get() will fail. For example,

$("li").get(0).css("font-style", "italic"); // Error. Object #<HTMLLIElement> has no method 'css'
$("li").eq(0).css("font-style", "italic"); //OK


Back to top

10. “return false” Vs event.PreventDefault?

“return false” does the following two things:

• -> prevent the default event to occur
• -> then, stop the event to bubble up.

On the other hand, event.PreventDefault is a subset of “return false”. It only prevent the default event from occuring. If we want to stop the event from bubbling up, we further need to call stopPropagation().
Back to top

Concluding Notes:

This is my list of most important jQuery Interview Questions but you may suggest that if I am missing some important concept area or you want me to include more related questions. I’ll be more happy to listen you and explore more concepts with the help of answering questions.

More Related Articles:

• jQuery Mobile App Development: A Handy Guide for Beginners
• Consuming Web API Service using jQuery – All CRUD Operations
• 7 jQuery Code Snippets every web developer must have
• How AngularJS is different from jQuery?
• Google Map JavaScript API for Beginnners