Thursday, 30 June 2011

All JQuery Event Functions

Event Function
Binds a Function to
$(document).ready(function)
The ready event of a document
(when an HTML document is ready to use)
$(selector).click(function)
The click event of selected elements
$(selector).dblclick(function)
The double click event of selected elements
$(selector).focus(function)
The focus event of selected elements
$(selector).mouseover(function)
The mouse over event of selected elements

All JQuery Functions

Function
Description
$(selector).hide()
Hide selected elements
$(selector).show()
Show selected elements
Show selected elements
Hide selected elements
Toggle hide and show for selected elements
$(selector).toggle()
Toggle (between hide and show) selected elements
$(selector).slideDown()
Slide-down (show) selected elements
$(selector).slideUp()
Slide-up (hide) selected elements
Slide-show selected elements by adjusting height
Slide-hide selected elements by adjusting height
Toggle slide-hide and slide-show for selected elements
$(selector).slideToggle()
Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()
Fade in selected elements
$(selector).fadeOut()
Fade out selected elements
$(selector).fadeTo()
Fadeout selected elements to an opacity
Fade in selected elements to full opacity
Fade out selected elements to zero opacity
Fade selected elements to a given opacity
$(selector).animate()
Run a custom animation on selected elements
Applies a "custom" animation for selected elements
$(selector).html(content)
Changes the (inner) HTML of selected elements
$(selector).append(content)
Appends content to the (inner) HTML of selected elements
$(selector).prepend(content)
"Prepends" content to the (inner) HTML of selected elements
$(selector).after(content)
Adds HTML after selected elements
$(selector).before(content)
Adds HTML before selected elements
$(selector).css(name,value)
Set the value of one style property for matched elements
$(selector).css({properties})
Set multiple style properties for matched elements
$(selector).css(name)
Get the style property value of the first matched element
$(selector).height(value)
Set the height of matched elements
$(selector).width(value)
Set the width of matched elements
$(selector).load(url,data,callback)
Load remote data into selected elements
$.ajax(options)
Load remote data into an XMLHttpRequest object
$.get(url,data,callback,type)
Load remote data using HTTP GET
$.post(url,data,callback,type)
Load remote data using HTTP POST
$.getJSON(url,data,callback)
Load remote JSON data using HTTP GET
$.getScript(url,callback)
Load and execute a remote JavaScript file

All JQuery Selectors with example


Selector
Example
Selects
$("*")
All elements
$("#lastname")
The element with id=lastname
$(".intro")
All elements with class="intro"
$("p")
All <p> elements
.class.class
$(".intro.demo")
All elements with class=intro and class=demo
$("p:first")
The first <p> element
$("p:last")
The last <p> element
$("tr:even")
All even <tr> elements
$("tr:odd")
All odd <tr> elements
$("ul li:eq(3)")
The fourth element in a list (index starts at 0)
$("ul li:gt(3)")
List elements with an index greater than 3
$("ul li:lt(3)")
List elements with an index less than 3
$("input:not(:empty)")
All input elements that are not empty
$(":header")
All header elements <h1><h2>...

All animated elements
$(":contains('Ravi')")
All elements which contains the text Ravi
$(":empty")
All elements with no child (elements) nodes
:hidden
$("p:hidden")
All hidden <p> elements
$("table:visible")
All visible tables
s1,s2,s3
$("th,td,.intro")
All elements with matching selectors
$("[href]")
All elements with an href attribute
$("[href='#']")
All elements with href attribute value="#"
$("[href!='#']")
All elements with href attribute value<>"#"
$("[href$='.jpg']")
All elements with href attribute value containing ".jpg"
$(":input")
All <input> elements
$(":text")
All <input> elements with type="text"
$(":password")
All <input> elements with type="password"
$(":radio")
All <input> elements with type="radio"
$(":checkbox")
All <input> elements with type="checkbox"
$(":submit")
All <input> elements with type="submit"
$(":reset")
All <input> elements with type="reset"
$(":button")
All <input> elements with type="button"
$(":image")
All <input> elements with type="image"
$(":file")
All <input> elements with type="file"
$(":enabled")
All enabled input elements
$(":disabled")
All disabled input elements
$(":selected")
All selected input elements
$(":checked")
All checked input elements

Note: Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
Tip: Do NOT start a class name with a number! This is only supported in Internet Explorer.