Ref:
http://www.w3schools.com/jquery/default.aspRef2 :
http://msdn.microsoft.com/en-us/magazine/dd453033.aspxjQuery 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 - Selectorsref:
http://www.w3schools.com/jquery/jquery_ref_selectors.aspjQuery Reference - Effects
ref:
http://www.w3schools.com/jquery/jquery_ref_effects.aspjQuery Callback Functions
$("button").click(function(){
$("p").hide(1000,my_alert);
});
function my_alert()
{
alert("The paragraph is now hidden");
}