The query word of jQuery is for searching an elemnt on the webpage and then applying some effects to it. So, in order to reach to the elements in our DOM, we use the selector defined in jQuery.

Borrowing from CSS 1-3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document. If you can recall javascript, there is only id element that can be tracked directly in it using getElementsById(). For accessing any other parts of the DOM, we need to know traversing through DOM. However, we can directly move to any class or id in jquery using its selector.

JQuery has only one function $. This function can be used to select elements present on the document, add elements to the document and for browser interactions. We can select an id using #idName and .classname for class. Here is an example.

	$idobj = $('#myId'); // returns the obj with id myId
	$classobj = $('.className');

Besides, selecting the simplest part ids and classes, there are several other selectors which we will be using very frequently.

All Selector (*)

It selects each element present on the document. It is a bit slow since it takes into account the entire webpage elements.

	$idobj = $('*'); // selects each element
Selecting animated objects

To select animating objects we use a jQuery extension :animated. SInce its not a CSS element, we first need to select all the elements or any particular bunch of desired elements and then apply a filter of :animated for best results.

	$idobj = $('.myClass:animated'); 
	// selects each element with class myClass and then filters animated ones
Selecting with attributes

We often wish to apply same CSS to similar things i.e. in terms of HTML with some common attribute values. To select elements with attribute we use $('[attribute|="value"]') . Suppose we have a number of links on our document as shown :-


// to select all the links , we use
$links = $('a');

// to select all the links with hreflang en
$links = $('a[hreflang|="en"]');
// selects each link with hreflang either en or starting with en
// Link1 and Link2 are selected

$links = $('a[hreflang*="en"]');
// select all links with string en present. All three are selected

$links = $('a[hreflang~="en"]');
// select all links with word en present. Only 1st one is selected

$links = $('a[hreflang$="UK"]');
// select all links with hreflang ending with UK. 2nd selected

$links = $('a[hreflang="en"]');
// select all links with hreflang exactly equal to en. 1st selected

$links = $('a[hreflang!="en"]');
// select all links with hreflang not equal to en. last two selected

$links = $('a[hreflang^="en"]');
// select all links with hreflang starting with en. All selected
:eq selector

Suppose, we have 10 elements on our document each having class (.myClass) and we wish each of the element to animate in a different way. This can be done by using :eq filter after the selected element. The 10 elements can be accessed by :eq(0) to :eq(9). Lets see an example :-

Contents of myClass 1
Contents of myClass 2
Contents of myClass 3
Contents of myClass 4
$sel = $('.myClass:eq(1)'); // selects the 2nd myClass element present on the document
Odd and even selector

Many a times, we need to select similar elements with even or odd index numbers , like, for decorating odd and even rows of a table. This can be done directly by using :odd and :even filters

Index #0
Index #1
Index #2
Index #3
$sel = $('tr:odd'); // returns index 1 and 3 $sel2 = $('tr:even'); // returns index 0 and 2
Hidden object selector

To show animations, we require to hide something and show them at other times and so and so. To select all the hidden elements

$hidItems = $(':hidden');
 // returns all the hidden elements

 $hidSpecific = $('#idName:hidden'); 
// hidden elements of specified idname
nth-child Selector

It selects the nth child of the parent. Moreover, the value of n is "1-indexed" i.e. counting starts from 1 instead of 0. hence it differs from "0-indexed" :eq selector. As a result nth-child(even) and :even selector return exactly different result. Because :even selector is a "0-indexed" selector. Lets see an example.

  • 1
  • 2
  • 3
  • 4
  • 5
$var1 = $('li:even'); // selects 1,3,5 $var2 = $('li:eq(1)'); // selects 2 $var3 = $('li:nth-child(even)'); // selects 2 and 4 $var4 = $('li:nth-child(3n)'); // selects 3 (multiples of 3) $var5 = $('li:last-child'); // selects 5 $var6 = $('li:first-child'); // selects 1

:first-child and :last-child are special classes of :nth-child selector which selects first and last child of the selected parent respectively.

:not selector

The :not selector selects all which do not match the given selector. This is very useful and helps in selecting very complex selections. Lets explain through an example

$sel = $('input:not(:checked)'); // selects Mary and lcm

All of the above commands can be tested on any HTML document in some debugger. You can either use a firebug from here or if you are using Google chrome. Go to console window and write all the commands mentioned. They will return with the values shown.
Once , you are happy and through in the selectors, lets see some event handlers which will help us in doing actions by triggering functions.

Member Login

Member Login

Not a Member? Sign Up!

Login to comment

Be the first to comment on this topic


<<< Wanna review

Continue >>>