jQuery Interview Questions and Answers

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.

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;
  });
});
The default implementation of the clone() method doesn't copy events unless you tell the clone() method to
copy the events. The clone() method takes a parameter, if you pass true then it will copy the events as well.
$(document).ready(function(){
  $("#btnClone").bind('click', function(){
    $('#dvClickme').clone(true).appendTo('body');
  });

jQuery - is a library used for DOM Manipulations - Has nothing to do with models - don't have two-way binding feature - becomes complex and difficult to maintain when size of project increases - Sometimes you have to write more code to achieve the same functionality as in Angular Angular - is a MVVM Framework - Used for creating SPA (Single Page Applications) - Has key features like routing, directives, two way data binding, models, dependency injection, unit tests etc - is modular - Maintainable, when project size increases - is Fast and many more. Basically jQuery is a single tool (solves one specific problem: dom manipulation) where AngularJS is a whole toolbox with all kind of tools for different problems (routing, modelbindings, dom manipulation, etc.). Actually jqLite (subset of jQuery) is part of the AngularJS and you use it to solve the dom-manipulation thing.

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.

Chaining is one of the most powerful feature of jQuery. In jQuery, Chaining means to connect multiple functions, events on selectors. It makes your code short and easy to manage and it gives better performance. The chain starts from left to right. So left most will be called first and so on. Consider:

$(document).ready(function(){
  $('#dvContent').addClass('dummy')
  .css('color', 'red')
  .fadeIn('slow');
});

event.preventDefault() : Stops the default action of an element from happening.
event.stopPropagation() : Prevents the event from bubbling up the DOM tree, preventing any parent handlers

from being notified of the event. For example, if there is a link with a click method attached inside of a DIV or FORM that also has a click method attached, it will prevent the DIV or FORM click method from firing.

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. Attributes carry additional information about an HTML element and come in name="value" pairs. Where Property is a representation of an attribute in the HTML DOM tree. once the browser parse your HTML code ,corresponding DOM node will be created which is an object thus having properties.

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. Find out more here.

document.ready() function is different from body onload() function for several 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.

The problem with above statement is that the selectors is having meta characters and to use any of the meta-

characters ( such as !"#("#foo\.bar").

So the correct syntax is:

$('#myid\\\\.3').text('blah blah!!!');

eq() returns the element as a jQuery object. This method constructs a new jQuery object from one element

within that set and returns it. That means that you can use jQuery functions on it.

get() return a DOM element. The method retrieve the DOM elements matched by the jQuery object. But as

it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can't be used.

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.

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);
  });
});

Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class " .myCssClass " and after that it will reject all the other elements which are not in "p#elmID".

$("p#elmID .myCssClass");

ID and element selectors are the fastest selectors in jQuery. Class selectors are the slow compared to ID and element.

To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. There are many types of selectors but basic selectors are: 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.

Native JavaScipt is always fast. jQuery method to select txtName " $('#txtName') " will internally makes a call to

document.getElementByID('txtName') . As jQuery is written on top of JavaScript and it internally uses JavaScript

only so JavaScript is always fast.

The basic difference is the parent() function travels only one level in the DOM tree, where parents() function search through the whole DOM tree.

e.preventDefault() will prevent the default event from occurring,
e.stopPropagation() will prevent the event from bubbling up and

return false will do both.

Caching is an area which can give you awesome performance, if used properly and at the right place. While using jQuery, you should also think about caching. For example, if you are using any element in jQuery more than one time, then you must cache it. See below code.

$("#myID").css("color", "red");
//Doing some other stuff......
$("#myID").text("Error occurred!");

Now in above jQuery code, the element with `#myID` is used twice but without caching. So both the times
jQuery had to traverse through DOM and get the element. But if you have saved this in a variable then you
just need to reference the variable. So the better way would be,
```js

```js
var $myElement = $("#myID").css("color", "red");
//Doing some other stuff......
$myElement.text("Error occurred!");

So now in this case, jQuery won't need to traverse through the whole DOM tree when it is used second
time. So in jQuery, Caching is like saving the jQuery selector in a variable. And using the variable
reference when required instead of searching through DOM again.
## Q3: What are `deferred` and `promise` object in jQuery? ☆☆☆☆
**Topics:** jQuery
### Answer:
* A **deferred object** is an object than can *create* a promise and change its state to `resolved` or
`rejected`. Deferreds are typically used if you write your own function and want to provide a promise to
the calling code. You are the **producer** of the value.
* A **promise** is, as the name says, a promise about a future value. You can attach callbacks to it to
get that value. The promise was "given" to you and you are the **receiver** of the future value. You
cannot modify the state of the promise. Only the code that *created* the promise can change its state.
## Q4: How can I get jQuery to perform a _synchronous_, rather than _asynchronous_, Ajax request? ☆☆☆☆
**Topics:** jQuery

### Answer:
You specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can
set some data before your mother function proceeds.
Consider:
```js
beforecreate: function (node, targetNode, type, to) {

```js
jQuery.ajax({
  url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
  success: function (result) {
    if (result.isOk == false) alert(result.message);
  },
async: false
});
}

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.

e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event

from bubbling up and return false will do both. Note that this behaviour differs from

normal (non-jQuery)

event handlers, in which, notably, return false does not stop the event from bubbling up.

event.stopPropagation() allows other handlers on the same element to be executed, while

event.stopImmediatePropagation() prevents every event from running. For example, see below jQuery code block.
$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

If event.stopPropagation was used in previous example, then the next click event on p element which changes the css will fire, but in case event.stopImmediatePropagation() , the next p click event will not fire.

Yes, its possible. With Release of jQuery 1.6, a new method " jQuery.holdReady(hold) " was introduced. This method allows to delay the execution of document.ready() event. document.ready() event is called as soon as your DOM is ready but sometimes there is a situation when you want to load additional JavaScript or some plugins which you have referenced.

$.holdReady(true);
$.getScript("myplugin.js", function() {
  $.holdReady(false);
});

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.

$('<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.

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.");
  });
});

Well, it is quite possible that the jQuery plugins which are used are dependent on older version but for your own jQuery code, you would like to use newer version. So because of this dependency, multiple version of jQuery may required sometimes on single page. Below code shows how to include multiple version of jQuery.

<script type='text/javascript'\>
var $jq = jQuery.noConflict();
</script\>
<script type='text/javascript' src='js/jquery\1.7.2.min.js'\></script\>

By this way, for your own jQuery code use " " as " " refers to 1.7.2.

By using jQuery post() / jQuery get() , you always trust the response from the server and you believe it is going to be successful all the time. Well, it is certainly not a good idea to trust the response. As there can be n number of reason which may lead to failure of response. Where jQuery.ajax() is jQuery's low-level AJAX implementation. $.get and $.post are higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks). jq′′, insteadof′′ jq′′referstojQuery1.9.1, where′′

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded. The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

Yes, its possible. With Release of jQuery 1.6, a new method " jQuery.holdReady(hold) " was introduced. This method allows to delay the execution of document.ready() event. document.ready() event is called as soon as your DOM is ready but sometimes there is a situation when you want to load additional JavaScript or some plugins which you have referenced.

$.holdReady(true);
$.getScript("myplugin.js", function() {
  $.holdReady(false);
});

It is quite useful when you are moving from HTTP to HTTPS url. You need to make sure that correct protocol is used for referencing jQuery library as pages served via SSL should contain no references to content served through unencrypted connections. "protocol-less" URL is the best way to reference third party content that’s available via both HTTP and HTTPS. When a URL’s protocol is omitted, the browser uses the underlying document’s protocol instead.

Well, before jQuery 1.9 release it was not possible but one of the new feature of jQuery 1.9 was .css() multi- property getter.

var propCollection = $("#dvBox").css(["width", "height", "backgroundColor"]);

In this case, the propCollection will be an array and it will look something like this.

{
  width: "100px",
  height: "200px",
  backgroundColor: "#FF00FF"
}

There is a standards based replacement, DOMContentLoaded that is supported by over 98% of browsers, though not IE8:

document.addEventListener("DOMContentLoaded", function(event) {
  //do work
});

jQuery library comes in 2 different versions Development and Production/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.

The event.preventDefault() method stops the default action of an element from happening. For example, Prevents a link from following the URL.

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.

All the div element with parent class.

$('.selected') . This selector is known as class selector. We need to prefix the class name with "." (dot).

This will select all the div elements on page.

To select element use ID selector. We need to prefix the id with "#" (hash symbol). For example, to select element with ID "txtName", then syntax would be,

$('#txtName')

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. There are 3 popular jQuery CDNs:

1. 1. Google.
2. 2. Microsoft
3. 3. jQuery. Advantages of using CDN: It reduces the load from your server. It saves bandwidth. jQuery framework will load faster from these CDN. The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN

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();
});

YES. We can have any number of document.ready() function on the same page.

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(){
});

The starting point of jQuery code execution is $(document).ready() function which is executed when DOM is loaded.

No. jQuery is not a W3C standard.

Client side scripting.

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.

JavaScript is a language While jQuery is a library built in the JavaScript language that helps to use the JavaScript language.

Due to following advantages.

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.