1. What is the deal with $ in jQuery? What is it and what does it mean?

$ has no special meaning in javascript. It can be used in naming objects in any javascript based libraries. In jQuery it is used as an alias for the jQuery object.

2. How jQuery can be used in conjunction with another javascript library that also uses $for naming?

jQuery can be used in conjunction with any javascript libraries which uses $. Which would result in naming conflict.

There are multiple ways to relsolve it.

Solution 1: use jQuery.noConflict() method for this. If you call this method jQuery release the hold on $ alias so that other library can use it. After that we can use full name’jQuery’ in place of $.

1
2
3
4
5
6
$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery is still working!");
    });
});

Solution 2: Creating shortcut is very easy for jQuery object. jQuery.noConflict() method returns reference to jQuery object. That can be saved into a variable and can be used as shortcut in further code in place of $.

1
2
3
4
5
6
var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery is still working!");
    });
});

Solution 3: If you already have code which uses $ and you do not want to change it then wrap it in closure and pass the $ as argument.

1
2
3
4
5
6
$.noConflict();
(function ($) {
	$("button").click(function(){
        $("p").text("jQuery is still working!");
    });
}(jQuery)); 

3. The code below is for defining a click handler for all buttons on the page, including those buttons that may be added later dynamically.

1
2
3
4
5
6
7
8
9
// define the click handler for all buttons
$( "button" ).bind( "click", function() {
    alert( "Button Clicked!" )
});

/* ... some time later ... */

// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert!</button>" );

what is wrong with this code? and how do you fix it?

The code searches all the existing buttons on the page and binds the click handler to them. This code does not work if the buttons are added dynamically after the call to bind().

This problem can be solved with functions that use evend budding to match events on both current and future elements. Earler it was done using live(). But live() is deprecated from jquery 1.7 on. There is delegate() works similar to live() but also provides control over how far the event must bubble up the DOM. But the recommended method to use is on(). This is like bind(), live(), delegate() depending on syntax. The following code fixes the above issue:

1
2
3
4
5
6
$(document).on("click","button", function(){
	alert("button clicked");
});

// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert!</button>" );

4. What is method chaining in jQuery? What advantages does it offer?

Method chaining is a feature of jQuery that allow multiple methods to be executed on a jQuery selection in sequence in a single code statement.

Ex:

Without Chaining:

1
2
3
$("button#play-movie").css("background-color","orange");
$("button#play-movie").on("click","playMovie");
$("button#play-movie").show();

With Chaining

1
2
3
$("button#play-movie").css("background-color","orange");
		  .on("click","playMovie");
		  .show();

If we observ the code without method chaining jQuery dives into the DOM to get the element multiple time to apply methods. Where as with method chaining element is searched only once. So in addition to yielding more concise code, method chaining offers performance advantages also.

Note: Although this can be done using a variable method chaining is still the more concise code and you are not required to cache the results in a local variable.

5. What is the difference between jQuery.get() and jQuery.ajax() ?

The jQuery.ajax() method allows to create highly constomized ajax requests, with option to specify how long to wait for respoonse, how to handle failure, whether the request is blocking(synchronous) or non-blocking(Asynchronous), what format the response should be, and many more options.

The jQuery.get() method is shorthand method that uses jQuery.ajax() under the hood, to create ajax GET request which is for retrival of information. Other pre-built ajax requests provided by jQuery are jQuery.post(), jQuery.getJSON() and jQuery.getScript().

6. Compare and contrast event.preventDefault() and event.stopPropagation()

event.stopPropagation() method stops the even from propagating up in the DOM, where as event.preventDefault() only stops the browser default action on that event from occurring, but the event still propagates up the event chain.

7. How to select all the elements with an ID that ends with a particulart string?

$(“[id$=’string’]”)

8. How to select all the <div> elements with an ID that ends with a particulart string?

$(“div[id$=’string’”)

8. What is accomplished by returning false from below?

• a jQuery event handler: It is equal to calling both stopPropagation and preventDefault on the passed jQuery event object.

• a regular Javascript onclick event handler for an anchor tag : Prevents the browser from navigating to the link address and stops the event from propagating through the DOM.

• a regular Javascript onclick event handler for non-anchor tag : Will have no effect.

**9. What are promises in jQuery?

Promise is an object in jQuery which represent a onetime event, typically an outcome of async call like an ajax call.