Basic Filter
Basic Filter
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 :
: animated Selector
This selector select the element which are in advancement of an animation at the time selector is running.
Example :
$("#butt").click(function(){
$("div:animated").toggleClass("colored");
});
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'.
: eq Selector
It filter the element which are at index at ' n ' within the matched set.
Note that java script array is using 0 based indexing.Example :
<script>$("td:eq(2)").css("color",
"red");</script>
Following code change the color of third ' td ' of each row and change it's color to 'red'.
: even Selector
It selects the even elements within the matched set.
<script>$("tr:even").css("background-color", "#bbbbff");</script>
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.
: first Selector
This Selector selects the first filtered element.
Example :
<script>$("tr:first").css("font-style",
"italic");</script>
: gt Selector
This selector selects all the element which has greater index than the element with provided index.
Example :
<script>$("td:gt(4)").css("text-decoration", "line-through");</script>
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.
Example :
<script>$(":header").css({ background:'#CCC',
color:'blue' });</script>
This selector selects all the header.
: last Selector
This selector filters the last matched element.
Example :
<script>$("tr:last").css({backgroundColor:
'yellow', fontWeight: 'bolder'});</script>
The above code filters the last tr or row in table and will change it's background color. 0
: lt Selector
This selector selects all the element which has lesser index than the element with provided index.
Example : (ltSelector.html)
<!DOCTYPE html> |
OUTPUT
Description of program 2
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.
: not Selector
This selector is slightly different filtering style. As it filters those who don't matches provided criteria.
Example : (notSelector.html) 3
<!DOCTYPE html> |
Output :
4
Description of the program
$("input : not(:checked) selects only those checkboxes who have not checked.
: odd Selector
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. 5
Example :
<script>$("tr:odd").css("background-color",
"#bbbbff");</script>
Learn from experts! Attend jQuery Training classes.