jQuery SlideCasting
     #1 jQuery Selectors
Quick links

• http://jquery.com/
• http://api.jquery.com/
• http://getfirebug.com
• http://www.slideshare.net/search/slide...
Query selectors are one of the most important
aspects of the jQuery library. These selectors use
familiar CSS syntax to al...
In this chapter we will play using jQuery
on SlideShare’s homepage since it is using
jQuery. And for convenience I will us...
• $ == jQuery and vice versa. Here I will use
  just jQuery every where.

• jQuery(“*”) - Wild card selector and
  selects...
jQuery(“*”)




Here jQuery(“*”) gives out all the elements present
              inside the document.
• jQuery(“#id”) - This selector selects an
  element with the given id.

• I am going to select the element in the
  homep...
jQuery(“#player”)




You can see that it selects the element with id “player”
• Lets say I want to get all the elements
  which has class “docinfo” on the homepage.

• It is really simple to get all t...
jQuery(“.docinfo”)




I get all the elements with class name “docinfo” in a neat
  array so that I can manipulate them ea...
• Selecting elements with their tag names is
  also so simple in jQuery.

• jQuery(“tagname”) will return all matching
  e...
jQuery(“div”)




I get all the elements with “div” tag in a neat array.
• Here is the best deal you get with jQuery
• Lets say I want to select element with id
  “player”, elements with class na...
jQuery(“#player, .docinfo, ul, p”)




Isn’t this great? Let’s get deep into selectors now.
• jQuery(“ancestor descendant”) - This will
  select all child elements that are
  descendant of parent element.

• jQuery...
jQuery(“li a”)




I get all “a” elements descending “li” alone.
• jQuery(“a > b”) - This will select all “b”
  elements which are a child element of “a”.

• How this one differs from the...
jQuery(“li > a”)




If you compare this with previous result you will know the
     actual difference in the size of the ...
• jQuery(“prev next”) - This will return all
  “next” elements that are immediate sibling
  of “prev” elements.

• jQuery(...
jQuery(“label+input”)




This has returned only the “input” elements which comes
     right after a “label” element (imme...
• jQuery(“prev ~ siblings”) - This will return
  all matching siblings after the “prev”
  element.

• jQuery(“div ~ p”) wi...
jQuery(“div ~ p”)




This has returned all “p” elements that are siblings to
                   “div” elements.
• Hope you have learnt some serious stuff
  with jQuery this week.

• Next week we will see more about jQuery
  filters whi...
Upcoming SlideShare
Loading in...5
×

jQuery Selectors

9,479

Published on

Introduction to jQuery selectors

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,479
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
105
Comments
1
Likes
3
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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×