Difference between revisions of "JQuery"
From Organic Design wiki
(Created page with '*[http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html 50 amazing examples] *[http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/ ...') |
(Traversing/Selectors) |
||
| Line 2: | Line 2: | ||
*[http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/ Selector examples] | *[http://www.pamaya.com/jquery-selectors-and-attribute-selectors-reference-and-examples/ Selector examples] | ||
*[http://tablesorter.com/docs tablesorter.com] | *[http://tablesorter.com/docs tablesorter.com] | ||
| + | |||
| + | == JQuery Cheatsheat == | ||
| + | |||
| + | from [http://docs.jquery.com/DOM/Traversing/Selectors JQuery docs - Selectors] | ||
| + | |||
| + | === Supported CSS Selector expressions. === | ||
| + | |||
| + | * * any element | ||
| + | * E an element of type E | ||
| + | * E:nth-child(n) an E element, the n-th child of its parent | ||
| + | * E:first-child an E element, first child of its parent | ||
| + | * E:last-child an E element, last child of its parent | ||
| + | * E:only-child an E element, only child of its parent | ||
| + | * E:empty an E element that has no children (including text nodes) | ||
| + | * E:enabled a user interface element E which is not disabled | ||
| + | * E:disabled a user interface element E which is disabled | ||
| + | * E:checked a user interface element E which is checked (for instance a radio-button or checkbox) | ||
| + | * E:selected a user interface element E which is selected (one or more option elements inside a select) - not in the CSS spec, but nonetheless supported by jQuery | ||
| + | * E.warning an E element whose class is "warning" | ||
| + | * E#myid an E element with ID equal to "myid". (Will only match, at most, one element.) | ||
| + | * E:not(s) an E element that does not match simple selector s | ||
| + | * E F an F element descendant of an E element | ||
| + | * E > F an F element child of an E element | ||
| + | * E + F an F element immediately preceded by an E element | ||
| + | * E ~ F an F element preceded by an E element | ||
| + | * E,F,G select all E elements, F elements, and G elements | ||
| + | |||
| + | |||
| + | === Using CSS and XPath Together === | ||
| + | |||
| + | Hide all Paragraph elements that contain a class attribute: | ||
| + | $("p[@class]").hide(); | ||
| + | |||
| + | Show the first paragraph on the page: | ||
| + | $("p:eq(0)").show(); | ||
| + | |||
| + | Hide all divs that are currently showing: | ||
| + | $("div:visible").hide(); | ||
| + | |||
| + | Get all list items that are children of an unordered list: | ||
| + | $("ul/li") | ||
| + | /* valid too: $("ul > li") */ | ||
| + | |||
| + | Get all Paragraphs, with a class of 'foo', that have a link in them: | ||
| + | $("p.foo[a]"); | ||
| + | |||
| + | Get list item that contains link with "Register" text inside: | ||
| + | $("li[a:contains('Register')]"); | ||
| + | |||
| + | Get the input field's value with the name of 'bar': | ||
| + | $("input[@name=bar]").val(); | ||
| + | |||
| + | All checked radio buttons: | ||
| + | $("input[@type=radio][@checked]") | ||
Revision as of 04:55, 1 February 2010
JQuery Cheatsheat
Supported CSS Selector expressions.
- * any element
- E an element of type E
- E:nth-child(n) an E element, the n-th child of its parent
- E:first-child an E element, first child of its parent
- E:last-child an E element, last child of its parent
- E:only-child an E element, only child of its parent
- E:empty an E element that has no children (including text nodes)
- E:enabled a user interface element E which is not disabled
- E:disabled a user interface element E which is disabled
- E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
- E:selected a user interface element E which is selected (one or more option elements inside a select) - not in the CSS spec, but nonetheless supported by jQuery
- E.warning an E element whose class is "warning"
- E#myid an E element with ID equal to "myid". (Will only match, at most, one element.)
- E:not(s) an E element that does not match simple selector s
- E F an F element descendant of an E element
- E > F an F element child of an E element
- E + F an F element immediately preceded by an E element
- E ~ F an F element preceded by an E element
- E,F,G select all E elements, F elements, and G elements
Using CSS and XPath Together
Hide all Paragraph elements that contain a class attribute:
$("p[@class]").hide();
Show the first paragraph on the page:
$("p:eq(0)").show();
Hide all divs that are currently showing:
$("div:visible").hide();
Get all list items that are children of an unordered list:
$("ul/li")
/* valid too: $("ul > li") */
Get all Paragraphs, with a class of 'foo', that have a link in them:
$("p.foo[a]");
Get list item that contains link with "Register" text inside:
$("li[a:contains('Register')]");
Get the input field's value with the name of 'bar':
$("input[@name=bar]").val();
All checked radio buttons:
$("input[@type=radio][@checked]")
