jQuery filters - Part 1
Upcoming SlideShare
Loading in...5

jQuery filters - Part 1



Tutorial about basic jQuery filters.

Tutorial about basic jQuery filters.



Total Views
Views on SlideShare
Embed Views



1 Embed 9

http://www.slideshare.net 9



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

jQuery filters - Part 1 jQuery filters - Part 1 Presentation Transcript

  • jQuery SlideCasts #2 jQuery filters Part - 1 (Basic filters)
  • jQuery filters enhance jQuery selectors by providing additional logic. And this actually unleashes the power of selectors.
  • • 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.
  • 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.
  • • :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.
  • jQuery("tr:lt(3)").css("background- color","lightgreen") You can see that top 3 rows have lightgreen background.
  • • :first & :last - These select just one element. • In a table, :first will return the first row and :last will return the last row.
  • jQuery(“tr:first”).css(“background- color”,”lightgreen”) You can see that first row alone has “lightgreen” background.
  • 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.
  • 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.
  • :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”
  • • 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.