Day01-jQuery-CSDN博客

本文链接：https://blog.csdn.net/Spirs/article/details/135170063

一.使用jQuery

<!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="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        // js的顶层对象是 window
        console.log(window);

        // jquery的顶层对象
        console.log($);
        console.dir($);
        console.log(jQuery);
        console.dir(jQuery);
    </script>
</body>
</html>

二.jQuery入口函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <script>

        // window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
        window.onload = function () {
            console.log(1);
        }

        window.onload = function () {
            console.log(2);
        }

        // $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
        $(document).ready(function () {
            console.log(3);
        })

        $(document).ready(function () {
            console.log(3);
        })

    </script>

</body>

</html>

三.选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <div>初识jQuery1</div>
    <div>初识jQuery</div>
    <p>123</p>
    <span>abc</span>
    <div></div>

    <script>

        // 获取到所有元素
        console.log($("*"));

        // 原生js获取元素
        console.log(document.getElementsByTagName("div"));
        // 通过标签名
        console.log($("div")[0]);

        // 并集选择器
        console.log($("div,p"));

        // 内容过滤选择器
        console.log($("div:contains('1')"));
        console.log($("div:empty"));


        // jQuery 对象和 DOM 对象
        var box = document.querySelector("div");
        console.log(box);
        console.log($(box));
        console.log($(box)[0]);

    </script>

</body>

</html>

四.操作jQuery集合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <div>123</div>
    <div class="active">456</div>
    <div>789</div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

    <script>

        var jq = $("div");
        console.log(jq);

        // forEach  map

        // 遍历
        jq.each(function (index, ele) {
            console.log(index);
            console.log(ele);
        })

        var rel = jq.map(function (index, ele) {
            return ele + "aaa";
        })
        console.log(rel);

        // 指定元素相对于其他指定元素的 index 位置，从0开始计数。,如果未找到元素，index() 将返回 -1。
        console.log($("div").index($(".active")));

        var rel2 = $("div").toArray();
        console.log(rel2);

        console.log($(".active").siblings());

        console.log($("ul").contents());

        // 创建节点
        console.log($("<div>hello</div>"));

        // 操作css
        $("ul").css({
            margin: 0,
            padding: 0,
            "list-style": "none"
        })

    </script>

</body>

</html>

五.jQuery中的排他

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 1200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
            display: flex;
        }

        li {
            flex: 1;
            border: 1px solid #ccc;
        }

        .active {
            background-color: pink;
        }
    </style>

    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

    <script>

        $("li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            // $(this).siblings().removeClass("active");
        })

    </script>

</body>

</html>

六.添加与删除类名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .active {
            background-color: red;
        }
    </style>

    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <div></div>

    <script>

        // 添加类名
        // $("div").addClass("active");
        // $("div").removeClass("active");

        $("div").click(function() {
            $("div").toggleClass("active");
        })

    </script>

</body>

</html>

七.操作属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/jquery-3.6.0.min.js"></script>

    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            position: relative;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>

    <div>123</div>
    <input type="text" value="123">

    <div class="box">
        <div class="son"></div>
    </div>

    <script>

        $("div").attr("data-index", "1");

        $("div").prop("title", "hello");
        console.log($("div"));

        // 获取表单元素的值
        console.log($("input").val("请输入"));


        // offset()
        console.log($(".son").offset());

        // $(".son").offset({
        //     top: 100,
        //     left: 300
        // })

        console.log($(".son").offset().top);

        // position() 只能获取不能设置
        // console.log($(".son").position({
        //     top: 100,
        //     left: 100
        // }));

        // 复制元素
        $(".box").click(function () {
            console.log(123);
        })
        $(".son").click(function () {
            console.log("abc");
        })

        var cloneBox = $(".box").clone(false, true);
        console.log(cloneBox);
        $("body").append(cloneBox);

    </script>

</body>

</html>

八.插入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <div class="box">hello</div>

    <script>

        // 内部插入
        $(".box").html("<h1>hello</h1>")
        $(".box").text("<h1>hello</h1>")

        $("<i>world</i>").appendTo($(".box"));
        $(".box").append($("<i>world</i>"));

        // 外部插入
        $("<i>world</i>").insertBefore($(".box"));
        $(".box").before($("<i>world</i>"));

    </script>

</body>

</html>

九.删除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <div class="box">123</div>

    <script>

        // $(".box").remove();

        // $(".box").detach()

        $(".box").empty();

    </script>

</body>

</html>

十.省级联动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <select name="" id="province">
        <option value="">请选择</option>
    </select>
    <select name="" id="city">
        <option value="">请选择</option>
    </select>
    <select name="" id="district">
        <option value="">请选择</option>
    </select>

    <script>

        var provinceData = ["河南省", "河北省", "湖南省", "湖北省", "山东省", "山西省"];

        var cityData = [
            ["郑州市", "安阳市", "鹤壁市", "新乡市", "许昌市", "漯河市"],
            ["石家庄", "邯郸市", "廊坊市", "衡水市", "保定市", "邢台市"],
            ["长沙市", "衡阳市", "张家界", "常德市"],
            ["武汉市"],
            ["淄博市", "青岛市", "菏泽市", "日照市", "枣庄市"],
            ["太原市", "大同市", "晋城市"]
        ]

        var districtData = [
            [
                ["高新区", "中原区", "金水区", "二七区", "管城回族区"],
                ["文峰区", "北关区", "新东区", "开发区"],
                ["淇滨区"],
                ["红旗区", "凤泉区"],
                [],
                []
            ], [
                []
            ], [
                []
            ]
        ]

        // 省份信息渲染
        // console.log($("#province").children());
        for (var i = 0; i < provinceData.length; i++) {
            $("#province").append($("<option value=" + provinceData[i] + ">" + provinceData[i] + "</option>"));
        }

        $("#province").change(function () {
            // console.log($(province).val());
            // 找到被选择的 option 元素
            // console.log($("#province option:selected"));
            // console.log($("#province option").not($("#province option").eq(0)).index($("#province option:selected")));
            var cunt = $("#province option").not($("#province option").eq(0)).index($("#province option:selected"));

            $("#city").html("<option value=''>请选择</option>");

            for (var i = 0; i < cityData[cunt].length; i++) {
                $("#city").append($("<option value=" + cityData[cunt][i] + ">" + cityData[cunt][i] + "</option>"))
            }
        })

    </script>

</body>

</html>