jQuery interview questions and answers

Questions 1: When Jquery founded and by whome?
Answers 1: It was released in January 2006 at BarCamp NYC by John Resig
(Jquery founder).


Questions 2: What is jQuery?
Answers 2: jQuery is fast, lightweight and feature-rich client side 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. It is one of the most popular client side library and as per 
a survey it runs on every second website.


Questions 3: Why do we use jQuery?
Answers 3: 
Easy to use and learn.
Easily expandable.
Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
Easy to use for DOM manipulation and traversal.
Large pool of built in methods.
AJAX Capabilities.
Methods for changing or applying CSS, creating animations.
Event detection and handling.
Tons of plug-ins for all kind of needs.


Questions 4: How JavaScript and jQuery are different?
Answer 4: JavaScript is a language While jQuery is a library built in the 
JavaScript language that helps to use the JavaScript language.


Questions 5: Is jQuery replacement of Java Script?
Answer 5: 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.


Questions 6: Is jQuery a library for client scripting or server scripting?
Answers 6: Client side scripting.


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


Questions 8: Which is the starting point of code execution in jQuery? 
Answers 8: The starting point of jQuery code execution is 
$(document).ready() function which is executed when DOM is loaded.


Questions 9: What does dollar sign ($) means in jQuery? 
Answers 9: Dollar Sign is nothing but it's an alias for JQuery. 
Take a look at below jQuery code.
$(document).ready(function(){
});

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

Over here $ sign can be replaced with "jQuery" keyword. 


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

Questions 11: Can we use our own specific character in the place 
of $ sign in jQuery?
Answers 11: YES. It is possible using jQuery.noConflict().


Questions 12: What is jQuery.noConflict?
Answers 12: As other client side libraries like MooTools, Prototype can be used 
with jQuery and they also use $() as their global function and to define 
variables. This situation creates conflict as $() is used by jQuery and other 
library as their global function. To overcome from such situations, jQuery has 
introduced jQuery.noConflict().
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
   jQuery("div").hide();
});  

You can also use your 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();
}); 

Questions 13: Is there any difference between body onload() and 
document.ready() function?
Answers 13: document.ready() function is different from body onload() 
function for 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.   


Questions 14: What is the difference between .js and .min.js?
Answer 14: Query library comes in 2 different versions Production and Deployment. 
The deployment version is also known as minified version. 
So .min.js is basically the minified version of jQuery library file. Both 
the files are same as far as functionality is concerned 
but .min.js is quite small in size so it loads quickly and saves bandwidth.
   

Questions 15: What is jQuery Selectors? What are selectors in jQuery 
and how many types of selectors are there?
Answers 15: 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.
Name: Selects all elements which match with the given element Name.
#ID: Selects a single element which matches with the given ID
.Class: Selects all elements which match with the given Class.
Universal (*): Selects all elements available in a DOM.
Multiple Elements E, F, G: Selects the combined results of all the specified selectors 
E, F or G.
Attribute Selector: Select elements based on its attribute value.


Questions 16: What does $("div") will select?
Answer 16: his will select all the div elements on page.
   

Questions 17: What does $("div.parent") will select?
Answer 17: All the div element with parent class.
   

Questions 18: What are the fastest selectors in jQuery?
Answer 18: ID and element selectors are the fastest selectors in jQuery.


Questions 19: What are the slow selectors in jQuery?
Answers 19: class selectors are the slow compare to ID and element.
   

Questions 20: Which one is faster Jquery ID selector or JavaScript 
getElementById()?
Answer 20: JavaScript getElementById() is faster than Jquery Id ($("#elementID")) 
selector
   

Questions 21: Where Jquery code execute? On client browser or server 
browser?
Answer 21: On client browser


Questions 22: Difference between $(this) and 'this' in jQuery?
Answers 22: this and $(this) refers to the same element. The only difference is 
the way they are used. 'this' is used in traditional sense, when 
'this' is wrapped in $() then it becomes a jQuery object and you are able to use 
the power of jQuery.
$(document).ready(function(){
    $('#spnValue').mouseover(function(){
       alert($(this).text());
  });
});

In below example, this is an object but since it is not wrapped in $(), 
we can't use jQuery method and use the native JavaScript to get the value of 
span element.   
$(document).ready(function(){
    $('#spnValue').mouseover(function(){
       alert(this.innerText);
  });
});

Questions 23: How do you check if an element is empty?
Answer 23:  There are 2 ways to check if element is empty or not.
We can check using ":empty" selector.
$(document).ready(function(){
    if ($('#element').is(':empty')){
       //Element is empty
  }
});

And the second way is using the "$.trim()" method.
$(document).ready(function(){
    if($.trim($('#element').html())=='') {
       //Element is empty
  }
});

Questions 24: How do you check if an element exists or not in jQuery?
Answer 24: 
$(document).ready(function(){
    if ($('#element').length > 0){
       //Element exists
  });
});

Questions 25: What is the use of jquery .each() function?
Answer 25: The $.each() function is used to iterate over a jQuery object. 
The $.each() function can be used to iterate over any collection, 
whether it is an object or an array.
   

Questions 26: What is the difference between jquery.size() and jquery.length?
Answer 26: jQuery .size() method returns number of element in the object. 
But it is not preferred to use the size() method as jQuery provide .length property 
and which does the same thing. 
But the .length property is preferred because it does not have the overhead of 
a function call.
   

Questions 27: What is the difference between $('div') and $('<div/>') in jQuery?
Answers 27: 
$('<div/>') : This creates a new div element. However this is not added to 
DOM tree unless you don't append it to any DOM element.
$('div') : This selects all the div element present on the page.
   

Questions 28: What is the difference between parent() and parents() 
methods in jQuery?
Answers 28: The basic difference is the parent() function travels only one level 
in the DOM tree, 
where parents() function search through the whole DOM tree.
   

Questions 29: How To update info already in a table and Delete a row(s) 
from a table?
Answer 29: mysql> UPDATE [table name] SET Select_priv = 'Y',Insert_priv = 'Y',
Update_priv = 'Y' where [field name] = 'user'; 
mysql> DELETE from [table name] where [field name] = 'whatever';
   

Questions 30: Explain .bind() vs .live() vs .delegate() vs .on()
Answer 30: All these 4 jQuery methods are used for attaching events to selectors 
or elements. But they all are different from each other.
.bind(): This is the easiest and quick method to bind events.
But the issue with bind() is that it doesn't work for elements added dynamically 
that matches the same selector. 
bind() only attach events to the current elements not future element.
Above that it also has performance issues when dealing with a large selection.

.live(): This method overcomes the disadvantage of bind(). 
It works for dynamically added elements or future elements. 
Because of its poor performance on large pages, this method is deprecated as of 
jQuery 1.7 and you should stop using it. 
Chaining is not properly supported using this method.

.delegate(): The .delegate() method behaves in a similar fashion to the .live() method, 
but instead of attaching the selector/event information to the document, 
you can choose where it is anchored and it also supports chaining.

.on(): Since live was deprecated with 1.7, so new method was introduced 
named ".on()". This method provides all the goodness of previous 3 methods 
and it brings uniformity for attaching event handlers.


Questions 31: How to create clone of any object using jQuery?
Answer 31: jQuery provides clone() method which performs a deep copy of the 
set of matched elements, meaning that it copies the matched elements as well as 
all of their descendant elements and text nodes.


$(document).ready(function(){
  $('#btnClone').click(function(){
     $('#dvText').clone().appendTo('body');
     return false;
  });
});

Questions 32: What is difference between prop and attr?
Answer 32: attr(): Get the value of an attribute for the first element in the 
set of matched elements. Whereas,.prop(): (Introduced in jQuery 1.6) Get the 
value of a property for the first element in the set of matched elements. 
attr() gives you the value of element as it was defines in the html on page load. 
It is always recommended to use 
prop() to get values of elements which is modified via javascript/jquery , as it 
gives you the original value of an element's current state.  


Questions 33: What is event.PreventDefault?
Answer 33: The event.preventDefault() method stops the default action of 
an element from happening.
   

Questions 34: What is the difference between event.PreventDefault 
and "return false"?
Answer 34: e.preventDefault() will prevent the default event from occurring, 
e.stopPropagation() will prevent the event from bubbling up and return false 
will do both.
   

Questions 35: How to check if number is numeric while using jQuery 1.7+?
Answer 35: Using "isNumeric()" function which was introduced with jQuery 1.7.
   

Questions 36: How to check data type of any variable in jQuery?
Answer 36: Using $.type(Object) which returns the built-in JavaScript type for object.
   

Questions 37: How do you attach a event to element which should be 
executed only once?
Answer 37: Using jQuery one() method. This attaches a handler to an event 
for the element. The handler is executed at most once per element. 
In simple terms, the attached function will be called only once.

$(document).ready(function() {
    $("#btnDummy").one("click", function() {
        alert("This will be displayed only once.");
    });
});​

Questions 38: Can you include multiple version of jQuery?
Answer 38: Yes. Multiple versions of jQuery can be included in same page.
Below code shows how to include multiple version of jQuery.








By this way, for your own jQuery code use "$jq", instead of "$" as "$jq" refers to 
jQuery 1.9.1, where "$" refers to 1.7.2. 

Questions 39: Can we use jQuery to make ajax request?
Answer 39: Yes. jQuery can be used for making ajax request.


Questions 40: What are various methods to make ajax request in jQuery?
Answers 40: Using below jQuery methods, you can make ajax calls.

load() : Load a piece of html into a container DOM
$.getJSON(): Load JSON with GET method.
$.getScript(): Load a JavaScript file.
$.get(): Use to make a GET call and play extensively with the response.
$.post(): Use to make a POST call and don't want to load the response to 
some container DOM.
$.ajax(): Use this to do something on XHR failures, or to specify ajax options 
(e.g. cache: true) on the fly.