JQuery（重修完成）

最新推荐文章于 2024-10-07 09:24:46 发布

~风淡~

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量124

点赞数

分类专栏： HTML 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_66274152/article/details/127253389

版权

HTML 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

第一章：JQuery介绍及引入

1.jQuery引入

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--    以下是引入jQuery的引入方式：-->
    <!-- <script src="./scripts/jquery-3.6.1.js"></script> -->
<!--    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>-->
    <script src="./scripts/jquery-3.6.1.js"></script>
</head>
<body>

    <script>
        console.log($)//很明显输出的时候是一个函数

    </script>
</body>
</html>

2.jQuery核心函数（一）：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./scripts/jquery-3.6.1.js"></script>
</head>
<body>

    <div></div>

    <button id="btn01">点我一下</button>
    
    <script>

        console.log($)//引入JQuery库，其实就是向网页中添加到一个新的函数
        console.log(jQuery===$)//本质上是一样的
        //-$是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的
        //-核心函数的功能：
        /*两种作用：作为工具使用  1.在核心函数中jQuery提供了多个工具方法
        * 2.将他作为函数使用：将一个函数作为$的参数
        *
        * */
        var num=10
        console.log($.isFunction(num));//这个方法用来判断是不是函数,作为工具类去使用


        console.log($.isFunction($));


            //相当于document.addEventListener()
            $(function () {
                alert("我是函数")
            })

        //3.将选择器的字符串作为参数：jQuery会自动的去网页中查找元素
        //然后就会开始进行操作
        $(function () {
            $("#btn01").click(function () {

                //注意：这个jQuery核心函数查询返回的不是dom原生对象，而是经过jQuery包装过的对象
                //jQuery对象为我们提供了许多新的方法。都是jQuery不可以调用原生的dom对象，我们为jQuery命名的时候，会加$加以区分
                alert("计算机科学与技术学院")
            })
        })












        /* 
            引入jQuery库，其实就是向网页中添加了一个新的函数$(jQuery)
                - $ 是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的
                - 核心函数的功能
                    - 两种作用
                        1. 将它作为工具类使用
                            - 在核心函数中jQuery为我们提供了多个工具方法

                        2. 将它作为函数使用
                            - 将一个函数作为$的参数
                                - 这个函数会在文档加载完毕之后执行
                                - 相当于：
                                    document.addEventListener("DOMContentLoaded", function(){})

                            - 将选择器字符串作为参数
                                - jQuery自动去网页中查找元素
                                - 作用类似于 document.querySelectorAll("...")
                                - 注意：
                                    通过jQuery核心函数查询到的结果并不是原生的DOM对象，
                                        而是一个经过jQuery包装过的新的对象，这个对象我们称其为jQuery对象
                                        jQuery对象中为我们提供了很多新的方法，方便我们做各种DOM操作
                                            但是jQuery对象不能直接调用原生DOM对象的方法
                                            通过我们为jQuery对象命名时，会使用$开头，加以区分

                            - 将DOM对象作为参数
                                - 可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法
                            
                            - 将html代码作为参数
                                - 会根据html代码来创建元素（jQuery对象）


        */

        // console.log(jQuery)

        // var num = 10
        // function fn(){}

        // console.log($.isFunction(num)) false

        // console.log($.isFunction(fn)) // true

        // console.log(typeof fn === "function")

        // console.log($)

        //
        // $(function(){
        //
        //     $("#btn01").click(function(){
        //         // alert("你点我干嘛~~")
        //
        //         var btn = document.getElementById("btn01") // [object HTMLButtonElement]
        //
        //         var $btn = $("#btn01") // [object Object]
        //
        //         // alert($(btn))
        //
        //         var $h1 = $("<h1>我是一个标题</h1>") // 会根据html代码创建元素
        //
        //         $("div").append($h1)
        //
        //
        //     })
        //
        //
        // })



    </script>
</body>
</html>

3.核心函数二：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./scripts/jquery-3.6.1.js"></script>
</head>
<body>

    <div></div>

    <button id="btn01">点我一下</button>
    
    <script>

        console.log($)//引入JQuery库，其实就是向网页中添加到一个新的函数
        console.log(jQuery===$)//本质上是一样的
        //-$是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的
        //-核心函数的功能：
        /*两种作用：作为工具使用  1.在核心函数中jQuery提供了多个工具方法
        * 2.将他作为函数使用：将一个函数作为$的参数
        *
        * */
        var num=10
        console.log($.isFunction(num));//这个方法用来判断是不是函数,作为工具类去使用


        console.log($.isFunction($));


            //相当于document.addEventListener()
            $(function () {
                alert("我是函数")
            })

        //3.将选择器的字符串作为参数：jQuery会自动的去网页中查找元素
        //然后就会开始进行操作
        $(function () {
            $("#btn01").click(function () {

                //注意：这个jQuery核心函数查询返回的不是dom原生对象，而是经过jQuery包装过的对象
                //jQuery对象为我们提供了许多新的方法。都是jQuery不可以调用原生的dom对象，我们为jQuery命名的时候，会加$加以区分
                alert("计算机科学与技术学院")
            })
        })












        /* 
            引入jQuery库，其实就是向网页中添加了一个新的函数$(jQuery)
                - $ 是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的
                - 核心函数的功能
                    - 两种作用
                        1. 将它作为工具类使用
                            - 在核心函数中jQuery为我们提供了多个工具方法

                        2. 将它作为函数使用
                            - 将一个函数作为$的参数
                                - 这个函数会在文档加载完毕之后执行
                                - 相当于：
                                    document.addEventListener("DOMContentLoaded", function(){})

                            - 将选择器字符串作为参数
                                - jQuery自动去网页中查找元素
                                - 作用类似于 document.querySelectorAll("...")
                                - 注意：
                                    通过jQuery核心函数查询到的结果并不是原生的DOM对象，
                                        而是一个经过jQuery包装过的新的对象，这个对象我们称其为jQuery对象
                                        jQuery对象中为我们提供了很多新的方法，方便我们做各种DOM操作
                                            但是jQuery对象不能直接调用原生DOM对象的方法
                                            通过我们为jQuery对象命名时，会使用$开头，加以区分

                            - 将DOM对象作为参数
                                - 可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法
                            
                            - 将html代码作为参数
                                - 会根据html代码来创建元素（jQuery对象）


        */

        // console.log(jQuery)

        // var num = 10
        // function fn(){}

        // console.log($.isFunction(num)) false

        // console.log($.isFunction(fn)) // true

        // console.log(typeof fn === "function")

        // console.log($)

        //
        // $(function(){
        //
        //     $("#btn01").click(function(){
        //         // alert("你点我干嘛~~")
        //
        //         var btn = document.getElementById("btn01") // [object HTMLButtonElement]
        //
        //         var $btn = $("#btn01") // [object Object]
        //
        //         // alert($(btn))
        //
        //         var $h1 = $("<h1>我是一个标题</h1>") // 会根据html代码创建元素
        //
        //         $("div").append($h1)
        //
        //
        //     })
        //
        //
        // })



    </script>
</body>
</html>

第二章：jQuery对象

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
    </head>
    <body>
        <button id="btn01">点我一下</button>
        <ul>
            <li id="swk">孙悟空</li>
            <li id="zbj">猪八戒</li>
            <li>沙和尚</li>
            <li>唐僧</li>
            <li>白骨精</li>
        </ul>

        <script>

            /*jQuery对象：
            *       通过JQuery核心函数获取的对象就是JQuery对象
            * jQuery对象是jQuery中定义的对象
            *       我们可以将其连接为DOM对象的升级版，在jQuery对象中为我们提供了很多方法来简化DOM操作
            *
            * -jQuery对象本质上是DOM对象的数组
            *
            *
            *
            *
            *
            *
            *
            * */

          // var $li=("li")
          //   alert($li.length)
$("#btn01").click(function () {
    // var $li=$("li")
    // alert($li[0].textContent)

//    jQuery方法：1.读取标签设置标签内的内容： $li.text("计算机科学与技术学院！")
//     $li.text("计算机科学与技术学院！")//当我们修改jQuery对象时，会自动修改jQuery中的所有元素，这个特点称为隐式迭代


//    读取标签中的文本内容：
//     var text=$li.text()//读取文本返回所有标签中的文本
//     var id=$li.alert("id")//读取属性，返回第一个标签的属性
    // alert(id)

    // var resylt=$li.text("我是新的计算机科学与技术学院")
    // alert(resylt===$li)
//    通常情况：jQuery对象的方法返回值依然是一个jQuery对象
//    修改样式
    $li.text("计算机科学与技术学院").css("color","red")//链式调用
//    一次我们可以调用方法后可以继续调用其他的jQuery对象的方法

})
            //总结：
            /*
            jQuery对象
                - 通过jQuery核心函数获取到的对象就是jQuery对象
                - jQuery对象是jQuery中定义的对象
                    可以将其理解为是DOM对象的升级版，在jQuery对象中为我们提供了很多简单易用的方法
                        来帮助我们简化DOM操作
                - jQuery对象本质上是一个DOM对象的数组（类数组）
                    可以通过索引获取jQuery对象中的DOM对象
                - 当我们修改jQuery对象时，它会自动修改jQuery中的所有元素
                    这一特点称为jQuery的隐式迭代
                - 通常情况下，jQuery对象方法的返回值依然是一个jQuery对象
                    所以我们可以在调用一个方法后继续调用其他的jQuery对象的方法
                    这一特性，称为jQuery对象的 链式调用



        */
            // $("#btn01").click(function () {
            //     var $li = $("li")
            //     // alert($li[0].textContent)
            //
            //     // $li.text("哈哈哈")
            //
            //     var text = $li.text() // 读取文本，返回所有标签中的文本
            //     var id = $li.attr("id") // 读取属性时，返回第一个标签的属性
            //
            //     // alert(id)
            //
            //     // var result = $li.text("新的文本内容")
            //     // alert(result === $li)
            //
            //     $li.text("新的文本内容").css("color", "red")
            // })
        </script>
    </body>
</html>

4.jQuery对象方法：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <style>
            .box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }

            .box2 {

                border: 10px red solid;
            }

            .box3 {
                background-color: orange;
            }
        </style>
        <script>

<!--        jQuery对象操作class方法-->


            //1.调用函数
$(function () {
//    为按钮绑定函数
    $("#btn").click(function () {

        // alert("计算机科学与技术学院")

    //1.addClass（）可以为元素添加一个或多个class
    //     $(".box1").addClass("box2")
    //     $(".box1").addClass(["box1","box3"])
$(".box1").addClass(function (index,className) {
    //在回调函数中，this表示的当前的元素
    if (index%2===0){
        // this.classList.add("box2")
    //    把DOm对象转换为jQuery对象
        $(this).classList.add("box2") 


    }else {
        //    把DOm对象转换为jQuery对象
        $(this).classList.add("box3")

    }




})
    })
})























            // https://api.jquery.com/category/manipulation/class-attribute/
            // $(function () {
            //     // 为按钮绑定响应函数
            //     $("#btn").click(function () {
            //         // 为box1添加class
            //         // addClass() 可以为元素添加一个或多个class
            //         // $(".box1").addClass(["box2", "box3"])
            //
            //         // addClass可以接收一个回调函数作为参数
            //         // $(".box1").addClass(function (index, className) {
            //         //     // 在回调函数中，this表示的是当前的元素
            //
            //         //     // if (index % 2 === 0) {
            //         //     //     // 添加box2
            //         //     //     this.classList.add("box2")
            //         //     // } else {
            //         //     //     // 添加box3
            //         //     //     this.classList.add("box3")
            //         //     // }
            //
            //         //     if (index % 2 === 0) {
            //         //         // 添加box2
            //         //         $(this).addClass("box2")
            //         //     } else {
            //         //         // 添加box3
            //         //         $(this).addClass("box3")
            //         //     }
            //         // })
            //
            //         $(".box1").addClass(function(index){
            //
            //             // 回调函数的返回值会成为当前元素的class
            //             // return ["box2", "box3"]
            //
            //             if(index % 2 === 0){
            //                 return "box2"
            //             }else{
            //                 return "box3"
            //             }
            //
            //         })
            //     })
            // })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>

        <hr />

        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script src="scripts/jquery-3.6.1.js">


$(function () {
    var $swk=$("#list li:nth-child(1)").clone()
    var $list2=$("#list2")
    $("#btn").click(function () {
     $list2.append($swk)
    })
})





















           /* $(function(){

                $("#list li:nth-child(1)").click(function(){
                    alert("孙悟空")
                })

                /!*
                    clone() 用来复制jQuery对象
                *!/
                var $swk = $("#list li:nth-child(1)").clone(true)
                var $list2 = $("#list2")

                $("#btn").click(function(){
                    $list2.append($swk)
                })
            })*/

        </script>
    </head>
    <body>

        <button id="btn">点我</button>

        <hr>

        <ul id="list">
            <li>计算机科学与技术学院</li>
            <li>软件工程</li>
        </ul>

        <ul id="list2">
            <li>网络工程</li>
            <li>大数据</li>
        </ul>
    </body>
</html>

06：方法

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>



            $(function () {



                $("#btn").click(function () {

                   // $("#list li").wrap("<div/>")//为当前元素添加div
                    // $("#list li").unwrap("div")//表示删除最外层的div，参数传入的是什么，执行的的就是删除什么
                    $("list li").wrapAll("<div/>")//为所有元素统一添加
                })

            })


            

            $(function () {
                /* 
                    unwrap() 删除外层父元素
                    wrap() 为当前元素添加一个容器
                    wrapAll() 为当前的所有元素统一添加容器
                    wrapInner() 为当前元素添加一个内部容器
                */
                $("#btn").click(function () {
                    // $("#list li").unwrap()
                    // $("#list li").wrap("<div/>")
                    // $("#list li").wrapAll("<div/>")
                    $("#list li").wrapInner("<div/>")
                    
                })
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>

        <hr />

        <ul id="list">

            <li>孙悟空</li>
            <li>猪八戒</li>
        </ul>

        <ul id="list2">
            <li>沙和尚</li>
            <li>唐僧</li>
        </ul>
    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }

            #box2 {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            
            
            
            $(function () {
                
                $("#btn").click(function () {
                    $("#box1").append("<div id='box2'>")//向父元素后面添加一个子元素
                    $("<div   id='box2'/>").appendTo("#box1")//向父元素的前面添加一个元素
                })
                
                
            })
            
            
            $(function () {
                /* 
                    append()
                        - 向父元素后边添加一个子元素
                    appendTo()
                        - 将子元素添加到父元素后边
                    prepend()
                    prependTo()
                        - 向父元素的前边添加子元素
                    text()
                        - 获取/设置元素的文本内容
                    html()
                        - 获取/设置元素的html代码
                        
                */
                $("#btn").click(function () {
                    //使用方法如下：
                    // $("#box1").append("<div id='box2'/>")

                    // $("<div id='box2'/>").appendTo("#box1")

                    // $("#box1").prepend("<div id='box2'/>")
                    $("<div id='box2'/>").prependTo("#box1")
                    
                })
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>
        <hr />

        <div id="box1">
            <div id="box3"></div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }

            #box2 {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                /* 
                    empty() 删除所有的子元素
                    remove() 移除元素（同时把移除事件，彻底删除）
                    detach() 移除元素，不删除事件
                */


                var $li = $("li:nth-child(1)")

                $li.click(function () {
                    alert("哈哈哈")
                })

                $("#btn").click(function () {
                    // $("ul").empty()      empty() 删除所有的子元素

                    // $("li:nth-child(1)").remove()    remove() 移除元素（移除事件）
                    $("li:nth-child(1)").detach()
                })

                $("#btn2").click(function () {
                    $("ul").append($li)
                })

                $("#btn3").click(function () {
                    /* 
                        attr() 读取布尔值返回实际值
                        prop() 读取布尔值返回 true/false
                            - 用来读取或设置元素的属性
                            - 读取布尔值属性时两者不会返回不同的值
                    */
                    var type = $("input[type=text]").attr("type")
                    var name = $("input[type=text]").prop("name")

                    var checked = $("input[type=radio]").prop("checked")

                    // alert(checked)

                    //设置属性：
                     $("input[type=text]").prop("value","哈哈")//读取属性或设置属性
                    //读取布尔属性的时候。两者会返回不一样的值
                    // $("input[type=radio]").prop("checked", true)

                    $("input[type=text]").val("计算机科学与技术学院")//读取值

                })
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>
        <button id="btn2">点我2</button>
        <hr />

        <ul>
            <li>计算机科学与技术学院</li>
            <li>软件工程</li>
            <li>大数据技术</li>
            <li>网络工程</li>
        </ul>

        <input type="radio" name="gender" value="male" /> 男
        <input type="radio" name="gender" value="female"  /> 女

        <hr />

        <input type="text" name="username" />

        <hr />

        <button id="btn3">点我3</button>
    </body>
</html>

样式操作：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box1 {
                width: 200px;
                height: 200px;
                padding: 100px;
                border: 10px red solid;
                background-color: #bfa;
            }

            #box2 {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    /* 
                        css 可以用来读取或设置元素的样式
                    */

                    var $width = $("#box1").css("width")//这个语句读作读取box1的width属性

                     alert($("#box1").css("background-color"))//这个语句读取box1的背景颜色
                    // alert($("#box1").css("left"))

                     $("#box1").css("width", 300)//这个语句读作读取box1的宽度属性，并且把宽度改为300

                    // $("#box1").css({width:300, height:500, backgroundColor:"yellow"})

                    // alert($("#box1").innerHeight())

                    // $("#box1").innerHeight(500)读取内部的属性

                    // alert($("#box1").offset().top + '--' + $("#box1").offset().left)

                    $("#box1").offset({ top: 500, left: 300 })
                })
                $("#btn2").click(function () {})

                $("#btn3").click(function () {})
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>
        <button id="btn2">点我2</button>
        <hr />

        <div id="box1"></div>

        <hr />

        <hr />

        <button id="btn3">点我3</button>
    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                border: 1px red solid;
                margin: 10px;
            }
        </style>

        <script>
            $(function () {
                $("#btn01").click(function () {
                    //     $(".box1").css("background-color", "#bfa")

                    // eq()用来获取jQuery对象中指定索引的元素   eq（）括号中传递的参数是索引
                    // first() 获取第一个元素
                    // last() 获取最后一个元素
                    // even() 获取索引为偶数的元素
                    // odd() 获取索引为奇数的元素
                    // slice() 切片
                    // $(".box1").eq(-1).css("background-color", "#bfa")  这个改变的是倒数第一个，根据索引去取元素
                    // $(".box1").even().css("background-color", "#bfa")  取第一个元素 也就是第一个div

                    // $(".box1").slice(1, 3).css("background-color", "#bfa")
                    $(".box1").filter(".a").css("background-color", "#bfa")//筛选出带a的元素
                    // $(".box1")[0]
                    // $(".box1").get(0)
                })
            })
        </script>
    </head>
    <body>
        <button id="btn01">点我</button>
        <hr />
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1 a"></div>
        <div class="box1 a"></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                border: 1px red solid;
                margin: 10px;
            }

            .box2{
                float: left;
                width: 200px;
                height: 200px;
                border: 1px orange solid;
            }
        </style>

        <script>
            $(function () {
                $("#btn01").click(function () {
                    // end() 将jQuery对象恢复到筛选前的状态
                    // add() 向jQuery对象中添加元素
                    
                    // contents() 获取当前jQuery对象中所有元素的内容




                    //以下是jQuery的链式调用
                     $(".box1")
                         .filter(".a")
                         .css("background-color", "#bfa")//这个语句读作提取带有a的元素，并且把背景颜色修改为白色
                         .end()//表示结束
                         .css("border-color", "blue")//结束后在修改


                    // $(".box1")
                    //     .css("border-color", "blue")
                    //     .filter(".a")
                    //     .css("background-color", "#bfa")


                    // $(".box1").add(".box2").css("background-color", "#bfa") 把box2添加到box1，并且修改了背景颜色为白色

                    $(".box1").contents().addBack().css("background-color", "#bfa")
                })
            })
        </script>
    </head>
    <body>
        <button id="btn01">点我</button>

        <hr />

        <div class="box1"><span>我是span</span></div>
        <div class="box1"><span>我是span</span></div>
        <div class="box1"><span>我是span</span></div>
        <div class="box1 a"><span>我是span</span></div>
        <div class="box1 a"><span>我是span</span></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1"></div>

        <div class="box2"></div>
    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./scripts/jquery-3.6.1.js"></script>
    <style>
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 2px red solid;
        }

    </style>
</head>
<body>
<body>
    <button id="btn01">点我</button>
    <button id="btn02">点我2</button>
    <button id="btn03">点我3</button>
    <a href="#">超链接</a>
    <hr>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <script>
        $(function(){

            // 可以通过指定方法来为jQuery对象绑定事件
            $("a").click(function(event){
                // 在jQuery的事件响应函数中，同样有事件对象，但是这个对象是经过jQuery包装过的新的对象
                // 包装该对象主要是为了解决兼容性的问题

                event.stopPropagation()
                event.preventDefault()

                alert(123)

                // 在jQuery的事件回调函数中，可以通过return false来取消默认行为和冒泡
                // return false
            })

            // $(document.body).click(function(){
            //     alert("body")
            // })


            // 也可以通过on()方法来绑定事件
            $("#btn01").on("click.a", function(){
                alert("通过on绑定的事件！")
            })

            $("#btn01").on("click.b", function(){
                alert("通过on绑定的事件！2")
            })

            $("#btn01").on("click.c", function(){
                alert("通过on绑定的事件！3")
            })

            $("#btn02").on("click", function(){
                // off()可以用来取消事件的绑定
                $("#btn01").off("click.a")
            })

            $("#btn03").on("click", function(){
                $(document.body).append("<div class='box1'/>")
            })

            // $(".box1").on("click", function(){
            //     alert("哈哈")
            // })
            
            // $(document).on("click",".box1", function(event){
            //     alert("哈哈")
            // })

            // one()用来绑定一个一次性的事件
            $(".box1").one("click", function(){
                alert('嘻嘻')
            })

        })

    </script>

</body>
</html>

总复习：jQuery习题

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                // 点击全选框后，所有其他的多选框同步切换状态
                // 获取全选框
                var $checkAll = $("#check-all")
                // 获取四个多选框
                var $hobbies = $("[name=hobby]")

                $checkAll.click(function () {
                    // 在事件的响应函数中，this是绑定事件的对象，这点在jQuery中同样适用
                    // 在这里 this 是dom对象
                    // alert(this.checked)
                    $hobbies.prop("checked", this.checked)
                })

                // 使得全选框和四个小框同步
                $hobbies.click(function () {
                    // 判断四个多选框是否全选
                    // var flag = $hobbies.filter(":checked").length !== 0
                    // var flag = $hobbies.is(":not(:checked)")
                    $checkAll.prop("checked", !$hobbies.is(":not(:checked)"))
                })

                // 全选
                $("#all").click(function () {
                    // add()不会影响原来的jQuery对象
                    $hobbies.add($checkAll).prop("checked", true)
                })

                // 全不选
                $("#no").click(function () {
                    // add()不会影响原来的jQuery对象
                    $hobbies.add($checkAll).prop("checked", false)
                })

                // 反选
                $("#reverse").click(function () {
                    // $hobbies.prop("checked", function(index, oldValue){
                    //     return !oldValue
                    // })

                    // $checkAll.prop("checked", !$hobbies.is(":not(:checked)"))

                    $checkAll.prop(
                        "checked",
                        !$hobbies
                            .prop("checked", function (index, oldValue) {
                                return !oldValue
                            })
                            .is(":not(:checked)")
                    )
                })

                // 提交
                $("#send").click(function () {
                    // 打印选中的内容
                    // alert($hobbies.val())
                    // for(var i=0; i<$hobbies.length; i++){
                    //     alert($hobbies[i].value)
                    // }

                    // each() 用来遍历jQuery元素，需要一个函数做为参数
                    // 函数会执行多次，每次执行时都会将当前元素设置为函数中的this
                    // $hobbies.each(function(index, ele){
                    //     this.checked && alert(this.value)
                    // })

                    $hobbies.filter(":checked").each(function(index, ele){
                        alert(this.value)
                    })
                })
            })
        </script>
    </head>
    <body>
        <div>
            <form action="#">
                <div>
                    请选择你的爱好：
                    <input type="checkbox" id="check-all" /> 全选
                </div>
                <div>
                    <input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
                    <input type="checkbox" name="hobby" value="篮球" /> 篮球
                    <input type="checkbox" name="hobby" value="羽毛球" /> 羽毛球
                    <input type="checkbox" name="hobby" value="足球" /> 足球
                </div>
                <div>
                    <button type="button" id="all">全选</button>
                    <button type="button" id="no">取消</button>
                    <button type="button" id="reverse">反选</button>
                    <button type="button" id="send">提交</button>
                </div>
            </form>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .outer {
                width: 400px;
                margin: 100px auto;
                text-align: center;
            }

            table {
                width: 400px;
                border-collapse: collapse;
                margin-bottom: 20px;
            }

            td,
            th {
                border: 1px black solid;
                padding: 10px 0;
            }

            form div {
                margin: 10px 0;
            }
        </style>

        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                // 删除
                $(document).on("click", "a", function () {
                    // alert(this) 委托时 jq将this设置为了触发事件的对象
                    // 获取当前tr
                    // var tr = this.parentNode.parentNode

                    var $tr = $(this).parents("tr") // 在当前元素的祖先中寻找tr

                    if (
                        confirm(
                            "确认删除【" +
                                $tr.children()[0].textContent +
                                "】吗？"
                        )
                    ) {
                        $tr.remove()
                    }

                    return false
                })

                // 添加
                $("#btn").on("click", function () {
                    // 获取用户输入的内容
                    var name = $("#name").val().trim()
                    var email = $("#email").val().trim()
                    var salary = $("#salary").val().trim()

                    // console.log(name + "--" + email + "--" + salary)
                    // $("tbody").append(
                    //     "<tr><td>" +
                    //         name +
                    //         "</td><td>" +
                    //         email +
                    //         "</td><td>" +
                    //         salary +
                    //         "</td><td><a href='javascript:;'>删除</a></td></tr>"
                    // )

                    // 创建一个tr
                    var $tr = $(
                        "<tr><td/><td/><td/><td><a href='javascript:;'>删除</a></td><tr>"
                    )
                    // 添加内容
                    var $tds = $tr.find("td")
                    $tds.eq(0).text(name)
                    $tds.eq(1).text(email)
                    $tds.eq(2).text(salary)
                    // 将tr添加到tbody中
                    $("tbody").append($tr)
                })
            })
        </script>
    </head>
    <body>
        <div class="outer">
            <table>
                <tbody>
                    <tr>
                        <th>姓名</th>
                        <th>邮件</th>
                        <th>薪资</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>孙悟空</td>
                        <td>swk@hgs.com</td>
                        <td>10000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                    <tr>
                        <td>猪八戒</td>
                        <td>zbj@glz.com</td>
                        <td>8000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                    <tr>
                        <td>沙和尚</td>
                        <td>shs@lsh.com</td>
                        <td>6000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                </tbody>
            </table>

            <form action="#">
                <div>
                    <label for="name">姓名</label>
                    <input type="text" id="name" />
                </div>
                <div>
                    <label for="email">邮件</label>
                    <input type="email" id="email" />
                </div>
                <div>
                    <label for="salary">薪资</label>
                    <input type="number" id="salary" />
                </div>
                <button id="btn" type="button">添加</button>
            </form>
        </div>
    </body>
</html>