jQuery Mobile Interview Preparation Guide

Download PDF

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.

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.

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 stops all queued animations and places the element(s) in their final state. This method was introduced in 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.

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.

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

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

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.

Yes. jQuery can be used for making ajax request.

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.

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.

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

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

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

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.

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

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