JQuery Selector Expressions Demystified

JQuery offers a comprehensive API for searching and locating HTML elements. I discuss here the syntax and semantics  of the JQuery Selector Expressions.

Selecting all elements with a specific tag type:
$('table'): Selects all HTML table elements.
$('div'): Selects all div table elements.

Selecting a unique element with a specific ID:
$('#btnSelect'): Selects the element with the id btnSelect regardless of its type. However, you can still specify the element type in case you have multiple different element types with the id. For example, if you have a div element that is called “Select” and a button element that is called also “Select”. In order to select the div element you can use the following select expression:
$('div#Select'): Selects the element with id “Select” and tag type “div”.

In case of multiple elements of the same type and id, only the first one will be returned unless you selected all of them.

Selecting elements with a specific CSS class name:
$('.cssClass1'): Selects all elements with css class “cssClass1”.
$('.cssClass1.cssClass2'): Selects all elements with css classes “cssClass1” and “cssClass2”.
$('div.cssClass1.cssClass2'): Selects all div elements with css classes “cssClass1” and “cssClass2”.

Selecting elements with a specific tag that are descendants of another tag element:
$('h2 a'): Selects all anchor elements that are descendants of an h2 element.

A descendant of an element is child or grandchild or any sub element of the parent element.

so what if you want to select a direct child and not one of the descendants?
$('h2>a'): Selects elements with tag type “a” and that are children of h2 element.
$('h2+a'): Selects a elements that follows h2 element on the same level, sibling.

The + and the ~ operators are pretty much the same except that the + matches the two operands are immediately after each other. On the other hand, the ~ operator matches all general siblings within the same level, not necessarily after each other.

Selecting multiple elements:
$('*'): Selects all elements
$('div>*'): Selects all elements that are descendants of div element.
$('h2,img,table,a'): Selects any of the mentioned elements.
$('img : first-child'):Selects the img element that is the first element of its parent.
$('img : last-child'):Selects the img element that is the last element of its parent.
$('img : nth-child(3)'): Selects the third child img element of their parents.

The difference between the nth and the nth-child methods is that nth compares the element index, 0 based. Where as the nth-child comapres the count of the elements to the specified element. In other words, saying the nth(2) is similar to saying element[2] which is the third element. Where as saying nth-child(2) is the second member of the children, element [1].

$('img : only-child'):Selects img elements that are the only child of their parents.
$ ( ' only-child'): Selects all elements that are the only child of their parents.
$('div:empty'): Selects all div elements that have no children.
$(':empty'): Select all elements that have no children.
$('img:not('.cssClass1')): Selects all img elements that does not have the cssClass1 style applied.

Form Selectors:

$('tr:first'): Selects the first tr elements.
$('tr:last'): Selects the last tr elements.
$('tr:even'): Selects all tr elements with a even index.
$('tr:eq(3)'): Selects the 4th tr elements.
$('tr:nth(3)'): Selects the 4th tr elements.
$('tr:gt(3)'): Selects tr elements that has an index greater than 4.
$('tr:lt(3)'): Selects tr elements that has an index less than 4.
$('P:cotnains(Sample Text)'): Selects all P elements that contain the specified text, “Sample Text”.
$('button:visible'): Selects all visible buttons.
$('button:hidden'): Selects all hidden buttons.

Using XPath:

You can use the XPath expression to select elements from the DOM:
$('a//img'): Selects img elements that are descendants of an a element.
$('a/img'): Selects img elements that are a child of an a element.
$('cssClass1/..'): Selects the parent element of all elements that have the cssClass1 applied.
$('a[img]'): Selects all a elements that contain an img element.
$('a[@src]'): Select all a elements that has a src attribute.
$('a[@src="codeleacher.wordpress.com"]'): Select all a elements that has a src attribute equal to codeleacher.wordpress.com.

$('a[@src="codeleacher.wordpress.com"]') and $('a[@src=codeleacher.wordpress.com]') are the same. 

$('a[@src!="codeleacher.wordpress.com"]'): Select all a elements that has a src attribute not equal to codeleacher.wordpress.com
$('a[@src^="code"]'): Select all a elements that has a src attribute starts with the string code.
$('a[@src*="code"]'): Select all a elements that has a src attribute contains the string code.
$('a[@src$=".com"]'): Select all a elements that has a src attribute ends with the string .com

Advertisements

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

%d bloggers like this: