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...") |
|||
| Line 10: | Line 10: | ||
* AJAX | * AJAX | ||
* Utilities | * 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. | ||
<pre>// in <head>, to get the jQuery loaded | <pre>// in <head>, to get the jQuery loaded | ||
| Line 20: | Line 24: | ||
}); | }); | ||
}); | }); | ||
| − | </script> | + | </script></pre> |
| − | // generally, jQuery is suited for selecting an element, and performing an action on it: | + | == Selecting Elements == |
| + | |||
| + | <pre>// generally, jQuery is suited for selecting an element, and performing an action on it: | ||
// $(selector).action() | // $(selector).action() | ||
| Line 32: | Line 38: | ||
$("#foo") // all elements with id="foo" | $("#foo") // all elements with id="foo" | ||
$(".foo") // all elements with class="foo" | $(".foo") // all elements with class="foo" | ||
| − | $(".foo.bar") | + | $("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 | $("p:first") // first <p> element | ||
| − | $(":header") // all header elements | + | $(":header") // all header elements - h1, h2, ... |
$(":animated") // all animated elements | $(":animated") // all animated elements | ||
$(":contains('foo')") // all elements containing the text "foo" | $(":contains('foo')") // all elements containing the text "foo" | ||
| Line 43: | Line 47: | ||
$("p:hidden") // all hidden <p> elements | $("p:hidden") // all hidden <p> elements | ||
$("table:visible") // all visible <table> elements | $("table:visible") // all visible <table> elements | ||
| − | $("ul | + | $("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" | $("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 | $("tr:even") // all even <tr> elements; use :odd to get all odd ones | ||
| Line 49: | Line 53: | ||
$("ul li:gt(3)") // elements with index greater than 3 (5th and further); opposite of :lt(n) | $("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 | $("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 | // XPath selectors - by attributes | ||
Latest revision as of 21:03, 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
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"
