Jquery选择器(七) -- Child Filters

子节点过滤器


[1]  :nth-child(index/even/odd/equation)       Returns: Array<Element(s)>
       说明： 匹配一个指定元素的第几个子节点元素或一个指定元素的奇数或偶数下标的元素。
                    然而：:eq(index)只匹配单个元素,这个方法不只匹配一个元素：每个父节点下均有一个匹配元素。even,odd,equation在每个父节点下都可以匹配多个元素。不同于:eq()以0开始的索引，此方法的索引以1开始。
      

Js代码

1. $("ul li:nth-child(2)").append("<span> - 2nd!</span>");  

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

       index： Number/String--用于匹配每个子节点的索引，以1开始的整数或者字串even,odd,equation(eg. :nth-child(even), :nth-child(4n) )。


[2]  :first-child      Returns: Array<Element(s)>
       说明： 匹配每个父节点下第一个子节点元素。
                    然而：:first只匹配一个元素,该选择器可匹配多个元素：每个父节点匹配一个元素。   
      

Js代码

1. $("div span:first-child")   
2.     .css("text-decoration", "underline")   
3.     .hover(function () {   
4.        $(this).addClass("sogreen");   
5.     }, function () {   
6.        $(this).removeClass("sogreen");   
7.     }   
8. );  

$("div span:first-child")
    .css("text-decoration", "underline")
    .hover(function () {
       $(this).addClass("sogreen");
    }, function () {
       $(this).removeClass("sogreen");
    }
);

[3]  :last-child      Returns: Array<Element(s)>
       说明： 匹配每个父节点下最后一个子节点元素。
                    然而：:last只匹配一个元素,该选择器可匹配多个元素：每个父节点匹配一个元素。   
      

Js代码

1. $("div span:last-child")   
2.     .css({color:"red", fontSize:"80%"})   
3.     .hover(function () {   
4.         $(this).addClass("solast");   
5.      }, function () {   
6.         $(this).removeClass("solast");   
7.      }   
8. );  

$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
    .hover(function () {
        $(this).addClass("solast");
     }, function () {
        $(this).removeClass("solast");
     }
);

[4]  : only-child      Returns: Array<Element(s)>
       说明： 匹配所有只包含一个子元素的父节点下的那些子元素。
      

Js代码

1. $("div button:only-child").text("Alone").css("border", "2px blue solid");  

$("div button:only-child").text("Alone").css("border", "2px blue solid");