JQuery selectors are like CSS Selectors, which allows you to find or
select element from DOM tree. When a HTML pages loaded in browser like Chrome, Firefox or Internet
Explorer, browser creates a tree like structure known as Document Object Model
or DOM. JavaScript and jQuery allows you to play with this DOM i.e. selecting
elements from DOM, traversing through DOM, going from one element to another,
selecting list of elements from DOM, adding or removing elements from DOM etc.
In order to apply most of jQuery function, available in jQuery object, we first
need to select HTML elements or tags, on which we want to apply those function,
jQuery selector allows you to choose those elements. There are many JQuery
selectors e.g. ID selector, class selector or element selector, which provides
capability to choose only elements you need. In this JQuery tutorial, we will
take a look at these JQuery selector, and simple example to learn how to use
them. As I have said before, jQuery is immensely powerful and helpful library
for client side scripting, it makes using JavaScript easy with Java like
methods. jQuery not only reduces code but also help to mitigate browser
incompatibility.
JQuery Selectors Examples
Here are list of some popular JQuery selectors. Best way to learn JQuery
selectors is to try them. We will following HTML code snippet to demonstrate
How different JQuery Selector works.
HTML
Document :
Here is the our HTML page, which we will use in this example. It contains
couple of common tags e.g. list items, h1, h2 and p, by using jQuery selector,
we can get any of this element or a list of elements.
<h1>Do you want
to learn Programming?</h1>
<h2>Programming
Languages</h2>
<p>choose the
one, which your friends like</p>
<ul id="languages">
<li>Java</li>
<li>
<ul
id="web">
<li>JavaScript</li>
</ul>
</li>
<li class='functional'>Lisp</li>
</ul>
1) ID
Selector - starts with # and select elements whose id attribute matches. For
example ${"#languages"} will chose
HTML tag, whose id is languages, which is unordered list (<ul id="languages">) here. This
selector will return only one elements and it’s the fastest selector available
in jQuery tool box.
2) Class
Selector - starts with dot ( . ) and select list of elements on which that
class has applied. For example $(".functional") will
select all HTML elements which has attribute class =
"functional", which is list item <li class='functional'>Lisp</li>.
This selector can return either only one element or more than one
element, based upon how many elements have that particular class applied. This
is generally used to select similar category elements i.e. more
than one elements.
3)
Element Selector or Tag Selector - selects all specified elements
from DOM e.g. ${"h2"} will select all <h2> elements.
Since this JQuery selector selects named HTML tags, it is also known as tag
selector. This selector is often used to grab a set of elements for particular
tag and then apply some class on it or perform manipulation on them.
4)
Descendent Selector - this JQuery selector is more specific, it allows
you to choose descendents of an HTML elements. For example $("#movies li"}
will select all list items (li) which are
descendent of HTML element, whose id is movies. In this
example $("#languages
li"} will select
all list items from unordered list (<ul id="languages">). jQuery has
one more selector, which is similar to descendent selector, but there is some
subtle difference between them, which we will look in next section.
5) Child
Selector - child selector is more specific than Descendent Selector. If an
element has children's and grand children, then using descendent selector will select all
descendents, which includes direct children and grand children. If you use
JQuery child selectors, then it will only select direct children of an element.
Child selector is denoted by greater than sign (>) For example in following HTML structure, if
we need all the <li> elements which is direct
child of (<ul id="languages">, then we
need to use JQuery child selector. if we use descendent selector as ${"languages
li"}; , it will also select inner <li> JavaScript,
while if we use child selector as ${"languages >
li"}, it will only select direct childs of
(<ul id="languages">, which
doesn't include <li>JavaScript</li>.
6) Multiple
selector : This jQuery selector allows you to choose more than one element in one
shot. By using multiple selector, you actually combine two selection in one
call. For example if you want to select element with CSS class functional, as well
as list item with id="web", you can use jQuery multiple
selector as ${".functional,
#web"). Just remember to put comma between two
arguments.
7) Pseudo
class : jQuery allows you to use CSS like pseudo classes e.g. $(‘li
:even’) to select even elements, $(‘li :odd’) to select
odd items, :first to select first item, and :last to select
last list item. This gives you immense power to select most specific element of
your choice. Here is an example of jQuery pseudo class selector, $("#languages
li:first") will return first list item from unordered list <ul>,
with id languages, which is Java, <li>Java</li>.
That's all on JQuery Selectors examples, we have seen examples of
major jQuery selectors including ID
selector, child selector, tag selector, descendent selector, multiple
selector and pseudo class selector. As you can see, JQuery selectors are
inspired with CSS selectors, So if you are good with CSS selectors, you will
pick jQuery selectors quickly. On the other hand, if you are not so familiar
with CSS selectors, then this gives you a chance to learn that as well.
Recommended jQuery books for further
reading
If you are interested in
learning JQuery and knowing more about power of this amazing JavaScript library,
you can checkout following books. Head First JQuery is my favorite but other
two are also good companion book.
Head First jQuery By Ryan Benedetti and Ronan Cranley
jQuery in Action, Second Edition
jQuery Cookbook: Solutions & Examples for jQuery Developers
No comments:
Post a Comment