Web前端 jQuery

1、初始jQuery

---

1.1、jQuery是什么？

jQuery由美国人John Resig于2006年创建，jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互

jQuery 出现的目的是加快前端人员的开发速度，可以非常方便的调用和使用它，从而提高开发效率

jQuery优点

• 轻量级。核心文件才几十kb，基本不会影响页面加载速度
• 对事件、样式、动画支持，大大简化了DOM操作
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 支持插件扩展开发。有着丰富的第三方的插件
• 链式编程、隐式迭代

注：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

官网地址

文档工具站

1.2、jquery基本使用

引入jquery.js使用即可

jquery入口函数

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

<script>
    // 方式一
    $(document).ready(function () {
        // ...      页面DOM元素加载完成的入口
    })

    // 方式二
    $(function () {
        // ...
    })
script>

• 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 内部帮我们完成了封装
• 相当于原生 js 中的 DOMContentLoaded
• 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码
• 更推荐使用第二种方式，写法更简洁

jQuery 的顶级对象 $

<script>
    jQuery(function () {
        alert(1)
    })

    $(function () {
        alert(2)
    })
script>

$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $

$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法

1.3、jQuery 对象和 DOM 对象

用原生 JS 获取来的对象就是 DOM 对象

jQuery 方法获取的元素就是 jQuery 对象

jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）

注：

• DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
• jQuery对象命名一般约定以$开头

jQuery对象转DOM对象

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用原生js的方法

方式一：jQuery对象是一个类似数组（伪数组）的对象，可以通过**[index]**的方法得到相应的DOM对象

<div id="box">div>
<script>
    $(function () {
    let $box = $("#box")        // jQuery对象
    // console.log($box)
    // jQuery对象转DOM对象 
    let box = $box[0]
    box.style.backgroundColor = "orange"
})
script>

方式二：通过**get(index)**方法也可以得到相应的DOM对象

<div id="box">div>
<script>
    $(function () {
    let $box = $("#box")        // jQuery对象
    // jQuery对象转DOM对象 
    let box = $box.get(0)
    box.innerHTML = "我是div"
})
script>

1.4、jQuery基本操作

<h2>金风玉露一相逢 便胜却人间无数h2>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<script>
    $(function () {
    // 链式操作:对一个对象进行多重操作，并将操作结果返回给该对象
    $("h2").css("background-color", "skyblue").css("color", "white").css("padding", "20px")
})
script>

• 工厂函数$()：将DOM对象转化为jQuery对象
• 选择器 selector：获取需要操作的DOM 元素
• 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

2、jquery选择器

---

jQuery选择器类似于CSS选择器，用来选取网页中的元素

2.1、基本选择器

名称	示例	说明
ID选择器	$(“#id”)	获取指定ID的元素
类	$(“.class”)	获取相同的类名的元素
标签选择器	$(“div”)	获取同一类标签的元素
全选择器	$(“*”)	获取所有元素
并集选择器	$(“p,div,a”)	选取多个元素
交集选择器	$(“li.active”)	交集元素

<div id="box">博学之 审问之 慎思之 明辨之 笃行之div>
<p class="content">世界上那些最容易的事情中 不在能知 乃在能行 知行合一p>
<div>div>

<script>
    // 基本选择器
    $(function () {
        $("#box").css('background-color', 'salmon')
        $(".content").css('font-size', '22px')
        $("div").css("margin-top", "15px")
    })
script>

2.2、层级选择器

名称	示例	说明
后代选择器	$(“ul li”)	用来获取元素的后代元素
子代选择器	$(“ul>li”)	用来获取元素的子元素
相邻兄弟选择器	$(“ul>li:first-of-type+li”)	用来选取紧邻目标元素的下一个元素
通用兄弟选择器	$(“ul>li:first-of-type~li”)	用来选取目标元素之后的所有同辈元素

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $(function () {
        $("ul>li").css("font-size", "20px")
        $("ul>li:eq(0)+li").css('background-color', 'skyblue')
        $("ul>li:eq(2)~li").css('background-color', 'orange')
    })
script>

2.3、筛选选择器

名称	示例	说明
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(1)”)	获取索引号为1的li元素，索引号从0开始
:odd	$(“li:odd”)	获取索引号为奇数的元素
:even	$(“li:even”)	获取索引号为偶数的元素

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $(function () {
        $("ul li:first").css('background-color', 'green')
        $("ul li:eq(2)").css('background-color', 'blue')
        $("ul li:odd").css('background-color', 'yellow')
    })
script>

2.4、常见筛选方法

名称	示例	说明
parent()	$(“li”).parent()	查找li的父级
parents()	$(“li”).parents()	查找li的祖先元素
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子代选择器
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(“.three”).siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(“.second”).nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(“.second”).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(“div”).hasClass(“active”)	检查当前元素是否含有某个特定的类，如果有返回true，反之为false
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)

注：当遇到一些特殊符号跟文档结构有冲突的时候要进行转义，转义使用**\**

2.5、隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代

给匹配到的所有元素进行循环遍历，执行相应的方法，而我们不用再进行循环，简化操作，方便调用

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<script>
    $(function () {
        $("ul>li").css("background-color", "orange")
    })
script>

2.6、链式编程

链式编程是为了节省代码量，使代码看起来更优雅

<button>按钮button>
<button class="active">按钮button>
<button>按钮button>
<button>按钮button>
<button>按钮button>
<button>按钮button>

<script>
    $(function () {
        $("button").click(function () {
            // 当前元素添加样式  其他兄弟移除样式     隐式迭代
            $(this).addClass("active").siblings("button").removeClass("active")
        })
    })
script>

注：使用链式编程一定注意是哪个对象执行样式

3、jQuery操作页面元素

---

3.1、jQuery 样式操作

操作CSS

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式

参数如果只写属性名，则是返回属性值

<div>div>
<script>
    console.log($("div").css("width"))		// 160px
script>

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

<div>div>
<script>
    $("div").css("width", "260px")
script>

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

<div>div>
<script>
    $("div").css({
        width: 260,
        "height": 260,
        "borderRadius": 15,
    })
script>

设置类样式方法

作用等同于以前的 classList，可以操作类样式

添加类

<script>
    $("div").click(function () {
        $(this).addClass('active')
    })
script>

移除类

<script>
    $("div").click(function () {
        $(this).removeClass('active')
    })
script>

切换类

<script>
    $("div").click(function () {
        $(this).toggleClass('active')
    })
script>

注：操作类里面的参数不需要加点

类操作与className区别

• 原生 JS 中 className 会覆盖元素原先里面的类
• jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

3.2、jQuery 动画效果

Query 封装了很多动画效果，最为常见的如下：

显示隐藏

• show()
• hide()
• toggle()

滑动

• slideDown()
• slideUp()
• slideToggle()

淡入淡出

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

自定义动画

• animate()

显示隐藏效果

具体语法：show([speed,[easing],[fn]])

• 参数都可以省略， 无动画直接显示
• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

隐藏具体语法：hide([speed,[easing],[fn]])，参数同显示参数一致！

切换具体语法：toggle([speed,[easing],[fn]])，参数同显示参数一致！

<script>
    $(function () {
        $("button").eq(0).click(function () {
            $("div").show()
        })

        $("button").eq(1).click(function () {
            $("div").hide("fast", "linear", function () {
                console.log(1)
            })
        })

        $("button").eq(2).click(function () {
            $("div").toggle()
        })
    });
script>

注：平时使用一般不带参数，直接显示隐藏即可

详见jQuery文档

滑动效果

具体语法：slideDown([speed,[easing],[fn]])

• 参数都可以省略
• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

上滑具体语法：slideUp([speed,[easing],[fn]])，参数同下滑参数一致！

滑动切换具体语法：slideToggle([speed,[easing],[fn]])，参数同下滑参数一致！

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 下拉滑动
            $("div").slideDown()
        })
        $("button").eq(1).click(function () {
            // 上拉滑动
            $("div").slideUp(2000, "linear", function () {
                console.log(1)
            })
        })
        $("button").eq(2).click(function () {
            $("div").slideToggle()
        })
    });
script>

事件切换

具体语法：hover([over,]out)

• over：鼠标移到元素上要触发的函数（等同于mouseenter）
• out：鼠标移出元素要触发的函数（等同于mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它

<script>
    $(".nav li").hover(function () {
        $(this).children("ul").slideDown()
    }, function () {
        $(this).children("ul").slideUp()
    })

    $(".nav li").hover(function () {
        $(this).children("ul").slideToggle()
    })
script>

动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

停止排队：stop()

<script>
    $(".nav li").hover(function () {
        $(this).children("ul").stop().slideToggle()
    })
script>

• stop() 方法用于停止动画或效果
• 注： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画

淡入淡出效果

具体语法：fadeIn([speed,[easing],[fn]])

• 参数都可以省略
• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

淡出具体语法：fadeOut([speed,[easing],[fn]])，参数同淡入参数一致！

淡入淡出切换具体语法：slideToggle([speed,[easing],[fn]])，参数同淡入参数一致！

<script>
    $(function () {
        $("button").eq(0).click(() => {
            $("div").fadeIn()
        })

        $("button").eq(1).click(() => {
            $("div").fadeOut(1500, "linear", () => {
                console.log(1)
            })
        })

        $("button").eq(2).click(() => {
            $("div").fadeToggle()
        })

        $("button").eq(3).click(() => {
            $("div").fadeTo("fast", 0.6)
        })
    });
script>

自定义动画 animate

具体语法：animate(params,[speed],[easing],[fn])

• params：想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略
• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
• easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

<button>点我摇起来button>
<div>div>
<script>
    $(function () {
        $("button").click(function () {
            $("div").animate({
                width: 260,
                top: 200,
                opacity: 0.7
            }, 1000)
        })
    })
script>

3.3、jQuery 属性操作

所谓元素固有属性就是元素本身自带的属性，比如 标签里面的 href属性、 标签里面的src属性、 标签里面的type属性等

固有属性值 prop()

获取属性：prop(''属性'')

设置属性：prop(''属性'', ''属性值'')

<img src="./images/7.jpeg" alt="picture">
<script>
    $(function () {
        console.log($("img").prop('src'))
        $("img").prop("src", "./images/8.jpeg")
    })
script>

自定义属性值 attr()

用户自己可以给元素添加的属性，称为自定义属性。 比如给 li 标签添加 data-id=“1”

获取属性：attr(''属性'')

设置属性：attr(''属性'', ''属性值'')

<ul>
    <li data-id="1">1li>
    <li>2li>
ul>
<script>
    $(function () {
        console.log($("ul>li").eq(0).attr("data-id"))		// 1
        $("ul>li").eq(0).attr("data-id", "0")
    })
script>

注：该种方式获取属性类似于类似于原生 getAttribute()、setAttribute()

数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除

获取数据：date(''name'')

设置数据：data(''name'',''value'')

<ul>
    <li data-id="1">1li>
    <li>2li>
ul>
<div>8848div>

<script>
    $(function () {
        $("div").data("uname", "jack")
        console.log($("div").data("uname"))     		// jack
        console.log($("ul>li").eq(0).data("id"))        // 1
    })
script>

注：该方法还可以读取 HTML5 自定义属性 data-id，获取时不需要写data-前缀，并且返回的是数字型！

3.4、jQuery 内容文本值

普通元素内容 html()

等同于原生innerHTML

获取元素内容：html()

设置元素内容：html(''内容'')

<div class="box">
    <div class="item">1div>
    <div class="item">2div>
    <div class="item">3div>
div>

<script>
    console.log($((".box")).html())
    $((".box")).html(`
            

                
1
                
2
                
3
            
	`)
script>

普通元素文本内容 text()

等同于原生innerText

获取元素文本内容：text()

设置元素文本内容：text("文本内容")

<div class="content">开源 协作 分享 创新div>

<script>
    console.log($(".content").text())       // 开源 协作 分享 创新
    $(".content").text("人间清醒")  
script>

表单的值 val()

等同于原生value

获取表单的值：val()

设置表单的值：val("内容")

<input type="text" name="desc" value="好好学习">
<script>
    console.log($("input:text").val())  // 好好学习
    $("input:text").val("天天向上")
script>

3.5、jQuery 元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历

方式一：

具体语法：$("div").each(function (index, domEle) { })

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $(function () {
        // each 遍历元素
        let arr = ['purple', 'pink', 'skyblue', 'salmon', 'orange']
        let sum = 0
        $("ul>li").each(function (i, ele) {
            // console.log(i)
            // console.log(ele)
            $(ele).css("backgroundColor", arr[i])
            sum += parseInt($(ele).text())
        })
        console.log(sum)
    })
script>

• each() 方法遍历匹配的每一个元素。主要用DOM处理
• each 每一个里面的回调函数有2个参数： index 是每个元素的索引号；demEle 是每个DOM元素对象，不是jquery对象
• 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

方式二：

具体语法：$.each(object，function (index, element) { })

<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>
<script>
    $.each($("ul>li"), function (i, item) {
        console.log(i)
        console.log(item)
    })

    $.each({ uname: "小昭", age: 22, email: "[email protected]" }, function (i, ele) {
        console.log(i)
        console.log(ele)
    }) 
script>

• $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
• 里面的函数有2个参数： index 是每个元素的索引号；element 遍历的内容

创建元素

具体语法：$("

")，动态创建一个div标签

添加元素

内部添加

具体语法：element.append(''元素内容'')，把内容放入匹配元素内部最后面，类似原生 appendChild

具体语法：element.prepend(''元素内容'')，把内容放入匹配元素内部最前面

<div class="box">
    <div class="item">1div>
div>
<script>
    // 创建元素
    let div = $("
我是jquery创建的div
")
    // $(".box").append(div)
    $(".box").prepend(div)
script>

外部添加

具体语法：element.after(''元素内容'')，把内容放入目标元素后面

具体语法：element.before(''元素内容'')，把内容放入目标元素前面

<div class="box">
    <div class="item">1div>
div>
<script>
    // 创建元素
    let div = $("
我是jquery创建的div
")
    // $(".box").before(div)
    $(".box").after(div)
script>

• 内部添加元素，生成之后，它们是父子关系
• 外部添加元素，生成之后，它们是兄弟关系

删除元素

具体语法：element.remove()，删除匹配的元素（本身）

具体语法：element.empty()，删除匹配的元素集合中所有的子节点

具体语法：element.html()，清空匹配的元素内容

<div class="box">
    <div class="item">1div>
    <div class="item">2div>
div>
<script>
    let div = $("
jquery创建的div
")
    $(".box").append(div)

    $(".box .item").eq(0).remove()
    // $(".box").empty()
    $(".box").html("
1
")
script>

• remove 删除元素本身
• empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容

3.6、jQuery 尺寸、位置操作

jQuery 元素尺寸

语法	说明
width()/height()	获取匹配元素的宽度和高度值，只计算 width / height
innerWidth()/innerHeight()	获取匹配元素的宽度和高度值，包含padding
outerWidth()/outerHeight()	获取匹配元素的宽度和高度值，包含padding、border
outerWidth(true)/outerHeight(true)	获取匹配元素的宽度和高度值，包含padding、border、margin

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        padding: 10px;
        border: 15px solid red;
        margin: 10px;
    }
style>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>

<div>div>
<script>
    $(function () {
        // width + height
        console.log($("div").width());      // 100
        // $("div").width(300);

        // width + height + padding
        console.log($("div").innerWidth());     // 120

        // width + height + padding + border
        console.log($("div").outerWidth());     // 150

        // width + height + padding + border + margin
        console.log($("div").outerWidth(true));     // 170
    })
script>

• 以上参数若为空，则是获取相应值，返回的是数字型
• 如果参数为数字，则是修改相应值

jQuery 位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

offset() 设置或获取元素偏移

• offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
• 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left() 用于获取距离文档左侧的距离

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .father {
        position: relative;
        width: 350px;
        height: 350px;
        background-color: salmon;
        margin: 100px;
    }

    .son {
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: sandybrown;
        top: 10px;
        left: 10px;
    }
style>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>

<div class="father">
    <div class="son">div>
div>
<script>
    $(function () {
        console.log($(".son").offset());        // {top: 110, left: 110}
        console.log($(".son").offset().top);    // 110
        // 设置元素偏移
        // $(".son").offset({
        //     top: 360,
        //     left: 360
        // })
    })
script>

position() 获取元素偏移

• position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
• 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .father {
        position: relative;
        width: 350px;
        height: 350px;
        background-color: salmon;
        margin: 100px;
    }

    .son {
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: sandybrown;
        top: 10px;
        left: 10px;
    }
style>
<script src="../jquery-3.6.3/jquery-3.6.3.min.js">script>
<div class="father">
    <div class="son">div>
div>
<script>
    $(function () {
        console.log($(".son").position())       // {top: 10, left: 10}
        console.log($(".son").position().top)   // 10
        
        // 原生js获取
        console.log(document.querySelector(".son").offsetTop)       // 10
    })
script>

注：该方法只能获取偏移，不能设置偏移（只读），等同于原生js的offsetTop/offsetLeft

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

<div class="back">回顶部div>
<div class="container">div>
<script>
    $(function () {
        $(window).scrollTop(350)
        // console.log($(".container").offset())
        let boxTop = $(".container").offset().top
        $(window).scroll(function () {
            // console.log($(document).scrollTop())
            if ($(window).scrollTop() >= boxTop) {
                $(".back").fadeIn()
            } else {
                $(".back").fadeOut()
            }
        })
    })

    // 原生js
    // window.addEventListener('scroll', () => {
    //     window.scrollTo(0, 200)
    //     console.log(document.documentElement.scrollTop)
    // })
script>

• scrollTop() 方法设置或返回被选元素被卷去的头部，等同于原生js的scrollLeft/scrollTop
• 不带参数是获取，参数为不带单位的数字则是设置被卷去的头部

4、jQuery事件

---

4.1、jQuery 事件注册

单个事件注册

具体语法：element.事件(function(){})

<div>div>
<script>
    $(function () {
        $("div").click(function () {
            $(this).css("backgroundColor", "orange")
        })
    })
script>

其他事件和原生js基本一致！

4.2、jQuery 事件处理

on() 绑定事件

具体语法：element.on(events,[selector],fn)

• events：一个或多个用空格分隔的事件类型，如"click"或"keydown"
• selector：元素的子元素选择器
• fn：回调函数，即绑定在元素身上的侦听函数

优点一：可以绑定多个事件，多个处理事件处理程序

<div>div>
<script>
    $("div").on({
        mouseenter: function () {
            $(this).css("backgroundColor", "blue")
        },
        mouseleave: function () {
            $(this).css("backgroundColor", "yellow")
        }
    })
script>

优点二：可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

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

<script>
    $(function () {
        // 事件委托  子元素的事件冒泡 冒到了父元素ul上
        $("ul").on("click", "li", function (e) {
            console.log("你点击了第" + e.target.innerText + "个li")
        })
    })
script>

注：在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本推荐使用on替代

优点三：动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

<div class="box">div>

<script>
    $(function () {
		// 该种方式无法给未来动态创建的元素绑定事件
        // $(".box .item").click(function () {
        //     alert(1)
        // })

        // 给未来动态创建的元素绑定事件 Yes
        $(".box").on("click", "div", function () {
            alert(1)
        })

        let div = $("<div class='item'>divdiv>")
        $(".box").append(div)
    })

off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序

解绑该元素全部事件：$("div").off()

解绑该元素指定事件：$("div").off("事件名称")

解绑该元素事件委托：$("ul").off("事件名称", "子元素")

<div>div>
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
ul>

<script>
    $(function () {
        $("div").on({
            mouseenter: () => {
                $("div").css("background-color", "red")
            },
            mouseleave: () => {
                $("div").css("background-color", "green")
            }
        })

        // 事件解绑 off
        // $("div").off()               // 解绑div身上所有事件处理程序
        $("div").off("mouseenter")      // 只解绑div身上鼠标经过事件处理程序

        // 绑定事件  事件委托 ul
        $("ul").on("click", "li", function (e) {
            console.log(e.target.innerText)
        })
        // 解绑 ul 事件委托
        $("ul").off("click", "li")

        // one() 只能触发事件一次
        $("ul").one("click", "li", function (e) {
            console.log(e.target.innerText)
        })
    })
script>

trigger() 自动触发事件

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

<div>div>
<script>
    $(function () {
        $("div").on("click", () => {
            console.log(1)
        })
        // 元素名.事件
        // $("div").click()
        
        // 元素.trigger("事件名称")
        // $("div").trigger("click")    
        
        // 元素.triggerHandler("事件名称")      注：该种方式不会触发元素默认行为
        $("div").triggerHandler("click")
    })
script>

4.3、jQuery 事件对象

事件被触发，就会有事件对象的产生

具体语法：element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

<a href="https://www.hua.com">点我送礼a>
<script>
    $(function () {
        $("a").on("click", (e) => {
            // return false
            e.preventDefault()
        })
    })
script>

5、jQuery 插件

---

jQuery 对象拷贝

如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法

具体语法：$.extend([deep], target, object1, [objectN])

<script>
    let obj = {
        uname: "小白",
        age: 22,
        eamil: "[email protected]",
        hobbies: ["code", "girl", "swim"]
    }

    let o = {}
    $.extend(true, o, obj)
    o.hobbies[0] = "basketball"
    console.log(o)
    console.log(obj)
script>

• deep：如果设为true 为深拷贝， 默认为false 浅拷贝
• target： 要拷贝的目标对象
• object1：待拷贝到第一个对象的对象
• objectN：待拷贝到第N个对象的对象
• 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
• 深拷贝，前面加true， 完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象

jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成

注：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件

jQuery 插件使用步骤：

• 引入相关文件。（jQuery 文件 和 插件文件）
• 复制相关html、css、js (调用插件)