This document discusses basic jQuery filters that can be used to select elements. It provides examples of using the :odd, :even, :gt, :lt, :first, :last, :header, :animated and :eq filters on HTML elements like rows in a table or list items. These filters allow selecting elements based on their index, whether they are odd/even, come before or after a certain index, are the first/last element, are currently animated, or match a specific index. The examples demonstrate applying CSS styles to the selected elements to visualize the filtering.

1. jQuery SlideCasts
#2 jQuery filters
Part - 1 (Basic filters)

2. jQuery filters enhance jQuery selectors
by providing additional logic. And this
actually unleashes the power of selectors.

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. 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. • :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. jQuery("tr:lt(3)").css("background-
color","lightgreen")
You can see that top 3 rows have lightgreen
background.

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. jQuery(“tr:first”).css(“background-
color”,”lightgreen”)
You can see that first row alone has “lightgreen”
background.

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