Introduction to jQuery selectors

1. jQuery SlideCasting
#1 jQuery Selectors

2. Quick links
• http://jquery.com/
• http://api.jquery.com/
• http://getfirebug.com
• http://www.slideshare.net/search/slideshow?
q=jquery

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.

6. jQuery(“*”)
Here jQuery(“*”) gives out all the elements present
inside the 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”.

8. jQuery(“#player”)
You can see that it selects the element 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.

12. jQuery(“div”)
I get all the elements with “div” tag in a neat array.

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”)

14. jQuery(“#player, .docinfo, ul, p”)
Isn’t this great? Let’s get deep into selectors now.

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”.

16. jQuery(“li a”)
I get all “a” elements descending “li” alone.

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.

20. jQuery(“label+input”)
This has returned only the “input” elements which comes
right after a “label” element (immediate sibling)

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.

22. jQuery(“div ~ p”)
This has returned all “p” elements that are siblings to
“div” elements.

23. • Hope you have learnt some serious stuff
with jQuery this week.
• Next week we will see more about jQuery
filters which gives you more control over
jQuery selectors.
• Thank you.