jQuery的子元素过滤选择器

来源：互联网发布：李玖哲解脱知乎编辑：程序博客网时间：2024/06/14 13:15
jQuery的子元素过滤选择器

这里写图片描述
代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Untitled Document</title>        <link rel="stylesheet" type="text/css" href="css/style.css">                <style type="text/css">            div, span, p {                width: 140px;                height: 140px;                margin: 5px;                background: #aaa;                border: #000 1px solid;                float: left;                font-size: 17px;                font-family: Verdana;            }            div.mini {                width: 55px;                height: 55px;                background-color: #aaa;                font-size: 12px;            }            div.hide {                display: none;            }                   </style>        <script type="text/javascript" src="jquery-1.12.4.min.js"></script>        <script type="text/javascript">            $(document).ready(function () {                $("#btn1").click(                  function(){                    //选取子元素,需要在选择器前添加一个空格。                      $("div.one :nth-child(2)").css("background","blue");                    }                     );                $("#btn2").click(                          function(){                              $("div.one :first-child").css("background","blue");                            }                             );                $("#btn3").click(                          function(){                              $("div.one :last-child").css("background","blue");                            }                             );                $("#btn4").click(                          function(){                              $("div.one :only-child").css("background","blue");                            }                             );            });        </script>    </head>    <body>              <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>        <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>        <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>        <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>        <br><br>        <div class="one" id="one">            id 为 one,class 为 one 的div            <div class="mini">class为mini</div>        </div>        <div class="one" id="two" title="test">            id为two,class为one,title为test的div            <div class="mini" title="other">class为mini,title为other</div>            <div class="mini" title="test">class为mini,title为test</div>        </div>        <div class="one">            <div class="mini">class为mini</div>            <div class="mini">class为mini</div>            <div class="mini">class为mini</div>            <div class="mini"></div>        </div>        <div class="one">            <div class="mini">class为mini</div>            <div class="mini">class为mini</div>            <div class="mini">class为mini</div>            <div class="mini" title="tesst">class为mini,title为tesst</div>        </div>        <div style="display:none;" class="none">style的display为"none"的div</div>        <div class="hide">class为"hide"的div</div>        <div>            包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">        </div>        <div id="mover">正在执行动画的div元素.</div>    </body></html>
演示结果：

这里写图片描述
2.

3.

4.
0 0