Explore topic-wise InterviewSolutions in .

JQUERY PLUGINS are quite useful as its piece of CODE which is ALREADY written by someone and re-usable, which saves your DEVELOPMENT time.

jQuery plugins are quite useful as its piece of code which is already written by someone and re-usable, which saves your development time.

jQuery is the CORE LIBRARY. jQueryUI is BUILT on top of it. If you USE jQueryUI, you must ALSO include jQuery.

jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.

A plug-in is piece of code written in a standard JAVASCRIPT file. These FILES provide useful jQuery methods which can be USED along with jQuery LIBRARY methods.

A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods.

The .finish() method is similar to .STOP(true, true) in that it clears the queue and the current animation jumps to its END value. It differs, however, in that .finish() ALSO causes the CSS property of all queued ANIMATIONS to jump to their end values, as well.

The .finish() method is similar to .stop(true, true) in that it clears the queue and the current animation jumps to its end value. It differs, however, in that .finish() also causes the CSS property of all queued animations to jump to their end values, as well.

Deferred and promise are part of jQuery SINCE version 1.5 and they help in HANDLING ASYNCHRONOUS functions LIKE Ajax.

Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax.

No. jQuery 2.0 has no support for IE 6, IE 7 and IE 8.

No. jQuery 2.0 has no support for IE 6, IE 7 and IE 8.

In case of JQUERY, SOURCE Map is nothing but mapping of minified VERSION of jQuery against the un-minified version. Source map ALLOWS to DEBUG minified version of jQuery library. Source map feature was release with jQuery 1.9.

In case of jQuery, Source Map is nothing but mapping of minified version of jQuery against the un-minified version. Source map allows to debug minified version of jQuery library. Source map feature was release with jQuery 1.9.

with release of 1.9 version of jQuery, many DEPRECATED methods were discarded and they are no longer available. But there are many SITES in production which are still using these deprecated features and it's not possible to REPLACE them overnight. So jQuery team provided with jQuery Migrate PLUGIN that makes code written prior to 1.9 work with it.

So to use old/deprecated features, all you NEED to do is to provide reference of jQuery Migrate Plugin.

with release of 1.9 version of jQuery, many deprecated methods were discarded and they are no longer available. But there are many sites in production which are still using these deprecated features and it's not possible to replace them overnight. So jQuery team provided with jQuery Migrate plugin that makes code written prior to 1.9 work with it.

So to use old/deprecated features, all you need to do is to provide reference of jQuery Migrate Plugin.

USING jQuery.browser property, we can WRITE browser specific CODE. This property contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9.

Using jQuery.browser property, we can write browser specific code. This property contains flags for the useragent, read from navigator.userAgent. This property was removed in jQuery 1.9.

YES. jQuery can be USED for MAKING AJAX request.

Yes. jQuery can be used for making ajax request.

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.

Using below jQuery methods, you can make ajax calls:

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.

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

The above jQuery code sample can be re-written USING chaining.

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

Not only functions or methods, chaining also works with events in jQuery

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.

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

The above jQuery code sample can be re-written using chaining.

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

Not only functions or methods, chaining also works with events in jQuery

YES. Multiple versions of JQUERY can be INCLUDED in same page.

Yes. Multiple versions of jQuery can be included in same page.

The event.preventDefault() method stops the DEFAULT action of an ELEMENT from HAPPENING. For EXAMPLE, Prevents a link from following the URL.

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

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.

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.

e.preventDefault() will prevent the DEFAULT EVENT from occurring, e.stopPropagation() will prevent the event from bubbling up and RETURN FALSE will do both.

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

USING "isNumeric()" FUNCTION which was INTRODUCED with JQUERY 1.7+.

Using "isNumeric()" function which was introduced with jQuery 1.7+.

USING $.TYPE(OBJECT) which RETURNS the built-in JAVASCRIPT type for the object.

Using $.type(Object) which returns the built-in JavaScript type for the object.

• 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

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.

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.

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.

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.

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.

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.

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.

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.

This method is the same as .remove(), except that .detach() KEEPS all jQuery DATA associated with the removed ELEMENTS. This method is useful when removed elements are to be reinserted into the DOM at a later time.

This method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

.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.

.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.

The BASIC DIFFERENCE is the parent() function travels only one LEVEL in the DOM tree, where parents() function search through the whole DOM tree.

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

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.

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.

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.

USING JQUERY property "jQuery.fx.off", which when set to true, DISABLES all the jQuery animation. When this is done, all animation methods will immediately set elements to their final STATE when called, rather than displaying an effect.

Using jQuery property "jQuery.fx.off", which when set to true, disables all the jQuery animation. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.

USING JQUERY ".STOP()" METHOD.

Using jQuery ".stop()" method.

This METHOD removes all the child element of the MATCHED element where REMOVE() method removes set of matched elements from DOM.

This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM.

Use .remove() when you want to remove the element itself, as well as everything INSIDE it. In addition to the elements themselves, all bound EVENTS and jQuery DATA ASSOCIATED with the elements are removed.

Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

JQUERY .size() METHOD returns NUMBER of element in the object. But it is not preferred to use the size() method as jQuery PROVIDE.

jQuery .size() method returns number of element in the object. But it is not preferred to use the size() method as jQuery provide.

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".

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".

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.

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.

CLASS selectors are the slow compare to ID and ELEMENT.

class selectors are the slow compare to ID and element.

ID and ELEMENT SELECTORS are the FASTEST selectors in JQUERY.

ID and element selectors are the fastest selectors in jQuery.

$('.selected'). This selector is KNOWN as class selector. We NEED to PREFIX the class NAME with "." (DOT).

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

This will select all the div elements on page.

• 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.

• GOOGLE
• MICROSOFT
• JQUERY

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.

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.

The PRODUCTION version is quite USEFUL at development TIME as jQuery is open source and if you want to change something then you can make those changes in production version. But the deployment version is minified version or compressed version so it is IMPOSSIBLE to make changes in it. Because it is compressed, so its size is very less than the production version which AFFECTS the page load time.

The production version is quite useful at development time as jQuery is open source and if you want to change something then you can make those changes in production version. But the deployment version is minified version or compressed version so it is impossible to make changes in it. Because it is compressed, so its size is very less than the production version which affects the page load time.

JQUERY LIBRARY comes in 2 different VERSIONS:

1. Production
2. DEPLOYMENT

jQuery library comes in 2 different versions:

jQuery 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.

jQuery 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.

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.

Document.ready() function is different from body onload() function for 2 reasons.

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

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

YES. It is POSSIBLE USING jQuery.noConflict().

Yes. It is possible using jQuery.noConflict().

YES. We can have any NUMBER of document.ready() FUNCTION on the same PAGE.

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

Dollar Sign is nothing but it's an alias for JQuery.

Take a look at below jQuery code.

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