jQuery selectors and attribute selectors reference and examples

Tuesday, March 31st, 2009 at 11:44 pm by Maja Williams

jQuery selectors and attribute selectors are some of the best features jQuery has to offer when it comes to DOM manipulation. They allow you to quickly select all elements or groups of element of a given tag name, attribute name or their contents and allow you to manipulate them as a group or a single node. This article can be used as a beginners guide to selectors or as a cheahsheet or reference

The following table lists the different methods you have available to you to select nodes when using jQuery. All of the listed selectors should be wrapped in the following to stop your jQuery scripts conflicting with other libraries:

    (function ($) {
        //Your code here
    })(jQuery);

jQuery selectors and examples

jQuery Selectors and Attribute Selectors
Selector Example Description
List accurate as of jQuery 1.3
* $(‘*’); This selector is a wild card method and will select all elements in a document.
#id $(‘#id’); This selector selects an element with the given ID.
.class $(‘.class’) The class selector will gather all elements in the document with the given class name
element $(‘element’) This selector will collect all elements in a document with the given tag name i.e. table, ul, li, a etc.
a, b, c. … n $(‘th, td, .class, #id’) This method can use multiple selection patterns to collect elements.
parent child $(‘li a’) This will select all “a” elements that are a descendant of “li”
a > b $(‘table > tr’); This will select all b elements which are a child element of a or in our example all tr elements in a table or tables.
a + b $(‘li + a’); This will select all “a” elements that are an immediate descendant of “li” in our example.
a ~ b $(‘p ~ ul’); This selector will select all “ul” elements that are a sibling of “p”
:first $(‘ul li:first’); Returns the first element in a result set
:first-child $(‘ul li:first-child’); Returns the first child element of the parent element.
:last $(‘ul li:last’); Returns the last element in a result set
:last-child $(‘ul li:last-child’); Returns the last child element of the parent element.
:o nly-child $(‘div p:only-child’); Returns elements which are the only child of the parent element.
:not(a) $(‘input:not(:checked)’); Returns all elements that are not “a” on in our example all input elements that are not checked
:has(a) $(‘div:has(p)’); Returns all elements with a descendant that matches a in out example a “div” that contains a “p”.
:o dd $(‘ul li:odd’); Returns all odd elements in a result set (zero based)
:even $(‘ul li:even’); Returns all even elements in a result set (zero based)
:eq(n) $(‘ul li:eq(n)’); Returns a numbered element identified by n (zero based)
:gt(n) $(‘ul li:gt(n)’); Returns all elements in a result set greater than n (zero based)
:lt(n) $(‘ul li:lt(n)’); Returns all elements in a result set less than n (zero based)
:nth-child(n) $(‘ul li:nth-child(n)’); Returns the nth child in a result set (one based)
:nth-child(odd) $(‘ul li:nth-child(odd)’); Returns all odd numbered elements in a result set (one based)
:nth-child(even) $(‘ul li:nth-child(even)’); Returns all even numbered elements in a result set (one based)
:nth-child(formula) $(‘ul li:nth-child(3n)’); Returns every nth child in a result set. In our example every third child (one based)
:header $(‘:header’); Returns all heading elements e.g. h1, h2, etc.
:animated $(‘ul:animated’); Returns elements with an animation currently in progress
:contains(text) $(‘:contains(hello)’); Returns all elements containing the passed string
:empty $(‘:empty’); Returns all elements that contain no child nodes
:parent $(‘li:parent’); Returns all elements that a parent nodes to any other DOM element including text nodes.
:hidden $(‘ul:hidden’); Returns all hidden elements that are hidden with CSS or input fields of the type “hidden”
:visible $(‘ul:visible’); Returns all visible elements
[attribute] $(‘[href]‘); Returns all elements that contain the passed attribute in our example any element with a “href” attribute
[attribute=value] $(‘[rel=external]‘); Returns all elements that the passed attribute value is equal to the passed value. In our example ant element with a “rel” attribute equal to “external”
['attribute!=value'] $(‘[rel!=external]‘); Returns all elements that the passed attribute value is not equal to the passed value. In our example ant element with a “rel” attribute that is not equal to “external”
[attribute!=value] $(‘[class^=open]‘); Returns all elements that the passed attribute value start with the passed value. In our example any element thats “class” attribute value begins with “open”
[attribute$=value] $(‘[id$=-wrapper]‘); Returns all elements that the passed attribute value ends with the passed value. In our example any element whos “id” ends with “-wrapper”
[attribute*=value] $(‘[class*=offer]‘); Returns all elements that the passed attribute value contains the passed value. In our example any element whos “class” contains the string “offer”
:input $(‘:input’); Returns only input elements of the tag name input, select, textarea and button
:text $(‘:text’); Returns only input elements of the type “text”
:password $(‘:password’); Returns only input elements of the type “password”
:radio $(‘:radio’); Returns only input elements of the type “radio”
:checkbox $(‘:checkbox’); Returns only input elements of the type “checkbox”
:submit $(‘:submit’); Returns only input elements of the type “submit”
:image $(‘:image’); Returns only input elements of the type “image”
:reset $(‘:reset’); Returns only input elements of the type “reset”
:file $(‘:file’); Returns only input elements of the type “file”
:button $(‘:button’); Returns only input elements of the type “button”
:enabled $(‘:enabled’); Returns all enabled input elements
:selected $(‘:selected’); Returns the selected element in a select list.
:disabled $(‘:disabled’); Returns disabled input elements
:checked $(‘:checked’); Returns checked input elements of the type radio or checkbox.

Hopefully this reference table will help you on your way with jQuery selectors and attribute selector. Hope this helps.

For information on how to use the returned jQuery object from any of the selectors above please read this aticle: jQuery Object to jQuery DOM Element

Share this article:
  • Digg
  • del.icio.us
  • Ping.fm
  • LinkedIn
  • Facebook
  • Sphinn
  • Mixx
  • Google Bookmarks
  • NewsVine
  • Reddit
  • Technorati
  • Slashdot
  • Netvibes
  • StumbleUpon
  • Live
  • Netvouz
  • Faves
  • Gwar
  • MySpace
  • Yahoo! Buzz

Tags: , , ,

Categories: Blogs, JavaScript, Technical, jQuery

Maja Williams has written 16 articles.

Other articles by this author Maja Williams

You can leave a response, or trackback from your own site.

18 Comments to “jQuery selectors and attribute selectors reference and examples”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>