Web前端 jQuery

^微凉夏颜^

已于 2023-04-04 17:27:44 修改

阅读量1.4k

点赞数 1

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

于 2023-03-29 17:27:05 首次发布

本文链接：https://blog.csdn.net/zhang_0202/article/details/129841477

版权

Web前端专栏收录该内容

12 篇文章 8 订阅

订阅专栏

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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</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 属性操作

所谓元素固有属性就是元素本身自带的属性，比如<a> 标签里面的 href属性、<img> 标签里面的src属性、<input> 标签里面的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">1</li>
    <li>2</li>
</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">1</li>
    <li>2</li>
</ul>
<div>8848</div>

<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">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<script>
    console.log($((".box")).html())
    $((".box")).html(`
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
	`)
</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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $.each($("ul>li"), function (i, item) {
        console.log(i)
        console.log(item)
    })

    $.each({ uname: "小昭", age: 22, email: "xiaozhao@qq.com" }, function (i, ele) {
        console.log(i)
        console.log(ele)
    }) 
</script>

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

创建元素

具体语法：$("<div></div>")，动态创建一个div标签

添加元素

内部添加

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

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

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

外部添加

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

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

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

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

删除元素

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

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

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

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

    $(".box .item").eq(0).remove()
    // $(".box").empty()
    $(".box").html("<li>1</li>")
</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>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</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'>div</div>")
        $(".box").append(div)
    })

off() 解绑事件

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

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

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

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

<div></div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</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: "xiaobai@qq.com",
        hobbies: ["code", "girl", "swim"]
    }

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