JQuery selectors – Selecting a perticular element in the HTML document


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.

One thought on “JQuery selectors – Selecting a perticular element in the HTML document

  1. I came across a issue while selecting a child element with id.
    e.g. .class > #id
    This does not work

    Solution
    —————-
    .classofelement > select[id=idofelement]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s