Uploaded on

Introduction to jQuery selectors

Introduction to jQuery selectors

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,358
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
101
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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