Jquery选择器(三) -- Basic Filters

基本过滤选择器


[1]  :first      Returns: Array<Element>
      说明： 匹配选中集合中的第一个元素。
      

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

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

[2]  :last       Returns: Array<Element>
      说明： 匹配选中集合中的最后一个元素。
      

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

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

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

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

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

       selector： Selector--用来过滤的选择器。

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

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

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

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

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

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

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

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

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

       index： Number--要匹配的元素的下标，基于0。

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

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

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

       index： Number--要匹配的元素的下标，基于0。

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

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

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

       index： Number--要匹配的元素的下标，基于0。

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

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

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

[10]  :animated       Returns: Array<Element(s)>
      说明： 匹配当前所有动画元素。
      

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

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