Small jQuery Reference
From PaskvilWiki
This is not intended to be a full blown reference guide, it's just a simple reminder.
The jQuery library contains the following features:
- HTML element selections
- HTML element manipulation
- CSS manipulation
- HTML event functions
- JavaScript Effects and animations
- HTML DOM traversal and modification
- AJAX
- Utilities
Getting jQuery
You can host your own jquery.js file, but it's even easier to use one of the hosted ones, as long as you don't want to tweak the file yourself.
// in <head>, to get the jQuery loaded
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
// all initialization should be done once the document is fully loaded
<script type="text/javascript">
$(document).ready(function(){
// whatever
});
});
</script>
Selecting Elements
// generally, jQuery is suited for selecting an element, and performing an action on it:
// $(selector).action()
$(this) // current HTML element
$("*") // all elements
// CSS selectors - selectors by DOM, id and class
$("p") // all <p> elements
$("#foo") // all elements with id="foo"
$(".foo") // all elements with class="foo"
$("p.foo.bar") // all <p> elements with class="foo" and class="bar"
$("#foo,.bar") // all elements with id="foo" or class="bar"
$("p:first") // first <p> element
$(":header") // all header elements - h1, h2, ...
$(":animated") // all animated elements
$(":contains('foo')") // all elements containing the text "foo"
$(":empty") // all empty elements (without child nodes)
$("p:hidden") // all hidden <p> elements
$("table:visible") // all visible <table> elements
$("ul.foo li:last") // last <li> element of each <ul> with class="foo"
$("div#foo .bar") // all elements with class="bar" inside <div> elements with id="foo"
$("tr:even") // all even <tr> elements; use :odd to get all odd ones
$("ul li:eq(3)") // fourth <li> element (zero-based index)
$("ul li:gt(3)") // elements with index greater than 3 (5th and further); opposite of :lt(n)
$("p:not(:empty)") // all <p> elements that are not empty
$(":input") // all <input> elements
$(":text"), $(":password"), $(":radio")
$(":checkbox"), $(":submit"), $(":reset")
$(":button"), $(":image"), $(":file") // all <input> elements of given type
$(":enabled"), $(":disabled")
$(":selected"), $(":checked") // all ... <input> elements
// XPath selectors - by attributes
$("[href]") // all elements with href attribute
$("[href='#']") // all elements with href value "#"
$("[href!='#']") // all elements with href value not "#"
$("[href$='.jpg']") // all elements with href value ending with ".jpg"
