jQuery selectors and attribute selectors reference and examples V2

Glyn Mooney — Sun, 08 Nov 2009 13:38:05 +0000

At the start of the year I wrote an article over on another site detailing the different methods you could use to select elements using the powerful jQuery attribute selectors. Because I no longer work for that company any more and the article is no longer being maintained, I’ve decided to create a second version of the article so I can update it and extend it’s usefulness.

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

Below are a slip tabular list of the different selector and groups they seem to fit into.

jQuery Simple selectors
jQuery CSS style sudo selectors
jQuery XPath style selectors
jQuery form selectors

jQuery Simple 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

jQuery CSS style sudo selectors
Selector	Example	Description
List accurate as of jQuery 1.3
: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.
:only-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”.
:odd	$(’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

jQuery XPath style selectors
Selector	Example	Description
List accurate as of jQuery 1.3
[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”

jQuery Form Selectors
Selector	Example	Description
List accurate as of jQuery 1.3
: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.

Well I hope that version two of “jQuery selectors and attribute selectors reference and examples” is more helpful than V1. With a bit of luck you’ll find the grouping a little better too. Thanks for visiting! Please leave a message!

Skidoosh » jQuery

jQuery selectors and attribute selectors reference and examples V2

jQuery selectors and examples