jQuery filters - Part 1

3,231 views

Published on

Tutorial about basic jQuery filters.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,231
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
44
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery filters - Part 1

  1. 1. jQuery SlideCasts #2 jQuery filters Part - 1 (Basic filters)
  2. 2. jQuery filters enhance jQuery selectors by providing additional logic. And this actually unleashes the power of selectors.
  3. 3. • Lets start with some basic filters: • :odd & :even filters - finds odd and even elements. (zero-indexed) • Lets say a table with 4 rows(since everything is zero-indexed in arrays rows are numbered as 0,1,2,3) :odd will give you rows 1 & 3 and even will give you 0 & 2.
  4. 4. jQuery("ul.doclist li:odd").css("background- color","lightgreen") Here we have made background color for all odd “li” inside “ul” with classname “doclist” as lightgreen. Same goes for :even.
  5. 5. • :gt & :lt - They stand for greater than and lesser than. :gt gives you children greater than index and :lt gives you children lesser than index. • Lets say a table with 5 rows(0,1,2,3,4), jQuery(“tr:gt(3)”) will give rows 3 & 4. • To test this lets goto SlideShare’s invite friends page.
  6. 6. jQuery("tr:lt(3)").css("background- color","lightgreen") You can see that top 3 rows have lightgreen background.
  7. 7. • :first & :last - These select just one element. • In a table, :first will return the first row and :last will return the last row.
  8. 8. jQuery(“tr:first”).css(“background- color”,”lightgreen”) You can see that first row alone has “lightgreen” background.
  9. 9. jQuery(“:header”).css(“background-color”,”lightgreen”) :header - It gives you all header elements like h1,h2,h3... Here you can see all header elements have lightgreen background.
  10. 10. function animate(){ jQuery(“.logo”).slideToggle(“slow”,animate); } jQuery(“:animated”) :animate - gives you all the elements which are currently being animated. In order to do this first we need to animate an element and thats what the first script does.You need not worry about what that script is as of now. All it does is it animates the logo. Now when you run jQuery(“:animated”) will give you the logo element since it is being animated.
  11. 11. :eq - this matches a single element with its index. Lets say a table with 4 rows(0,1,2,3), :eq(2) gives me row with index “2”
  12. 12. • I hope you would have got a clear idea about basic filters. Next week we will look more “Content filters” and “Visibility filters”. • Thank you.

×