jQuery Selectors


Published on

Introduction to jQuery selectors

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery Selectors

  1. 1. jQuery SlideCasting #1 jQuery Selectors
  2. 2. Quick links • http://jquery.com/ • http://api.jquery.com/ • http://getfirebug.com • http://www.slideshare.net/search/slideshow? q=jquery
  3. 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. 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. 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. 6. jQuery(“*”) Here jQuery(“*”) gives out all the elements present inside the document.
  7. 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. 8. jQuery(“#player”) You can see that it selects the element with id “player”
  9. 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. 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. 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. 12. jQuery(“div”) I get all the elements with “div” tag in a neat array.
  13. 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. 14. jQuery(“#player, .docinfo, ul, p”) Isn’t this great? Let’s get deep into selectors now.
  15. 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. 16. jQuery(“li a”) I get all “a” elements descending “li” alone.
  17. 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. 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. 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. 20. jQuery(“label+input”) This has returned only the “input” elements which comes right after a “label” element (immediate sibling)
  21. 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. 22. jQuery(“div ~ p”) This has returned all “p” elements that are siblings to “div” elements.
  23. 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.