JQuery层次选择器

最新推荐文章于 2024-06-08 09:44:34 发布

刘晓飞

最新推荐文章于 2024-06-08 09:44:34 发布

阅读量578

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/lxfzgg/article/details/8815634

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<head>
    <style type="text/css">
        .imgclass
        {
            width: 100px;
            height: 100px;
        }
        div
        {
            width: 250px;
            height: 250px;
            background-color: #eee;
            border: solid 2px Blue;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Button1').click(function () {
                //$('#divfirst img').hide(2000);//获取的是id为divfirst的层中的所有tagname为img的元素，不管这些元素是否还嵌套在别的元素中
                //$('#divfirst span img').hide(2000); //获取的是id为divfirst的层中的所有span子元素中的img元素,需要注意的是这个span子元素可以是divFirst的儿子或者孙子
               // $('#divfirst>span img').hide(2000); //获取的是id为divFirst的层中的第一级span元素中的所有img元素
                 $('#divfirst+div').hide(2000);//获取的是id为divFirst的层后面的同级的第一个div元素，且此div必须紧随其后，如果中间有别的元素隔开，则不能获取。

               //$('#divfirst').next().hide(2000);//获取的是id为divfirst的层后面的第一个同级元素，不管是什么类型
                //$('#divfirst~div img').hide(2000); //获取的divfirst后边所有同级别的，且类型为div里边的所有img元素,且此div必须紧随其后
               // $('#divfirst').nextAll().hide(2000);//获取的是divfirst后变的所有同级元素，不管是什么类型(类型不确定)
            })
        })
    </script>
</head>
<body>
<input id="Button1" type="button" value="层次选择器"/>
    <div id="divfirst">
         <span>风景
            <a href="#">
                <img id="img1" src="images/1.jpg" class="imgclass" />
            </a>
        </span>

           <div>
            <span>
                <img id="img2" src="images/4.jpg" class="imgclass" />
            </span>
              </div>
        第一层
    </div>

    <div>
        第二层<img id="img3" src="images/3.jpg" class="imgclass" />
    </div>
    <div>
        第三层<img id="img4" src="images/4.jpg" class="imgclass" />
    </div>
    <img id="img5" src="images/4.jpg" class="imgclass" />
</body>