Basic filter is used to implement some properties like filter element according to their index in set, elements which are in the progress of animation at the time selector is run etc.
Some of the key filters and their syntax are given with example :
This selector select the element which are in advancement of an animation at the time selector is running.
Here "butt" is a button , when you click on it, it will change the color of all the animated div element.
$("div:animated") selects all the div element which are in progress of animation.
toggleClass("colored") change the CSS class to 'colored'.
It filter the element which are at index at ' n ' within the matched set.Note that java script array is using 0 based indexing.
Following code change the color of third ' td ' of each row and change it's color to 'red'.
It selects the even elements within the matched set.
It selects the even rows within the matched set. It do not select the even number index rows . It selects 2nd element ,4th element & so on.
This Selector selects the first filtered element.
This selector selects all the element which has greater index than the element with provided index.
Here 4th element has index value 3 and it filters those elements with greater index value.
: header Selector
This selector filters the elements which have headers like H!,H2,H3 etc.
This selector selects all the header.
This selector filters the last matched element.
'yellow', fontWeight: 'bolder'});</script>
The above code filters the last tr or row in table and will change it's background color.
This selector selects all the element which has lesser index than the element with provided index.
Example : (ltSelector.html)
Description of program
The following Selector selects the td elements which has index value less than the index of the 4th element. Here "#3" is not any kind of assignment, we added it for sake of conveyance.
This selector is slightly different filtering style. As it filters those who don't matches provided criteria.
Example : (notSelector.html)
Description of the program
$("input : not(:checked) selects only those checkboxes who have not checked.
This selector selects the odd elements like in a table it selects 1st , 3rd rows etc not according to the index number. Since it selects 3rd row means it has index value 4.
Learn from experts! Attend jQuery Training classes.
Liked it! Share this Tutorial