DOM遍历

最新推荐文章于 2022-10-06 19:44:31 发布

Void_CM

最新推荐文章于 2022-10-06 19:44:31 发布

阅读量117

点赞数

分类专栏： Html+CSS+js 文章标签： jquery js html css

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113858749

版权

Html+CSS+js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOMtraversal</title>
    <style>
        .special{
            color: red;
        }
        .closest{
            color: royalblue;
        }
        .bacol{
            background-color: salmon;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>one</li>
        <li class="special">two</li>
        <li>three</li>
        <li>
            <ul class="sublist">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
    </ul>
    <script src="/jQuery/js/jquery-3.5.1.js"></script>
    <script>
        content = "I'm chosen"
        $(function(){

        //    $('li').first().html(content)
        //    $('li').last().html(content) //最后一个li无论是哪个ul

        //    //使用eq()进行定位 具体下标
        //    $('li').eq(1).html(content)

        //    //第一个ul的所有子元素
        //    $('ul:first').children().html("I'm the children of the first ul")

        //    //第一个li的所有兄弟元素，不包含自己
        //    $('li').first().siblings().css({
        //        color:'blue'
        //    })

        //    //第一个li的父元素——ul
        //    $('li:first').parent().css({
        //        background:'gray'
        //    })

        //    //第二个ul中li的父元素
        //    $('li').eq(4).parent().css({
        //        background:'green'
        //    })

        //    //prev()前一个元素 next()后一个元素
        //    $('li').eq(4).parent().parent().prev().html('im three')

        //    //示例，反选点击元素
        //    $('li').on('click',function(){
        //         $(this).removeClass('special');
        //         $(this).siblings().addClass('special');
        //    });

        //   closest() 最近的***元素
        // $('li').on('click',function(){
        //     $(this).closest('.list').addClass('closest')
        // })
        
        //find的使用原则，让查找范围尽可能小，效率更高
        // $('.list').on('click',function(){
        //     $(this).find('li').filter(':first').addClass('bacol');//find:找到所有的li,filter过滤仅给第一个li(过滤)
        // });

        //嵌入if
        $('li').on('click',function(){
            //此处存在一个li嵌套问题，如何选中最里层的li呢？以下为解决方案 
            if($(this).parent().is('.sublist')){
                $(this).hide()
            }
            else{
                console.log('click li');
            } 
            
            if($(this).is('.special')){
                alert('special');
            }
            else if($(this).not('.special')){
                alert('not special')
            }
             });
        });

        
    </script>
</body>
</html>