$('.mydiv>ul')和$('.mydiv ul')的不同

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

<!DOCTYPE HTML> 
<HTML>   
    <head>
         <title>aa</title>
         <script type="text/javascript" src="jquery.js"></script>
         <style type="text/css">
         body,div{padding: 0;margin: 0;}
         .border{border:1px dashed #ccc;}
         .red{background:#f00;}
         </style>
         <script type="text/javascript">
             $(function(){
                 $("#test").click(function(){
                     $('.mydiv>ul').addClass("red");
                     //$('.mydiv ul').addClass("red");
                 });
             });
         </script>
    </head> 
<body>
    <div class="mydiv">
        <ul>
            <li>asadfasdfsd</li>
            <li>asadfasdfsd</li>
            <li>asadfasdfsd</li>
            <li>asadfasdfsd</li>
        </ul>
        <p class="border"></p>
        <div><ul>
            <li>asadfasdfsd</li>
            <li>asadfasdfsd</li>
            <li>asadfasdfsd</li>
            <li>asadfasdfsd</li>
        </ul></div>
        <p class="border"></p>
        <input type="button" value="test" id="test"/>
    </div>
</body>
</HTML>

 

点击后出现的效果图片如下：

所以，$('.mydiv>ul')是指直接后代里找<ul>，只找姓ul的儿子，但是孙子不管了

$('.mydiv ul')是指所有后代里找<ul>。（则会两个ul都会出现红色背景） 

$('.mydiv ul')==$('.mydiv').find('ul')

 

// 这里的是selector、selector1均表示任意的选择器
$("selector").find("selector1");
// 等价于
$("selector selector1");

posted @ 2017-02-16 14:53  424174余  阅读(446)  评论(0)    收藏  举报