jquery选择网页元素

·  阅读 15

选择网页元素(只要你选择1.0.0系列jquery,就直接兼容到IE8以下) $(); 1、模拟css选择器传参

    <script>
        
        window.onload = function(){
            //id = div1
             $("#div1").css("backgroundColor", 'red');

            //tagName = li;
            $("li").css("backgroundColor", 'blue');

            //class = box
             $("ul .box").css("backgroundColor", 'orange');

            //name = hello
            $("[name=hello]").css("backgroundColor", 'green');
        }
    </script>
</head>
<body>
    <div id = 'div1'>div</div>
    <ul>
        <li class = 'box'>111</li>
        <li>111</li>
        <li name = 'hello'>111</li>
        <li>111</li>
        <li class = 'box'>111</li>
    </ul>
    <ol>
        <li class = 'box'>222</li>
        <li>222</li>
        <li name = 'hello'>222</li>
    </ol>
</body>
复制代码

2、独有表达式选择

<script>
        window.onload = function(){
             $("li").css("backgroundColor", 'blue');

            //获取第一个
             $("li:first").css("backgroundColor", 'blue');

             $("li:last").css("backgroundColor", 'blue');


            //所有奇数位
             $("li:odd").css("backgroundColor", 'blue');

            //所有偶数位
             $("li:even").css("backgroundColor", 'blue');

            //找到指定下标的元素
            $("li:eq(3)").css("backgroundColor", 'blue');
        }
    </script>
</head>
<body>
    <div id = 'div1'>div</div>
    <ul>
        <li class = 'box'>111</li>
        <li>111</li>
        <li name = 'hello'>111</li>
        <li>111</li>
        <li class = 'box'>111</li>
    </ul>
    <ol>
        <li class = 'box'>222</li>
        <li>222</li>
        <li name = 'hello'>222</li>
    </ol>
</body>
复制代码

3、支持多种筛选方式

<script>
        
        window.onload = function(){
            //找到指定下标的元素
            /$("li:eq(3)").css("backgroundColor", 'blue');

            /$("li").eq(3).css("backgroundColor", 'red');


            //获取ul li.box
            /$("ul li.box").css("backgroundColor", 'red');

            //过滤
            $("ul li").filter(".box").css("backgroundColor", 'red');
        }
    </script>
</head>
<body>
    <div id = 'div1'>div</div>
    <ul>
        <li class = 'box'>111</li>
        <li>111</li>
        <li name = 'hello'>111</li>
        <li>111</li>
        <li class = 'box'>111</li>
    </ul>
    <ol>
        <li class = 'box'>222</li>
        <li>222</li>
        <li name = 'hello'>222</li>
    </ol>
</body>
复制代码
分类:
前端
标签:
分类:
前端
标签: