Search Results |
||||
|---|---|---|---|---|
| # | id | tagName | className | outerHTML |
jQuery Selector Cheat Sheet — Click a row to apply the selector |
||
|---|---|---|
| Selector | Example $("pattern") | Notes |
| Basic | ||
| Wild Card | * | Returns ALL elements |
| Element | p | Returns all paragraph elements* <p>One</p> <p> Two</p> |
| ID | #MyID | Returns all elements with id of MyID: <div id="MyID"> </div> |
| Class | .MyClass | Returns all elements with css class of MyClass: <div class="MyClass"> </div> |
| Combinations | ||
| And | div, span | Returns all div AND span elements. The comma is the AND operator. |
| Child | div > span | Returns span elements directly inside a div. |
| Ancestor | div span | Returns all span elements inside a div. The space is the Ancestor operator. |
| Attributes | ||
| Attribute | [xyz] | Returns all elements with the attribute: <input xyz="abc" /> <div xyz="123" /> |
| Attribute Value | input[xyz=abc] | Returns all input elements with an attribute of xyz and value of abc: <input xyz="abc" /> |
| Attr$ | input[id$=abc] | Returns <input id="123abc" /> (ends with) |
| Attr^ | input[id^=abc] | Returns <input id="abc123" /> (starts with) |
| Attr* | input[id*=abc] | Returns <input id="123abc123" /> (contains) |
| Multiple | input[name=abc][value=yes] | Returns <input name="abc" value="yes" /> (both attributes/values present) |
| Missing | input:not([alt]) | Returns all input elements MISSING attribute alt |
| Misc | ||
| Checkbox | input[type=checkbox]:checked | Returns all checked checkboxes |
| Radio Button | input[type=radio]:not(:checked) | Returns all unchecked radio buttons |
| Selected | #MySelect :selected | Returns all Selected elements from element with id MySelect |
| Even items | #MyTable tr:even | Returns all even rows (can also use odd). Note: Even/Odd is zero based. |
| nth-child | #MyTable tr:nth-child(2) | Returns element by position, in this case the 2nd row in the table. Note: nth-position is 1 based. |
| Contains | p:contains("Hello") | Returns all paragraph elements that contain the text "Hello" |
| Lists | ||
| nth-child | li:nth-child(1) | Returns all li elements that are the first child of their parent |
| nth-child | li:nth-child(3) | Returns all li elements that are the third child of their parent |
| nth-child | li:nth-last-child(1) | Returns all li elements that are the first child of their parent, counting from the last li element |
…
The jQuery Selector starts with the dollar sign and parentheses – $(), and finds one or more HTML elements in the DOM. We can use name, id, CSS Class, type, attribute, etc to find elements using the jQuery Selector.
jQuery provides number of ways to select a specific DOM element(s). The following table lists the most important selector patterns.
| Category | Selector | Description |
|---|---|---|
| Find element | $('div') | Find all <div> elements |
| $('p, div, code') | Find <p>,<div> and <code> elements | |
| Find descendant elements | $('div p') | Find all <p> elements which are descendants of <div> |
| $('div > p') | Find <p> which is child of <div> | |
| $(*) | Find all elements | |
| Find by Id | $('#myDiv') | Find element whose id is myDiv |
| $('div#myDiv') | Find <div> element whose Id is myDiv | |
| $('#myDiv1, #myDiv2') | Find multiple elements by id separated by comma. | |
| Find by CSS class | $('.myCSSClass') | Find all the elements with class=myCSSClass. |
| $('.myCSSClass1, .myCSSClass2 ') | Finds all elements whose class attribute is set to myCSSClass1 or myCSSClass2 | |
| $('div.myCSSClass') | Finds all <div> elements with class=myCSSClass | |
| Find child element | $('p:first-child') | Find all <p> elements, which is the first child of its parent element. (parent element can be anything) |
| $("p:last-child") | Selects all <p> elements which is the last child of its parent element. (parent element can be anything) | |
| $("p:nth-child(5)") | Selects all <p> elements which is the 5th child of its parent element. (parent element can be anything) | |
| $("p:nth-last-child(2)") | Selects all <p> elements which is the 2nd last child of its parent element. (parent element can be anything) | |
| $("p:only-child") | Selects all <p> elements which is the only child of its parent element. (parent element can be anything) | |
| Find by attribute | $('[class]') | Find all the elements with the class attribute(whatever the value). |
| $('div[class]') | Find all the <div> elements that have a class attribute(whatever the value). | |
| Find by containing value of attribute | $('div[class=myCls]') | Find all the <div> elements whose class attributes are equal to myCls. |
| $('div[class|=myCls]') | Find all the <div> elements whose class attributes are either equal to myCls or starting with myCls string followed by a hyphen (-). | |
| $('div[class *="myCls"]') | Selects <div> elements whose class attributes contain myCls. | |
| $('div[class~=myCls]') | Selects div elements whose class attributes contain myCls, delimited by spaces. | |
| $("div[class $= 'myCls']") | Selects <div> elements whose class attribute value ends with myCls. The comparison is case sensitive. | |
| $("div[class != 'myCls']") | Selects <div> elements which do not have class attribute or value does not equal to myCls. | |
| $("div[class ^= 'myCls']") | Selects <div> elements whose class attribute value starts with myCls. | |
| $("div:contains('tutorialsteacher')" | Selects all <div> elements that contains the text 'tutorialsteacher' | |
| Find by input type | $(":input") | Selects all input elements. |
| :button | $(":button") | Selects all input elements where type="button". |
| :radio | $(":radio") | Selects all input types where type="radio" |
| :text | $(":text") | Selects all input elements where type="text" |
| ":checkbox" | $(":checkbox") | Selects all checkbox elements. |
| :submit | $(":submit") | Selects all input elements where type="submit". |
| :password | $(":password") | Selects all input elements where type="password". |
| :reset | $(":reset") | Selects all input elements where type="reset". |
| :image | $(':image') | Selects all input elements where type="image". |
| :file | $(':file') | Selects all input elements where type="file". |
| :enabled | $(':enabled') | Selects all enabled input elements. |
| :disabled | $(':disabled') | Selects all disabled input elements. |
| :selected | $(':selected') | Selects all selected input elements. |
| :checked | $(':checked') | Selects all checked input elements. |
| :hidden | $(':hidden') | Selects all hidden elements. |
| :visible | $(':visible') | Selects all visible elements. |
| :odd | $('tr:odd') | Selects all odd rows. (1,3,5,7..) |
| :even | $('tr:even') | Selects all even rows.(0,2,4,6..) |
There are only two things wrong with C++: The initial concept and the implementation.
Bertrand Meyer
…
…