Jquery 筛选选择器

　　筛选选择器（方法）

　　　　既然是方法那就应该对象调用 obj.metch();

　　　　$(“.dd”).children("ul"),show(); //找到.dd下的带Ul的所有子元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery1.12/jquery-1.12.4.js"></script>
    <title>Document</title>
</head>
<body>

        <style>
            .li>a{
                text-decoration: none;
                display: block;
                width: 140px;

            }
            ul{
                list-style: none;
            }
           .box>ul>li{
               float: left;
               margin: 50px;
              
           }
           .box{
               display: block;
               height: 30px;
               text-align: center;
           }
           .ul{

               padding-left: 0;
               text-align: center;
           }

           .li>ul{
               display: none;
           }
        </style>




    <div class="box">
        <ul class="ul">
            <li class="li">
                <a href="">公司简介</a>
                <ul class="ul">
                    <li>二级菜单选项</li>
                    <li>二级菜单选项</li>
                    <li>二级菜单选项</li>
                </ul>
            </li>
            <li class="li">
                <a href="">招聘中心</a>
                <ul class="ul">
                    <li>二级菜单选项</li>
                    <li>二级菜单选项</li>
                    <li>二级菜单选项</li>
                </ul>
            </li>
            <li class="li">
                <a href="">联系方式</a>
                <ul class="ul">
                    <li>二级菜单选项</li>
                    <li>二级菜单选项</li>
                    <li>二级菜单选项</li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
            //当我们鼠标移动到.box>ul>li 这个元素的时候 显示它下面的ul  为什么？
            //如果我们不把.box>ul>li 元素设置事件 ，放我们把鼠标放在这个元素后 就会隐藏了
          $(".box>ul>li").mouseover(function(){
              //$(this),因为this是DOM对象，所以需要转换
              //children 是获取所有的子元素，        a  和ul
              //但是我们只需要ul 所以 children("ul"),show()
             $(this).children("ul").show();
         });
         $(".box>ul>li").mouseout(function(){
             $(this).children("ul").hide();
         });
         
    </script>
</body>
</html>

筛选选择器（方法）

猜你喜欢

　　筛选选择器（方法）