jQuery Tutorial plus Interview Preparation Guide

Download PDF

★ jQuery Selectors are used to select one or a group of HTML elements from your web page.
★ jQuery support all the CSS selectors as well as many additional custom selectors.
★ jQuery selectors always start with dollar sign and parentheses: $()
★ There are three building blocks to select the elements in a web document.

Following are the ways to include jQuery in a page:
★ Local copy inside script tag
★ Local copy of script manager control
★ Embedded script using client script object
★ Remote copy of jQuery.com
★ Remote copy of Ajax API

★ Just a JavaScript enhancement
★ Coding is simple, clear, reusable
★ Removal of writing more complex conditions and loops

Basic selectors in jQuery:
★ Element ID
★ CSS Name
★ Tag Name
★ DOM hierarchy

jQuery can be used in following scenarios:
★ Apply CSS static or dynamic
★ Calling functions on events
★ Manipulation purpose
★ Mainly for Animation effects

jQuery is great library for developing ajax based application.
It helps the programmers to keep code simple and concise and reusable.

★ To deal with cookies in jQuery we have to use the Dough cookie plugin.
★ Dough is easy to use and having powerful features.

Create cookie:
$.dough("cookie_name", "cookie_value");

Read Cookie:
$.dough("cookie_name");

Delete cookie:
$.dough("cookie_name", "remove");

Refer the following example:
$(document).ready(function(){
$('#clickme').click(function(){
alert($(this).text());
alert(this.innerText);
});
});

★ this and $(this) references the same element but the difference is that "this" is used in traditional way but when "this" is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.

★ In the example given, when only "this" keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the "this" keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

slideToggle() effect is used to give animated sliding effect to an element.

Syntax:
slideToggle([ duration] [, easing] [, callback])
"duration" is the number specifying how long the animation will run.
"easing" is the string which specify the function for the transition.
"callback" is the function which we want to run once the animation is complete.
If the element is visible then this effect will slide the element up side and make it completely hidden. If the element is hidden then slideToggle() effect will slide it down side and make it visible.
We can specify the toggle speed with this effect.

For example:
$("#clickme").click(function(){
$("#mydiv").slideToggle("slow", function(){
//run after the animation is complete.
});
});

The each() function specify the function to be called for every matched element.

Syntax:
$(selector).each(function (index, element))
"index" is the index position of the selector.
"selector" specifies the current selector where we can use "this" selector also.
In the case when we need to stop the each loop early then we can use "return false;"

For example:
$("#clickme").click(function(){
$("li").each(function(){
document.write($(this).text())
});
});
This will write the text for each "li" element.

In jQuery, there are two way to change the width of an element.
One way is using .css('width') and other way is using .width().

For example:
$('#mydiv').css('width','300px');
$('#mydiv').width(100);

★ The difference in .css('width') and .width() is the data type of value we specify or return from the both functions.
★ In .css('width') we have to add "px" in the width value while in .width() we don't have to add.
★ When you want to get the width of "mydiv" element then .css('width') will return '300px' while .width() will return only integer value 300.

When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.
We filter the elements fetched by an optional selector.
Syntax : .siblings( [selector])
"selector" is the selector expression which specify the matched elements.

For example:
<ul>
<li> item 1 </li>
<li id="second_item"> item 2 </li>
<li class="myitem"> item 3 </li>
<li class="myitem"> item 4 </li>
</ul>

Now we want to find the siblings of the element of id "second_item" and change the text color to Blue :
$('li.second_item').siblings().css('color','blue');

If we want specific sibling elements for example the elements having class "myitem" then we can pass a optional selector:
$('li.second_item').siblings('.myitem').css('color','blue');

The animate function is used to apply the custom animation effect to elements.

Syntax:
$(selector).animate({params}, [duration], [easing], [callback])
"param" defines the CSS properties on which you want to apply the animation.
"duration" specify how long the animation will run. It can be one of following values : "slow", "fast", "normal" or milliseconds
"easing" is the string which specify the function for the transition.
"callback" is the function which we want to run once the animation effect is complete.

For example:
<div id="clickToAnimate">
Click Me
</div>
<div id="mydiv" style="width:200px; height:300px; position: relative; right: 20px;">
</div>

Following is the jQuery to animate opacity, left offset, and height of the mydiv element
$('# clickToAnimate').click(function() {
$('#book').animate({
opacity: 0.30,
left: '+=20',
height: 'toggle'
}, 3000, function() {
// run after the animation complete.
});
});

In jQuery we have three methods to give the fade effect to elements: fadeIn, fadeOut and fadeTo
This methods change the opacity of element with animation.

Syntax:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

"speed" can be one of following values : "slow", "fast", "normal" or milliseconds
"opacity" specify the value that allows the fading to given opacity.
"callback" is the function which we want to run once the fading effect is complete.
For example

$("clickme").click(function(){
$("mydiv").fadeTo("slow",0.50);
});

$("clickme").click(function(){
$("mydiv").fadeOut(3000);
});.

★ XPath Selector
★ Custom Selector
★ CSS Selector

There are two ways to debug jQuery:
Debugger keyword:
★ Insert a break point after attaching the process
★ Add the debugger to the line from where we have to start debugging and then run Visual Studio in Debug mode with F5 function key.

Chaining is used to connect multiple events and functions in a selector.

jQuery is a Javascript file and it is single javascript file that contains common DOM, event effects and Ajax functions.

jQuery is a client scripting.

★ Google - Load jQuery from Google libraries API
★ Microsoft - Load jQuery from Ajax CDN

CDN is abbreviated as Content Distribution network and it is said to be a group of companies in different location with network containing copies of data files to maximize bandwidth in accessing the data.

The jQuery filter is used to filter the certain values from the object list based on the criteria. Example is to filter certain products from the master list of products in a cart website.

QUnit is used to test jQuery and it is very easy and efficient.

Size and length both returns the number of element in an object. But length is faster than the size because length is a property and size is a method.

Each function is used to iterate each and every element of an object. It is used to loop DOM elements, arrays and the object properties.