javascript

[Jquery] Selecting elements

Selecting elements by Type, Class or Id

  • $(‘*’) – Select all the elements in document
  • $(‘.myClass’) – Select all the elements that have class myClass
  • $(‘element’) – Select all the elements of type element
  • $(‘#myId’) – Select element with id myId

Selecting elements by using relationship or union

  • $(‘tr td’) – Matches td elements that are descendants of tr elements
  • $(‘tr > td’) – Matches td elements that are immediate descendants of tr elements
  • $(‘h2 + table’) – Matches table elements that immediately follow h2 elements
  • $(‘h2 ~ table’) – Matches table elements that follow h2 elements
  • $(‘tr, td’) – Matches tr and td elements

Selecting elements using attribute

  • $(‘[attr]’) – Selects elements that have an attribute called attr, irrespective of the
    attribute value
  • $(‘[attr]=”val”‘) – Selects elements that have an attr attribute whose value is val
  • $(‘[attr]!=”val”‘) – Selects elements that have an attr attribute whose value is not val
  • $(‘[attr]^=”val”‘) – Selects elements that have an attr attribute whose value starts with val
  • $(‘[attr]~=”val”‘) – Selects elements that have an attr attribute whose value contains val
  • $(‘[attr]$=”val”‘) – Selects elements that have an attr attribute whose value ends with val
  • $(‘[attr]|=”val”‘) – Selects elements that have an attr attribute whose value is val or starts with val followed by a hyphen (val-)

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('[type][value="Delete"]').addClass("highlight");
});

The selector in this statement matches those elements that have a type attribute (with any value) and a value attribute whose value is Delete

Selecting elements using filters

  • :eq(n) – Selects the nth item in the selection, using a zero-based index
  • :even:odd – Selects the even-numbered or odd-numbered elements
  • :first:last – Selects the first or last element
  • :gt(n):lt(n) – Selects all the elements whose index relative to their siblings is greater
    or less than
    n
  • :header – Selects all elements that are headers (h1, h2, and so on)
  • :not(selector) – Selects all the elements that do not match the selector

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('tr:eq(1)').addClass("highlight");
});

This selector matches all of the tr elements and filters the one that is at position 1 in the selection. Elements are selected in the order that they appear in the document, which means that we have selected the second tr element to appear in the document (because the eq filter uses a zero-based index).

Selecting elements using content filters

  • :contains(‘text’) Selects elements that contain text or whose children contain text
  • :has(‘selector’) Selects elements that have at least one child element that matches selector
  • :empty Selects elements that have no child elements
  • :parent Selects elements that have at least one other element
  • :first-child Selects elements that are the first child of their parent
  • :last-child Selects elements that are the last child of their parent
  • :nth-child(n) Selects elements that are the nth child of their parent, using a one-based index
  • :only-child Selects elements that are the only child of their parent

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('tr:has(td:contains("Kili"))').addClass("highlight");
});

In this example, we select tr elements that contain td elements whose text contains Kili

Selecting elements using form filters

  • :button Selects button elements and input elements whose type is button
  • :checkbox Selects check boxes
  • :checked Selects check boxes and radio button elements that are checked
  • :disabled:enabled Selects items that are enabled or disabled, respectively
  • :input Selects input elements
  • :password Selects password elements
  • :radio Selects radio buttons
  • :reset Selects input elements whose type is reset
  • :selected Selects option elements that are selected
  • :submit Selects input elements whose type is submit
  • :text Selects input elements whose type is text

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $(':button').addClass("highlight");
});

 

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