Home Ajax Jquery Basic Filter

Basic Filter
Posted on: September 15, 2010 at 12:00 AM

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.

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.

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.

: lt Selector

This selector selects all the element which has lesser index than the element with provided index.

Example : (ltSelector.html)

<!DOCTYPE html>
<html>
<head>
<script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
<table border="1">

<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>

<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:lt(4)").css("color", "red");</script>
</body>
</html>

OUTPUT

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.

: not Selector

This selector is slightly different filtering style. As it filters those who don't matches provided criteria.

Example : (notSelector.html)

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div>
<input type="checkbox" name="a" />
<span>Ankit</span>
</div>

<div>
<input type="checkbox" name="b" />
<span>Programmer</span>

</div>
<div>
<input type="checkbox" name="c" checked="checked" />

<span>Roseindia.net</span>
</div>
<script>
$("input:not(:checked) + span").css("background-color", "yellow");
$("input").attr("disabled", "disabled");

</script>
</body>
</html>

Output :

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.

Example :

<script>$("tr:odd").css("background-color", "#bbbbff");</script>

Download Source Code

Learn from experts! Attend jQuery Training classes.

Related Tags for Basic Filter:

«Previous Index Next»