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.
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 :-
Link1 Link2 Link3 // 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
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 1Contents of myClass 2Contents of myClass 3Contents 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
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
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.
:first-child and :last-child are special classes of :nth-child selector which selects first and last child of the selected parent respectively.
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
MarylcmPeter$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.