1. Explain the advantage of using plugin?
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 UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library that can be used to build interactive web applications.
3. Can you please explain the difference between jQuery and jQuery UI?
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.
5. Can you please explain the difference between calling stop(true,true) and finish method?
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.
6. Explain finish method in jQuery?
The .finish() method stops all queued animations and places the element(s) in their final state. This method was introduced in jQuery 1.9.
7. Tell me how to use migrate jQuery plugin if possible?
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.
8. Explain source maps in jQuery?
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.
9. Tell me does jQuery 2.0 supports IE?
No. jQuery 2.0 has no support for IE 6, IE 7 and IE 8.
10. Explain deferred and promise object in jQuery?
Deferred and promise are part of jQuery since version 1.5 and they help in handling asynchronous functions like Ajax.
11. Explain various methods to make ajax request in jQuery?
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.
12. Is it possible to use jQuery to make ajax request?
Yes. jQuery can be used for making ajax request.
13. Tell me how to write browser specific code using jQuery?
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.
14. Explain chaining 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
15. Can we include multiple version of jQuery?
Yes. Multiple versions of jQuery can be included in same page.
16. Tell me how to check data type of any variable in jQuery?
Using $.type(Object) which returns the built-in JavaScript type for the object.
17. Tell me how to check if number is numeric while using jQuery 1.7+?
Using "isNumeric()" function which was introduced with jQuery 1.7+.
18. Can you please explain the difference between event.PreventDefault and "return false"?
e.preventDefault() will prevent the default event from occurring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.
19. What is event.stopPropagation?
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.
20. Explain event.PreventDefault?
The event.preventDefault() method stops the default action of an element from happening. For example, Prevents a link from following the URL.
21. Can you please explain the difference between prop and attr?
► 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.
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.
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.
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 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.
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.
This method removes all the child element of the matched element where remove() method removes set of matched elements from DOM.
29. Tell me how do you stop the currently-running animation?
Using jQuery ".stop()" method.
30. Tell me how to disable jQuery animation?
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.
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.
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.
33. Can you please explain the difference between parent() and parents() methods in jQuery?
The basic difference is the parent() function travels only one level in the DOM tree, where parents() function search through the whole DOM tree.
.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.
jQuery .size() method returns number of element in the object. But it is not preferred to use the size() method as jQuery provide.
