jQuery原生选择器

最新推荐文章于 2021-07-26 10:46:39 发布

恋恋玫瑰花

最新推荐文章于 2021-07-26 10:46:39 发布

阅读量234

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42923643/article/details/81605791

版权

jQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery原生选择器</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 获取第一个li元素
            // var li = document.querySelector(".content ul li");
            // li.style.color = "red";

            // 获取所有li元素
            var li = document.querySelectorAll(".content ul li");
            for (var i = 0; i < li.length; i++) {
                li[i].style.color = "blue";
            }
            // 注意:效率比document.getElementsByTagName()好,但是浏览器兼容性不是很好
        });


    </script>
</head>
<body>
    <div class="content">
        <ul>
            <li>首页</li>
            <li class="list">文章列表</li>
            <li class="goods">产品列表</li>
            <li class="list">产品列表</li>
            <li class="goods">联系我们</li>
        </ul>
    </div>
</body>
</html>