jquery过滤器

最新推荐文章于 2024-09-09 23:21:46 发布

syf_wfl

最新推荐文章于 2024-09-09 23:21:46 发布

阅读量57

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/wflsyf/article/details/112384198

版权

JavaScript DOM操作 CSS选择器事件监听背景颜色

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            div{
                background: black;
            }
        </style>
    </head>
    <body>
    <script type="text/javascript" src="jss/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        // function f1() {
        //     let div1=$("div:first");
        //     div1.css("background","red");
        // }
        // function f2() {
        //     let div5=$("div:last");
        //     div5.css("background","grey")
        // }
        // function f3(){
        //     let eq3=$("div:eq(3)");
        //     eq3.css("background","blue");
        // }
        // function f4() {
        //     let x3=$("div:lt(3)");
        //     x3.css("background","yellow");
        // }
        // function f5() {
        //     let d3=$("div:gt(3)");
        //     d3.css("background","white");
        // }
        //当页面的内容加载后之执行ready
        $(document).ready(function () {
            $("#o").click(function () {
                let div1=$("div:first");
                div1.css("background","red");
            })
            $("#t").click(function () {
                let div5=$("div:last");
                div5.css("background","grey");
            })
            $("#tt").click(function () {
                let div4=$("div:eq(3)");
                div4.css("background","blue");
            })
            $("#f").click(function () {
                let x3=$("div:lt(3)");
                x3.css("background","yellow");
            })
            $("#ff").click(function () {
                let d3=$("div:gt(3)");
                d3.css("background","white");
            })
        })

    </script>
        <div id="1">1</div>
        <div id="2">2</div>
        <div id="3">3
            <div id="4">4</div>
            <div id="5">5</div>
        </div>
        <div>6</div><br>
        <span>span</span><br>
        <input type="button" value="选择1"        id="o">
        <input type="button" value="选择最后5"     id="t">
        <input type="button" value="选择索引等于3"   id="tt">
        <input type="button" value="选择索引大于3"   id="f">
        <input type="button" value="选择索引小于3"  id="ff">


    </body>
</html>