美文网首页
jquery层次选择器

jquery层次选择器

作者: 前端许 | 来源:发表于2021-11-16 16:39 被阅读0次

     <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>

    相关文章

      网友评论

          本文标题:jquery层次选择器

          本文链接:https://www.haomeiwen.com/subject/wpbhtrtx.html