JQuery

• jQuery simplifies HTML document traversing, event handling, animating, and
Ajax interactions for rapid web development.
• jQuery is a JavaScript toolkit designed to simplify various tasks by writing
less code.
• DOM manipulation: The jQuery made it easy to select DOM
elements, traverse them and modifying their content by using cross-browser
open source selector engine called Sizzle.
• Event handling: The jQuery offers an elegant way to capture a wide variety
of events, such as a user clicking on a link, without the need to clutter the
HTML code itself with event handlers.
• AJAX Support: The jQuery helps you a lot to develop a responsive and
feature-rich site using AJAX technology.
• Animations: The jQuery comes with plenty of built-in animation effects
which you can use in your websites.
• Lightweight: The jQuery is very lightweight library - about 19KB in size (
Minified and gzipped ).
• Cross Browser Support: The jQuery has cross-browser support, and works
well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
• Latest Technology: The jQuery supports CSS3 selectors and basic XPath

The selectors are very useful and would be required at every step while
using jQuery. They get the exact element that you want from your HTML
document.
• $('*'): This selector selects all elements in the document.
• $("#ID"): This selector function gets the element with id="ID".
• $(".Class"): This selector gets all the elements that have the class of
Class.
• $("li:not(.myclass)"): Selects all elements matched by <li> that do
not have class="myclass".
• $("a#ID.Class"): This selector matches links with an id of ID and a
class of Class.
• $("p a.Class"): This selector matches links with a class of Class
declared within <p> elements.
• $("ul li:first"): This selector gets only the first <li> element of the
<ul>.

• $("#container p"): Selects all elements matched by
<p> that are descendants of an element that has an id
of container.
• $("li > ul"): Selects all elements matched by <ul> that
are children of an element matched by <li>
• $("code, em, strong"): Selects all elements matched
by <code> or <em> or <strong>.
• $("p strong, .myclass"): Selects all elements matched
by <strong> that are descendants of an element
matched by <p> as well as all elements that have a
class of myclass.
• $(":empty"): Selects all elements that have no children.
• $("p:empty"): Selects all elements matched by <p>
that have no children.
• $("p[.myclass]"): Selects all elements matched by <p>
that contain an element with a class of myclass.
• $("a[@rel]"): Selects all elements matched by <a> that
have a rel attribute.

• $("input[@name=myname]"): Selects all elements matched by
<input> that have a name value exactly equal to myname.
• $("input[@name^=myname]"): Selects all elements matched by
<input> that have a name value beginning with myname.
• $("a[@rel$=self]"): Selects all elements matched by <p> that have a
class value ending with bar
• $("a[@href*=domain.com]"): Selects all elements matched by <a>
that have an href value containing domain.com.
• $("li:even"): Selects all elements matched by <li> that have an even
index value.
• $("tr:odd"): Selects all elements matched by <tr> that have an odd
index value.
• $("li:first"): Selects the first <li> element.
• $("li:last"): Selects the last <li> element.

• $("li:visible"): Selects all elements matched by <li> that are visible.
• $("li:hidden"): Selects all elements matched by <li> that are hidden.
• $(":radio"): Selects all radio buttons in the form.
• $(":checked"): Selects all checked boxex in the form.
• $(":input"): Selects only form elements (input, select, textarea,
button).
• $(":text"): Selects only text elements (input[type=text]).
• $("li:eq(2)"): Selects the third <li> element
• $("li:eq(4)"): Selects the fifth <li> element
• $("li:lt(2)"): Selects all elements matched by <li> element before the
third one; in other words, the first two <li> elements.
• $("p:lt(3)"): selects all elements matched by <p> elements before
the fourth one; in other words the first three <p> elements.
• $("li:gt(1)"): Selects all elements matched by <li> after the second
one.
• $("p:gt(2)"): Selects all elements matched by <p> after the third one.

• $("div/p"): Selects all elements matched by <p> that are children of
an element matched by <div>.
• $("div//code"): Selects all elements matched by <code>that are
descendants of an element matched by <div>.
• $("//p//a"): Selects all elements matched by <a> that are
descendants of an element matched by <p>
• $("li:first-child"): Selects all elements matched by <li> that are the
first child of their parent.
• $("li:last-child"): Selects all elements matched by <li> that are the
last child of their parent.
• $(":parent"): Selects all elements that are the parent of another
element, including text.
• $("li:contains(second)"): Selects all elements matched by <li> that
contain the text second.

Selector Description
eq( index ) Reduce the set of matched elements
to a single element.
$("li").eq(1)
filter( selector ) Removes all elements from the set of
matched elements that do not match
the specified selector(s).
$("li").filter(".middle").addClass("select
ed“)
Find( selector ) Searches for descendent elements
that match the specified selectors.
$("p").find("span").addClass("selected"
);
jQuery is a very powerful tool which provides a variety of DOM
traversal methods to help us select elements in a document randomly
as well as in sequential method.

We can create a event of HTML control using Jquery
mouse click, web page loading ,Taking mouse over an
element, keystroke on your keyboard.
Example-
$('div').bind('click', function( event ){
alert('Hi there!');
});
$("#driver").click(function (event) {
alert('Hi there!');
});

Event Type Description
blur Occurs when the element loses
focus
change Occurs when the element changes
click Occurs when a mouse click
error Occurs when there is an error in
loading or unloading etc.
focus Occurs when the element gets
focus
keydown Occurs when key is pressed
mousedown Occurs when mouse button is
pressed
select Occurs when a text is selected
unload Occurs when documents is

Some of the more common HTML properties, attributes.
className, tagName, id, href, title, rel, src
We can manipulate HTML attributes by using following
Jquery methods
<img id="myImage" src="image.gif" alt="An image"
class="someClass" title="This is an image"/>
Get Attribute Value
Var obj = $(“#ID").attr("title"); //Will return title of HTML control
Set Attribute Value
$("#myimg").attr("src", "/images/jquery.jpg"); // Will set src of
Image control.

Method Description
removeAttr( name ) Remove an attribute from each of the
matched elements.
$("a").removeAttr("target")
hasClass( class ) Returns true if the specified class is
present on at least one of the set of
matched elements.
attr( properties ) Set a key/value object as properties to
all matched elements.
$("#myimg").attr("src",
"/images/jquery.jpg");
removeClass( class ) Removes all or the specified class(es)
from the set of matched elements.

Method Description
toggleClass( class ) toggleClass( class )
Adds the specified class if it is not
present, removes the specified class if
it is present.
html() Get the html contents (innerHTML) of
the first matched element.
html( val ) Set the html contents of every
matched element.
text() Get the combined text contents of all
matched elements.
text (val) Set the text contents of all matched
elements.
val() Get the input value of the first matched
element.

AJAX is an acronym standing for Asynchronous JavaScript
and XML and this technology help us to load data from the
server without a browser page refresh.
$("#driver").click(function(event){
$('#stage').load('result.html');
});

• jQuery.ajax( options )
Load a remote page using an HTTP request.
• jQuery.get( url, [data], [callback], [type] )
Load a remote page using an HTTP GET request.
• jQuery.getJSON( url, [data], [callback] )
Load JSON data using an HTTP GET request.
• jQuery.post( url, [data], [callback], [type] )
Load a remote page using an HTTP POST request.
• load( url, [data], [callback] )
Load HTML from a remote file and inject it into the DOM.

$.ajax( {
url:'/jquery/result.html',
success:function(data) {
$('#stage').html(data);
}
});
});

$.post(
"post.aspx",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});

You can call various JQuery methods during the life cycle of AJAX call
progress. Based on different events/stages following methods are
available:
 ajaxComplete( callback )
Attach a function to be executed whenever an AJAX request
completes.
 ajaxStart( callback )
Attach a function to be executed whenever an AJAX request begins
and there is none already active.
 ajaxError( callback )
Attach a function to be executed whenever an AJAX request fails.
 ajaxSend( callback )
Attach a function to be executed before an AJAX request is sent.
 ajaxStop( callback )
Attach a function to be executed whenever all AJAX requests have
ended.
 ajaxSuccess( callback )
Attach a function to be executed whenever an AJAX request completes
successfully.

$(document).ready(function() {
/* Assume result.text does not exist. */
$('#stage1').load('/jquery/result.text');
});
$("#stage2").ajaxError(function(event, request, settings
){
$(this).html("<h1>Error in loading page.</h1>");
});
});

jQuery provides a trivially simple interface for doing various
kind of amazing effects. jQuery methods allow us to quickly
apply commonly used effects with a minimum
configuration.
$("#show").click(function () {
$(".mydiv").show( 1000 );
});
$("#hide").click(function () {
$(".mydiv").hide( 1000 );
});

• animate( params, [duration, easing, callback] ) - A function for
making custom animations.
• fadeIn( speed, [callback] ) - Fade in all matched elements by
adjusting their opacity and firing an optional callback after
completion.
• fadeOut( speed, [callback] ) - Fade out all matched elements by
adjusting their opacity to 0, then setting display to "none" and firing
an optional callback after completion.
• fadeTo( speed, opacity, callback ) - Fade the opacity of all matched
elements to a specified opacity and firing an optional callback after
completion.
• hide( ) - Hides each of the set of matched elements if they are
shown.
• hide( speed, [callback] ) - Hide all matched elements using a graceful
animation and firing an optional callback after completion.

• show( ) - Displays each of the set of matched elements if they are
hidden.
• show( speed, [callback] ) - Show all matched elements using a
graceful animation and firing an optional callback after completion.
• slideDown( speed, [callback] ) - Reveal all matched elements by
adjusting their height and firing an optional callback after completion.
• slideToggle( speed, [callback] ) - Toggle the visibility of all matched
elements by adjusting their height and firing an optional callback
after completion.
• slideUp( speed, [callback] ) - Hide all matched elements by adjusting
their height and firing an optional callback after completion.
• stop( [clearQueue, gotoEnd ]) - Stops all the currently running
animations on all the specified elements.

JQuery

More Related Content

What's hot

Similar to JQuery

Recently uploaded

JQuery