Difference between revisions of "Small jQuery Reference"
From PaskvilWiki
(Created page with "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 elemen...") |
(No difference)
|
Revision as of 02:58, 1 September 2011
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
// 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>
// 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"
$(".foo.bar") // all elements with class="foo" and class="bar"
$(".foo,.bar") // all elements with class="foo" or class="bar"
$("p#foo") // all <p> elements with id="foo"
$("p.foo") // all <p> elements with class="foo"
$("p:first") // first <p> element
$(":header") // all header elements
$(":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
// 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"
