jQuery

Ref: http://www.w3schools.com/jquery/default.asp

Ref2 : http://msdn.microsoft.com/en-us/magazine/dd453033.aspx

jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is: $(selector).action()

• A dollar sign to define jQuery
• A (selector) to "query (or find)" HTML elements
• An jQuery action() to be performed upon the element(s)

In HTML DOM terms:

Selectors allow you to manipulate DOM elements as a group or as a single node.

jQuery Syntax Examples

$(this).hide()
Demonstrates the jQuery hide() function, hiding the current HTML element.

$("#test").hide()
Demonstrates the jQuery hide() function, hiding the element with id="test".

$("p").hide()
Demonstrates the jQuery hide() function, hiding all

elements.

$(".test").hide()
Demonstrates the jQuery hide() function, hiding all elements with class="test".

The Document Ready Function

You might have noticed that all jQuery functions, in our examples, are inside a document ready function:

$(document).ready(function(){

--- jQuery functions go here ----

});

This is to prevent any jQuery code from running before the document is fully loaded (is ready).

jQuery Selection

jQuery Element Selectors

jQuery uses CSS style selectors to select HTML elements.

$("p") selects all

elements

$("p.intro") selects all

elements with class="intro".

$("p#demo") selects the

element with id="demo".

jQuery Attribute Selectors

jQuery uses XPath style selectors to select elements with given attributes.

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value="#".

$("[href!='#']") select all elements with an href attribute<>"#".

$("[href$='.jpg']") select all elements with an href attribute containing ".jpg".

jQuery CSS Selectors

jQuery CSS selectors can be used to change CSS properties for HTML elements.

$("p.intro").css("background-color","yellow");

jQuery Reference - Selectors

ref: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

jQuery Reference - Effects

ref: http://www.w3schools.com/jquery/jquery_ref_effects.asp

jQuery Callback Functions

$("button").click(function(){
$("p").hide(1000,my_alert);
});
function my_alert()
{
alert("The paragraph is now hidden");
}