3. Query selectors are one of the most important
aspects of the jQuery library. These selectors use
familiar CSS syntax to allow page authors to quickly
and easily identify any set of page elements to
operate upon with the jQuery library methods.
Understanding jQuery selectors is the key to using
the jQuery library most effectively. -- Refcardz
4. In this chapter we will play using jQuery
on SlideShareâs homepage since it is using
jQuery. And for convenience I will use
Firebug console so that even you can run
it with your Firebug console when we
proceed further.
5. ⢠$ == jQuery and vice versa. Here I will use
just jQuery every where.
⢠jQuery(â*â) - Wild card selector and
selects all the elements in a document.
7. ⢠jQuery(â#idâ) - This selector selects an
element with the given id.
⢠I am going to select the element in the
homepage with id âplayerâ.
9. ⢠Lets say I want to get all the elements
which has class âdocinfoâ on the homepage.
⢠It is really simple to get all those elements
with jQuery.
⢠jQuery(â.docinfoâ) - Gets all the elements
with the given class name.
10. jQuery(â.docinfoâ)
I get all the elements with class name âdocinfoâ in a neat
array so that I can manipulate them easily by iterating.
11. ⢠Selecting elements with their tag names is
also so simple in jQuery.
⢠jQuery(âtagnameâ) will return all matching
elements with tagname.
⢠Lets select all elements with âdivâ tag.
13. ⢠Here is the best deal you get with jQuery
⢠Lets say I want to select element with id
âplayerâ, elements with class name
âdocinfoâ and elements with tags âulâ and
âpâ.
⢠I can get all the elements in a single simple
command.
⢠jQuery(â#player, .docinfo, ul, pâ)
15. ⢠jQuery(âancestor descendantâ) - This will
select all child elements that are
descendant of parent element.
⢠jQuery(âli aâ) - This will return all âaâ that
are a descendant of âliâ.
17. ⢠jQuery(âa > bâ) - This will select all âbâ
elements which are a child element of âaâ.
⢠How this one differs from the previous
selector?
⢠<li><span><a>something</a></span></li>
⢠If you use the previous selector i.e
jQuery(âli aâ) for the above html it will
return an array with the âaâ element. But if
you use jQuery(âli > aâ) it will return an
empty array since it will look only for
immediate children.
18. jQuery(âli > aâ)
If you compare this with previous result you will know the
actual difference in the size of the array returned.
19. ⢠jQuery(âprev nextâ) - This will return all
ânextâ elements that are immediate sibling
of âprevâ elements.
⢠jQuery(âlabel+inputâ) returns all âinputâ
which comes next to a âlabelâ element.
21. ⢠jQuery(âprev ~ siblingsâ) - This will return
all matching siblings after the âprevâ
element.
⢠jQuery(âdiv ~ pâ) will return all âpâ
elements that are siblings after the âdivâ
element.
23. ⢠Hope you have learnt some serious stuff
with jQuery this week.
⢠Next week we will see more about jQuery
ďŹlters which gives you more control over
jQuery selectors.
⢠Thank you.