Jquery选择器(三) -- Basic Filters

[b][size=large]基本过滤选择器[/size][/b]


[b][1][color=brown] :first[/color][/b] [color=blue]Returns: Array<Element>[/color]
[color=olive]说明[/color]： 匹配选中集合中的第一个元素。

$("tr:first").css("font-style", "italic");

[b][2][color=brown] :last [/color][/b] [color=blue]Returns: Array<Element>[/color]
[color=olive]说明[/color]： 匹配选中集合中的最后一个元素。

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

[b][3][color=brown] :not(selector) [/color][/b] [color=blue]Returns: Array<Element(s)>[/color]
[color=olive]说明[/color]： 过滤出与给定选择器匹配的所有元素。自jQuery 1.3起 :not() 开始支持逗号分隔选择器与复合选择器，例如：:not(div a) and :not(div,a)。

$("input:not(:checked) + span").css("background-color", "yellow");

[color=green]selector[/color]： Selector--用来过滤的选择器。

[b][4][color=brown] :even [/color][/b] [color=blue]Returns: Array<Element(s)>[/color]
[color=olive]说明[/color]： 匹配选中集合中的偶数下标元素，元素下标以0开始。

$("tr:even").css("background-color", "#bbbbff");

[b][5][color=brown] : odd[/color][/b] [color=blue]Returns: Array<Element(s)>[/color]
[color=olive]说明[/color]： 匹配选中集合中的奇数下标元素，元素下标以0开始。

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

[b][6][color=brown] :eq(index) [/color][/b] [color=blue]Returns: Array<Element>[/color]
[color=olive]说明[/color]： 匹配一个给定下标的元素。

$("td:eq(2)").css("color", "red");

[color=green]index[/color]： Number--要匹配的元素的下标，基于0。

[b][7][color=brown] :gt(index) [/color][/b] [color=blue]Returns: Array<Element(s)>[/color]
[color=olive]说明[/color]： 匹配大于给定下标的所有元素。

$("td:gt(4)").css("text-decoration", "line-through");

[color=green]index[/color]： Number--要匹配的元素的下标，基于0。

[b][8][color=brown] :lt(index) [/color][/b] [color=blue]Returns: Array<Element(s)>[/color]
[color=olive]说明[/color]： 匹配小于给定下标的所有元素。

$("td:lt(4)").css("color", "red");

[color=green]index[/color]： Number--要匹配的元素的下标，基于0。

[b][9][color=brown] :header [/color][/b] [color=blue]Returns: Array<Element(s)>[/color]
[color=olive]说明[/color]： 匹配所有标题元素，诸如h1,h2,h3等。

$(":header").css({ background:'#CCC', color:'blue' });

[b][10][color=brown] :animated [/color][/b] [color=blue]Returns: Array<Element(s)>[/color]
[color=olive]说明[/color]： 匹配当前所有动画元素。

$("#run").click(function(){
      $("div:animated").toggleClass("colored");
    });
    function animateIt() {
      $("#mover").slideToggle("slow", animateIt);
}
animateIt();

------------------------------------------------------------------------------------------------------------------------------------