Sunday, April 5, 2009

Jquery part 2 – Selectors

Jquery API provides an interface called “Selectors” which is a powerful component to filter the HTML elements based on the element name, id and element type.

The DOM elements can be selected with the Jquery function “$” or “jquery”. For example, the hyperlinks in the HTML pages can be retrieved using the selector $(a).

Following are the few examples of sample selectors that are very useful for DOM manipulation.

a – Retrieves all anchor links with the tag < a >.

#DOMElementID – Retrieves the DOM element with the id “DOMID”.

.DOMElementClass – Retrieves the DOM elements with the class “DOMClass”.

P a.DOMElementClass – Retrieves the DOM element links with the class “DOMClass” embedded within the tag < p >.

Ul > Li > a – Retrieves links which are children of list element
  • which are in turn children of < ul >.

    A[href^=http://] – Retrieves links with an href value beginning with http://.

    Div[type=text] – retrieves html text box.

    P:odd – retrieves every odd paragraph elements.

    Li:last-child – retrieves last child < li > of each < ul > element.

    :radio:checked – retrieves radio buttons in the DOM that are checked.

    :checkbox:checked – retrieves checkboxes in the Dom that are checked.

    Input:not(:checkbox) – retrieves input elements from the DOM except checkboxes.
  • No comments: