jquery层次选择器

 <ul>

        <li>我是同学1</li>

        <ol>

            <li>我是同学1的儿子1</li>

            <li>我是同学1的儿子2</li>

            <li>我是同学1的儿子3</li>

        </ol>

        <li class="a">我是同学2</li>

        <li class="b" style="display: none;">我是同学3</li>

        <li>我是同学4</li>

        <li>我是同学5</li>

    </ul>

    <script src="./jquery-1.12.4.js"></script>

    <script>

        /* 后代选择器 */

        /* 选取ancestor元素里的所有descendent(后代)元素  */

        $('ul li').css({background:'#e8f0f2',color:'#fff'})

        /* 子选择器 */

        /* 选取parent元素下的child(子)元素 */

        // $('ul>li').css({border:'1px soild red',padding:'10px'})

        // /* 相邻元素选择器 */

        // /* 选取紧邻prev元素之后的next元素(不是一群 是一个) */

        // $('.a+li').css('background','red')

        // /* 同辈元素选择器 */

        // /* 选取紧邻prev元素之后的所有siblings元素(不是一个 是一群) */

        // $('.a~li').css('background','red');

        $('.a').click(function(){

            $('.b').css('display','block');

        })

    </script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容