Selection
| * | All of the elements in the page | $('*') |
| #special-id | The elements with the ID value of special-id | $('#some-id') |
| .special-class | All elements with teh class special-class | $('.special-class') |
| E | Matches all of the elements | $('div') |
| E.class | Matches all of the elements with class
| $('div.clearfix'), select all <div> elements with a class name of someClass
| E, F | Match all of element E and F | $('div, sapn') |
| E F | Matches all elements with tag name F that are descedants of E | $('div p') |
| E > F | Matches all elements with tag name F that are direct children of E | $('ul.my-list > li > a') |
| E + F | Matches all elements with tag name F that are immediate preceded by sibling E | |
| E ~ F | Matches all elements with tag name F preceded by any sibling E |
| $('div ~ p') selects all <p> elements that are preceded by a <div> element |
| $("p ~ ul") matched by "ul" that follow a sibling element matched by "p". |
| E [A] | Matches all elements with tag name E that have attribute A of any value |
| $('img [alt]') select all img element that possess an alt attribute.
| E [A='V'] | Matches all elements with tag name E that have attribute A whose value is exactly V | |
| E [A^='V'] | Matches all elements with tag name E that have attribute A whose value starts with V
| a[href^='http://'], div[title^='my'] |
| E [A*='V'] | Matches all elements with tag name E that have attribute A whose value contains V
| a[href *='jquery.com'] |
| E [A$='V'] | Matches all elements with tag name E that have attribute A whose value ends with V | a[href$='.pdf']
| E [A != 'V'] | Matches all elements with tag name E that have attribute A whose value does not match V
(are not equal to V) or that lack attribute A completely |
| E [A | ='V'] | Matches all elements with tag name E that have attribute A whose value is equal to V
or to V- (V followed by a hyphen) | $("div[class |='main']") |
| E [A ~= 'V'] | Matches all elements with tag name E that have attribute A whose value is equal to V
| or contains V delimted by spaces
| It is different from _='V', Since _V is more arbitrary value |
| E [C1] [C2] | Matches all elements with tag name E that have attributes that satisfy the criteria C1 and C2
| $('input[type="text"][required]') |
| E:has(F) | Matches all elements with tag name E that have at least one descendant with tag name F. |
| $('p:has(b)') selects all <p> elements that contain a <b> element
| :first | selects the first match within the context | li a:first | Same as :eq(0) or :lt(1)
| :last | Select the last match with the context | li a:last|
| :even | Select even elements within the context | li:even |
| :odd | Select odd elements within the context | li:odd |
| :eq(n) | Select the nth matching element | |
| :gt(n) | Selects the elements after the nth matching element \(the nth element is execluded\) | |
| :lt(n) | selects the elements before nth matching element (the nth element is execluded). |
| :first-child | Matches the first child element within the context | |
| :last-child | Matches the last child element within the context | |
| :first-of-type | Matches the first child element of the given type | |
| :last-of-type | Matches the last child element of the given type | |
| :nth-child(n), | Matches the nth (start from 1) child element, even or odd child elements,
| :nth-child(even|odd), | or nth child element computed by the supplied formula within the context based on
| :nth-child(Xn+Y ) | the given parameter
| :nth-last-child(n), | Matches the nth child element, even or odd child elements,
| or nth child element computed
| :nth-last-child(even|odd), | by the supplied formula within the context, counting from the last to
| :nth-last-child(Xn+Y) | the first element based on the given
| :nth-of-type(n), | Matches the nth child element, even or odd child elements, or nth child element of
| :nth-of-type(even|odd), | their parent in relation to siblings with the same element name
| :nth-of-type(Xn+Y)
| :nth-last-of-type(n), | Matches the nth child element, even or odd child elements, or nth child element of
| :nth-last-of-type(even|odd), | their parent in relation to siblings with the same element name,
| :nth-last-of-type (Xn+Y) | counting from the last to the first element
| :only-child | Matches the elements that have no siblings |
| :only-of-type | Matches the elements that have no siblings of the same type |
| :contains(text) | select only elements containing the specified text \(the text of the children and the descendants
| is also evaluated)
| :empty | select only element that have no children (including text nodes) |
| :has(selector) | select only elements that contain at least one element that match the specific selector.
| :parent | select only element that have at least one child node (either an element or text).
| :animated | Selects only elements that are currently under animated control |
| :header | Selects only elements that are headers: through |
| :hidden | Selects only elements that are hidden| |
| :lang(language) | Selects elements in a specified language | |
| :not(selector) | Negates the specified selector | |
| :root | Selects the element that’s the root of the document | |
| :target | Selects the target element indicated by the fragment identifier of the document’s URI |
| :visible | Selects only elements that are visible |
/* form selector */
| :button | Selects only button elements
| (input[type=submit] , input[type=reset] , input[type=button] , or button)
| :checkbox | Selects only check box elements (input[type=checkbox])
| :checked | Selects check boxes or radio elements in the checked state or options of select elements
| that are in a selected state
| :disabled | Selects only elements in the disabled state
| :enabled | Selects only elements in the enabled state
| :file | Selects only file input elements (input[type=file])
| :focus | Selects elements that have the focus at the time the selector is run
| :image | Selects only image input elements (input[type=image])
| :input | Selects only form elements (input, select, textarea, button)
| :password | Selects only password elements (input[type=password] )
| :radio | Selects only radio elements (input[type=radio] )
| :reset | Selects only reset buttons (input[type=reset] or button[type=reset])
| :selected | Selects only option elements that are in the selected state
| :submit | Selects only submit buttons (button[type=submit] or input[type=submit] )
| :text | Selects only text elements (input[type=text]) or input without a type specified
| (because type=text is the default)
| :not |
* Attribute selects accept a wildcard syntax inspired by regular expression.
^ -> beginning of string i.e. $('a[href^="mailto:"]').addClass('mailto')
$ -> end of string i.e. $('a[href$=".pdf"]').addClass('pdflink');
* -> arbitrary position within a string
! -> negated value
> -> child selector
: -> filter
0 -> index from left
-1 -> index from right
selector example
| $('*') | Selects all elements in the document. |
| $("p > *") | Selects all elements that are children of a paragraph element. |
| $("#idName") | Gets the element with id="idName" |
| $(".className") | Gets the element with class="className" |
| $("li:not(.myclass)") | Selects all elements matched by "li" that do not have class="myclass" |
| $("a#specialID.specialClass") | This selector matches links with an id of specialID and a class of specialClass. |
| $("p a.specialClass") | This selector matches links with a class of specialClass declared within "p" elements
| $("ul li:first") | This selector gets only the first "li" element of the "ul" |
| $("#container p") | matched by "p" that are descendants of an element that has an id of container. |
| $("li > ul") | matched by "ul" that are children of an element matched by "li" |
| $("strong + em") | Selects all elements matched by <em> that immediately follow a sibling element
| matched by <strong>.
| $('div~p) | selects all <div> elements that are preceded
| $("code, em, strong") | Selects all elements matched by "code" or "em" or "strong".
| $("p strong, .myclass") | matched by "strong" that are descendants of an element matched by "p"
| as well as all elements that have a class of myclass.
| $(":empty") | Selects all elements that have no children.
| $("p:empty") | Selects all elements matched by "p" that have no children. |
| $("div[p]") | Selects all elements matched by "div" that contain an element matched by "p".
| $("p[.myclass]") | Selects all elements matched by "p" that contain an element with a class of myclass.
| $("a[@rel]") | Selects all elements matched by "a" that have a rel attribute. |
| $("input[@name=myname]") | Selects all elements matched by "input" that have a name value exactly equal
| to myname.
| $("input[@name^=myname]") | Selects all elements matched by "input" that contain a name value
| beginning with myname.
| $("a[@rel$=self]") | Selects all elements matched by "a" that contains a class value ending with bar
| $("a[@href*=domain.com]") | Selects all elements matched by "a" that contains an href value containing domain.com
| div[class|='main'] | Select all of the div having class='main' or having a class name strarting
| like class='main-footer'
| input[type="text"][required] | that are required (the required attribute has been introduced in HTML5)
| and are of type text.
| input:not(:checkbox) | Select non-check box input elements
|$('img:not([src*="dog"])') | fetch all image elements that don't reference 'dog' in their src attributes
| $('input[name=myRadioGroup]:radio:checked') | selects all radio elements with the name attribute value of
| myRadioGroup that are checked
| $(':text:disabled') | selects all text filds that are disabled
| $('#xyz p :header') | selects all header type elements within <p> elements that are
| within an element with an id value of xyz.
| Note the space before :header that prevents it from binding directly
| to the p.
| $('option:not(:selected)) | selects all unselected <option> elements
| $('#myForm button:not(.someClass)') | selects all buttons from the <form> with the id of myForm
| that do not possess the class name someClass.
| $('select[name=choices] :selected') | selects the selected <option> elements within the <select> element
| named choices.
| $('p:contains(coffe)') | selects all <p> elements that contain the text coffe
filter example
| $("li:even") | Selects all elements matched by "li" that have an even index value. |
| $("tr:odd") | Selects all elements matched by <tr> that have an odd index value. |
| $("li:first") | Selects the first "li" element. |
| $("li:last") | Selects the last "li" element |
| $("li:visible") | Selects all elements matched by "li" that are visible. |
| $("li:hidden") | Selects all elements matched by "li" that are hidden. |
| $(":radio") | Selects all radio buttons in the form. |
| $(":checked") | Selects all checked boxex in the form. |
| $(":input") | Selects only form elements (input, select, textarea, button). |
| $(":text") | Selects only text elements (input[type=text]). |
| $("li:eq(2)") | Selects the third "li" element |
| $("li:eq(4)") | Selects the fifth "li" element |
| $("li:lt(2)") | Selects all elements matched by "li" element before the third one;
| in other words, the first two "li" elements. |
| $("p:lt(3)") | selects all elements matched by "p" elements before the fourth one;
| in other words the first three "p" elements. |
| $("li:gt(1)") | Selects all elements matched by "li" after (greater than) the second one. |
| $("p:gt(2)") | Selects all elements matched by "p" after the third one. |
| $("div p") | Selects all elements matched by "p" that are children of an element matched by "div". |
| $("div code") | Selects all elements matched by "code" that are descendants of an element matched by "div". |
| $("p a") | Selects all elements matched by "a" that are descendants of an element matched by "p" |
| $("li:first-child") | Selects all elements matched by "li" that are the first child of their parent. |
| $("li:last-child") | Selects all elements matched by "li" that are the last child of their parent. |
| $("div p:nth-child(4)") | Selects all elements matched by "p" that are inside a <div>
| that are the fourth child of their parent element. |
| $("div .description:nth-of-type(2) |Retrieve all the second elements having class "description"
| inside a "<div>"
| $(":parent") | Selects all elements that are the parent of another element, including text. |
| $("li:contains(second)") | Selects all elements matched by "li" that contain the text second. |