jquery获取网页元素

最新推荐文章于 2024-02-23 21:08:24 发布

Stirve unremitting

最新推荐文章于 2024-02-23 21:08:24 发布

阅读量628

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46421045/article/details/106753959

版权

笔记专栏收录该内容

96 篇文章

订阅专栏

本文详细介绍了如何使用jQuery库来选取和操作网页中的DOM元素，包括基础的选择器、链式操作、DOM遍历以及高效地获取和设置元素属性。通过实例解析，帮助开发者更好地理解和应用jQuery在网页开发中的元素操作技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入jquery -->
        <script src = 'jquery-1.10.1.min.js'></script>
        <script>
            /*
                选择网页元素上（获取页面上的元素节点）
                    1、模拟css选择网页元素(基本上所有获取网页元素的方法都可以在这里用)
                    2、独有的表达式写法
                    3、多种筛选方式

                原生JS来说：
                    document.getElementById();
                    node.getElementsByClassName();
                    document.getElementsByName();
                    node.getElementsByTagName();

                    document.querySelector()
                    document.querySelectorAll();

                jquery提供了一个非常好用的获取网页元素的方法：
                $();

                .css("样式属性", "样式属性的值");  设置元素节点的css样式

            */

            window.onload = function(){
               //获取页面上所有的li标签
            //    $("li").css("backgroundColor", 'yellow');

            // 增加一些表达式的写法
                // $("li:first").css("backgroundColor", 'yellow');
                // $("li:last").css("backgroundColor", 'yellow');


                //下标为奇数位的变色
                // $("li:odd").css("backgroundColor", 'red');
                // $("li:even").css("backgroundColor", 'red');


                //指定下标去获取对应的元素
                // $("li:eq(3)").css("backgroundColor", 'red');



                /*
                    获取网页元素的时候有很多中方法，习惯用哪个就使用哪种方法获取就OK了。
                */
                //获取ul下 li标签中 所有class = box的节点
                // $("ul .box").css("backgroundColor", 'red');
                // $("ul li.box").css("backgroundColor", 'red');


                //对我们找到的节点在进行二次过滤
                $("ul li").filter(".box").css("backgroundColor", 'green');


            }
        </script>
    </head>
    <body>
        <div id = 'div1' title = 'world'>div1</div>
        <ul>
            <li class = 'box' title = 'world'></li>
            <li></li>
            <li name = 'hello'></li>
            <li></li>
            <li class = 'box'></li>
        </ul>
        <ol>
            <li name = 'hello'></li>
            <li class = 'box'></li>
            <li name = 'hello'></li>
        </ol>
    </body>
</html>