jQuery Selectors


Posted by Ben Johnson on 31 May 2011 | 0 Comments

Jquery Selectors are used to specify which element from the HTML document you would like to use. If you are familuar with CSS 1-3 you will noticed the simularity.

All meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) must be escapes with two backslashes: \\. 

  • All Selector ("*")
    Select all elements
  • Contains Prefix Selector [name|="value"]
    Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
  • Contains Selector [name*="value"]
    Selects elements that have the specified attribute with a value containing the a given substring.
  • Contains Word Selector [name~="value"]
    Selects elements that have the specified attribute with a value containing a given word, delimited by spaces
  • Ends with Selector [name$="value"]
    Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
  • Equals Selector [name="value"]
    Selects elements that have the specified attribute with a value exactly equal to a certain value.
  • Not Equal Selector [name!="value="]
    Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value
  • Starts with Selector [name^="value"]
    Selects elements that have the specified attribute with a value beginning exactly with a given string
  • :animated Selector
    Select all elements that are in the progress of an animation at the time the selector is run
  • :button Selector
    Selects all button elements and elements of type button.
  • :checkbox Selector
    Selects all elements of type checkbox
  • :checked Selector
    Matches all elements that are checked
  • Child Selector ("parent > child")
    Selects all direct child elements specified by "child" of elements specified by "parent"
  • Class Selector (".class")
    Selects all elements with the given class
  • :contains() Selector
    Select all elements that contain the specified text
  • Descendant Selector ("ancestor descendant")
    Selects all elements that are descendants of a given ancestor
  • :disabled Selector
    Selects all elements that are disabled
  • Element Selector ("element")
    Select all elements with the given tag name
  • :empty Selector
    Select all elements that have no children (including text nodes)
  • :enabled Selector
    Selects all elements that are enabled
  • :eq() Selector
    Select the element at index n within the matched set
  • :even/:odd Selector
    Selects even elements, zero-indexed and odd
  • :file Selector
    Select all elements of type file
  • :first-child Selector
    Selects all elements that are the first child of their parent.
  • :first Selecto
    Selects the first matched element.
  • :focus selector
    Selects element if it is currently focused.
  • :gt() Selector
    Select all elements at an index greater than index within the matched set.
  • Has Attribute Selector [name]
    Selects elements that have the specified attribute, with any value.
  • :has() Selector
    Selects elements which contain at least one element that matches the specified selector.
  • :header Selector
    Selects all elements that are headers, like h1, h2, h3 and so on.
  • :hidden Selector
    Selects all elements that are hidden.
  • ID Selector (“#id”)
    Selects a single element with the given id attribute.
  • :image Selector
    Selects all elements of type image.
  • :input Selector
    Selects all input, textarea, select and button elements.
  • :last-child Selector
    Selects all elements that are the last child of their parent.
  • :last Selector
    Selects the last matched element.
  • :lt() Selector
    Select all elements at an index less than index within the matched set.
  • Multiple Attribute Selector [name="value"][name2="value2"]
    Matches elements that match all of the specified attribute filters.
  • Multiple Selector (“selector1, selector2, selectorN”)
    Selects the combined results of all the specified selectors.
  • Next Adjacent Selector (“prev + next”)
    Selects all next elements matching "next" that are immediately preceded by a sibling "prev".
  • Next Siblings Selector (“prev ~ siblings”)
    Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.
  • :not() Selector
    Selects all elements that do not match the given selector.
  • :nth-child() Selector
    Selects all elements that are the nth-child of their parent.
  • :only-child Selector
    Selects all elements that are the only child of their parent.
  • :parent Selector
    Select all elements that are the parent of another element, including text nodes.
  • :password Selector
    Selects all elements of type password.
  • :radio Selector
    Selects all elements of type radio.
  • :reset Selector
    Selects all elements of type reset.
  • :selected Selector
    Selects all elements that are selected.
  • :submit Selector
    Selects all elements of type submit.
  • :text Selector
    Selects all elements of type text.
  • :visible Selector
    Selects all elements that are visible.

Reference Manual: Jquery, W3C

http://api.jquery.com/category/selectors/