jQuery Interview Questions with Answers

jQuery is an advance framework developed in JavaScript language. This article describes some common important interview questions and answers in jQuery. Hope it will help you to build successful carrier.

What is jQuery?
jQuery is a cross-platform JavaScript library or code which is designed to simplify the client-side scripting of HTML. It is written in JavaScript. It is very lightweight. Its main theme is “write less, do more”
From the jQuery official site “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.”

What prerequisites are required to learn JQuery?
In order to work with jQuery some basic knowledge of JavaScript, HTML and CSS are required.

Describes about the history of is jQuery.
jQuery was originally released by John Resig in January 2006 at BarCamp NYC.

What do you know about the licensing of jQuery?
jQuery is free, open source software and licensed under the MIT License. Officially Microsoft has integrated jQuery into their IDE Visual Studio 2010.

How we can download the jQuery?
We can download jQuery from its official website.

What is the difference between .js and .min.js?
There are two different versions in jQuery library. One is Development and other is Production/Deployment. In jQuery .js is the extension of development versions and .min.js is the extension of production versions.

Why there are different versions of jQuery?
We get jQuery library in two different versions:

1. Development
   We know jQuery is open source and any one can modify it. During modification development version is used. Its size is larger than production versions.
2. Production/Deployment
   The deployment version is minified or compressed. So it is impossible to make changes in it. Its size is smaller than development version. It is also faster than development versions.

What are the features of jQuery?
The jQuery contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• JSON parsing
• AJAX
• Utilities
• Extensibility
• Multi-browser

Why we should use jQuery?
jQuery is well written and very compact JavaScript code that increases the productivity of the developer. Writing very small amount of code we can achieve critical UI functionality. Lot of JavaScript frameworks is available, but jQuery is most popular. Many biggest companies on the Web use jQuery (Google, Microsoft, IBM, and Netflix)

What are the advantages of jQuery?
jQuery provides us lot of advantages. Some advantages of using jQuery are given bellow:

• It helps to improve the performance of the site or application.
• It helps to build most browser compatible web site or web application.
• It helps to improved UI related functionality without writing lot of codes.
• It is very faster.
• It is extensible. That means we can extend it to implement customized behavior.
• In order to use jQuery no need to learn fresh new syntax’s.

What is the difference between JavaScript and jQuery?
JavaScript is a scripting language, while jQuery is a library/framework which is developed in JavaScript language and helps us to use the JavaScript language.

Is jQuery is a replacement of Java Script?
No, jQuery is not a replacement of JavaScript. jQuery is a library which is written on top of JavaScript.

Is jQuery a library for client or server side scripting?
jQuery is client side scripting.

Is jQuery following W3C standard?
No, jQuery is not a W3C standard.

In jQuery what does the dollar sign ($) means?
In JQuery the dollar sign is an alias for JQuery. Dollar sign can be replaced with “jQuery” keyword.

$(document).ready(function(){
});

jQuery(document).ready(function(){
});

What is the code execution starting point in jQuery?
In JQuery the starting point of code execution is $(document).ready() function which is executed when DOM is loaded.

Is it possible to exist multiple document.ready() function in a single page?
Yes, we can use any number of document.ready() function in single page.

Is it possible to use our own specific character in the place of $ sign in jQuery?
Yes, It is possible with the help of jQuery.noConflict().

What is jQuery.noConflict?
Others client side libraries (MooTools, Prototype) can be used with jQuery and they can also use $() as their global function and to define variables. This creates confusions. To overcome this type of situations, jQuery has introduced jQuery.noConflict().

jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
   jQuery("div").hide();
});

We can also use our own specific character in the place of $ sign in jQuery.

var $j = jQuery.noConflict();
// Use jQuery via jQuery(...)
$j(document).ready(function(){
   $j("div").hide();
});

Does jQuery allow other client side libraries with it?
Yes, it is possible to use other client side libraries with jQuery.

What is the difference between document.ready() and body.onload() function?
In a page we can use document.ready() function multiple times, where in a page we can use body.onload() only one time.
In a page document.ready() function is called as soon as DOM is loaded, where body.onload() function is called when everything gets loaded on the page (DOM, images and all associated resources).

What is a CDN?
CDN (Content Delivery Network or Content Distribution Network) is a large distributed system to serve content to end-users with high availability and high performance through internet.

Which are the popular CDN for jQuery?
The most famous/popular jQuery CDN’s are: Google, Microsoft, jQuery.

What are the Advantages of using jQuery CDN?
By using jQuery CDN we can get lot of advantages. Some of them are given bellow:
It reduces the load from our web server
It requires less internet bandwidth
It loads jQuery framework faster
It provides cache facility

How to load jQuery from the CDN?
The codes to load jQuery Framework from the Google CDN is given bellow:

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

The codes to load jQuery Framework from the Microsoft CDN is given bellow:

<script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>

The codes to load jQuery Framework from jQuery site is given bellow:

<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>

How to load jQuery locally when CDN fails?
It is a good technique to always use CDN. But sometimes CDN may unreachable due to network related problems or others problem. That’s why it is necessary to follow an alternative way. A sample codes is given bellow. Where, at first the JQuery is loaded from the Microsoft CDN. If jQuery is not loaded successfully then it will load from the local copy.

<script type="text/javascript" src="http:// ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

What are selectors used in jQuery?
In order to work with an html page at first we need to find out the html elements of that page. For that jQuery uses many types of selectors. The basic selectors are given bellow:
Name selector -selects all the elements which match with the given name.
#ID selector -selects a single element which matches with the given ID
.Class selector -selects all the elements which match with the given class.
Universal (*) selector- selects all the elements available in a DOM.
Multiple Elements E, F, and G- select the combined results of all the specified selectors E, F or G.
Attribute Selector- select the elements based on its attribute value.

Which one is the fastest selector in jQuery?
The ID and element selectors are the fastest selectors in jQuery.

Which one is the slower selector in jQuery?
The class selector is the slower selector in jQuery.

How selectors are executed in jQuery?
In jQuery, for multiple selectors, the last selector is always executed first. For example consider the following jQuery code: jQuery will first find all the elements with class “.myClass” and after that it will reject all the other elements which are not in “p#myID”.
$(“p#myID .myClass”);

Give an example of ID selector in jQuery?
For ID selector we need to prefix the id with hash symbol “#”. For example: to select element with ID “txtUserName” the syntax would be:
$(‘#txtUserName’)

What does $(“div”) means?
It will select all the div elements on the page.

Give an example of class selector in jQuery.
An example of jQuery class selector is given bellow:
$(‘.myClass’).

What does $(“div.myClass”) will select?
It will select all the div element with “myClass” class.

In a page can we include multiple version of jQuery?
Yes, we can include multiple version of jQuery in the same page. For that we need to include both versions separately. Normally a higher version accepts all the features of older versions. An example is given bellow:

<script type='text/javascript' src='js/jquery_1.9.1.min.js'></script>
<script type='text/javascript' src='js/jquery_1.7.2.min.js'></script>

What is jQuery UI?
The jQuery UI is a set of user interface interactions, themes , effects, widgets built on top of the jQuery that can be used to build interactive web applications.

Explains the difference between jQuery and jQuery UI?
jQuery is the core JavaScript library. Where, jQueryUI is built on top of it. If we use jQueryUI, we must need to include jQuery.

Which one is faster JavaScript or jQuery?
Generally native JavaScript codes are always faster than jQuery codes.

Which is fast document.getElementByID(‘txtMyName’) or $(‘#txtMyName’)?
Generally native JavaScript is always faster than jQuery. That’s why JavaScript ‘txtMyName’ is faster than jQuery $(‘#txtMyName’).

How to check if an element is empty or not?
We can check if element is empty or not in two ways. We can use “: empty” selector.

$(document).ready(function(){
    if ($('#txtName').is(':empty')){
       //Element is empty
  }
});  

Or we can use "$.trim()" method.
$(document).ready(function(){
    if($.trim($('#txtName').html())=='') {
       //Element is empty
  }
});

How do you check if an element is exists or not?
By using jQuery length property, we can check whether element exists or not. Sample code is given bellow:

$(document).ready(function(){
    if ($('#txtName').length > 0){
       //Element exists
  }
});

What is the difference between jquery.size() and jquery.length method?
In jQuery jquery.size() and jquery.length method returns the number of elements in the object. But it is not good to use the size() method. Because length() method does not have the overhead of a function call.

What is the difference between $(‘div’) and $(‘<div/>’) in jQuery?

$(‘<div/>’) : creates a new div element. But this is not added to DOM tree unless we don’t append it to any DOM element.

$(‘div’) : selects all the div element present on the page.

What is the difference between parent() and parents() methods in jQuery?
The parent() methods travels only the one level of DOM tree. Where the parents() method travels the whole DOM tree.