• jquery 子元素过滤器 Child Filters


    名称 说明 举例
    :nth-child(index/even/odd/equation)

    匹配其父元素下的第N个子或奇偶元素

    ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

    可以使用:
    nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)

    在每个 ul 查找第 2 个li:
    $("ul li:nth-child(2)")
    :first-child

    匹配第一个子元素

    ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

    在每个 ul 中查找第一个 li:
    $("ul li:first-child")
    :last-child

    匹配最后一个子元素

    ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

    在每个 ul 中查找最后一个 li:
    $("ul li:last-child")
    :only-child

    如果某个元素是父元素中唯一的子元素,那将会被匹配

    如果父元素中含有其他元素,那将不会被匹配。

    在 ul 中查找是唯一子元素的 li:
    $("ul li:only-child")

    注:

    1、:nth-child(index)从1开始的,而eq(index)是从0开始的,就是说  $("ul li:nth-child(0)").css("color","red")是获取不到相匹配的元素,只能从1开始,即  $("ul li:nth-child(1)").css("color","red"),而eq(0)可以获得,同样都是获得第一个子元素

        :nth-child(even)是获得偶数子元素,即第二个,第四个,第六个...,而:even则是从索引0开始,匹配第二个索引,第四个索引...,也就是第一个,第三个,第五个...,看上去貌似都是获得奇数项,同样:nth-child(odd)和:odd同样也是如此 

    2、   :first-child匹配每个父类的子元素,而:first则是匹配一个子元素, :last-child和last也是这样

    3、only-child:匹配某个元素是父元素中唯一的子元素,就是说当前子元素是类中唯一的元素,则匹配!

    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          jQuery(
    function($){
         
    //  $("ul li:first-child").css("color","red");
           $("ul li:first").css("color","red");
         
    // $("ul li:last-child").css("color","red");
            // $("ul li:nth-child(even)").css("color","red");
             
            
    // $("ul li:odd").css("color","red");
          })
        
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
        <li>第五个元素</li>
        <li>第六个元素</li>
        </ul>
         <ul>
        <li>第一个元素</li>
        <li>第二个元素</li>
        <li>第三个元素</li>
        <li>第四个元素</li>
        <li>第五个元素</li>
        <li>第六个元素</li>
        </ul>
        </div>
        </form>
    </body>
    </html>

           

    多思考,多创新,才是正道!
  • 相关阅读:
    Windows7共享设置
    13-运算符
    13-数据类型转换
    06-移动web之flex布局
    09-sass
    08-less预处理器
    移动端必须掌握知识点
    11-JS变量
    10-响应式
    07-rem
  • 原文地址:https://www.cnblogs.com/shuang121/p/2344980.html
Copyright © 2020-2023  润新知