Jquery

约 7898 字大约 26 分钟

2026-04-04

JavaScript库

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）

从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等

常见的JavaScript 库：

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto

这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery

jQuery介绍

jQuery总体概况如下 :

jQuery是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
j 就是 JavaScript； Query 查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互
学习jQuery本质：就是学习调用这些函数（方法）
jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

jQuery的优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

jQuery的基本使用

jQuery下载

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本

各个版本的下载：https://code.jquery.com/

版本介绍：

1x ：兼容 IE 678 等低版本浏览器，官网不再更新

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

使用jQuery

步骤：

引入jQuery文件。
在文档最末尾插入 script 标签，书写体验代码。
$('div').hide() 可以隐藏盒子。

jQuery的入口函数

jQuery中常见的两种入口函数：

// 第一种: 简单易用。
$(function() {
    ... // 此处是页面 DOM 加载完成的入口
});

// 第二种: 繁琐，但是也可以实现
$(document).ready(function() {
    ... //  此处是页面DOM加载完成的入口
});

总结：

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

jQuery中的顶级对象$

$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$ 包装成jQuery对象，就可以调用jQuery 的方法

jQuery对象和DOM对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

jQuery对象和DOM对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

（1）DOM --> jQuery

$(DOM对象)

（2）jQuery --> DOM

index为索引号
$(DOM对象)[index]

$(DOM对象).get(index)

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
    //   2.1 jQuery对象[索引值]
    var domObject1 = $('div')[0]
    
	//   2.2 jQuery对象.get(索引值)
	var domObject2 = $('div').get(0)

总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法

jQuery常用的API

jQuery选择器

基础选择器

$("选择器") //  里面选择器直接写 CSS 选择器即可，但是要加引号

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	*$("")**	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

层级选择器

名称	用法	描述
子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$("ul li")	使用空格，代表后代选择器，获取ul下所有的li元素，包括孙子
	$("ul + li")	使用+，代表当前元素的下一个兄弟元素
	$( "#prev ~ div" )	选择“prev”元素之后的所有同级元素，具有相同的父元素，并匹配过滤“同级”选择器

parent()	查找父级
parents()	返回祖先级元素【父级过多】
children(selector)	最近一级（亲儿子）
find(selector)	后代选择器(所有的)
siblings(selector)	查找兄弟节点，不包括自己本身
next()	获取当前元素的下一个兄弟元素
nextAll([expr])	查找当前元素之后所有的同辈元素
prev()	获取匹配元素前面相邻的同辈元素
prevAll([expr])	查找当前元素之前所有的同辈元素

表单选择器

名称	描述
:button	选择所有按钮元素和按钮类型的元素
:checkbox	选择复选框类型的所有元素
:checked	匹配所有被选中或选中的元素
:disabled	选择所有禁用的元素
:enabled	选择所有启用的元素
:file	选择文件类型的所有元素
:focus	如果当前处于焦点，则选择元素
:image	选择图像类型的所有元素
:input	选择所有输入、文本区域、选择和按钮元素
:password	选择密码类型的所有元素
:radio	选择所有类型为 radio 的元素
:reset	选择所有类型为 reset 的元素
:selected	选择所有选定的元素
:submit	选择提交类型的所有元素
:text	选择所有文本类型的输入元素

属性选择器

$("[href]")	选取所有带有 href 属性的元素
$("[href='#']")	选取所有带有 href 值等于 "#" 的元素
$("[href!='#']")	选取所有带有 href 值不等于 "#" 的元素
$("*")	选择所有元素
$("element:animated")	选择所有正在播放动画的所有元素
$( "a[hreflang\|='en']" )	选择a标签属性为hreflang属性值带有en的字符串或者后面跟着"-"
$( "input[name*='man']" )	选择具有包含给定子字符串的值的指定属性的元素
$( "input[name~='man']" )	选择具有指定属性的元素，其值包含给定的单词，以空格分隔
$( "input[name$ ='letter']" )	选择具有以给定字符串结尾的值的指定属性的元素。比较区分大小写。
$( "input[name^='news']" )	选择具有以给定字符串开头的值的指定属性的元素。
`$( "input[id][name$='man']" )`	匹配所有指定属性过滤器的元素

hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true
toggle()	切换元素的可见性

筛选选择器

基础过滤选择器

$("element:focus")	如果当前处于焦点，则选择元素。
$( "element:header" )	选择所有作为标题的元素，如 h1、h2、h3 等
$( "div:lang(en-us)" )	选择指定语言的所有元素
$( ":root" )	选择作为文档根的元素
$(":target")	选择由文档 URI 的片段标识符指示的目标元素

子代过滤选择器[冒号前面要有空格]

名称	描述
:first-child	选择作为其父元素的第一个子元素的所有元素
:first-of-type	选择所有元素名称相同的同级元素中的第一个元素
:last-child	选择作为其父项的最后一个子项的所有元素
:last-of-type	选择所有元素名称相同的兄弟元素中的最后一个元素
:nth-child(index)	选择作为其父元素的第 n 个子元素的所有元素
:nth-last-child(index)	选择作为其父元素的第 n 个子元素的所有元素，从最后一个元素到第一个元素计数
:nth-last-of-type	选择与具有相同元素名称的兄弟元素相关的父元素的第 n 个子元素的所有元素，从最后一个元素到第一个元素计数
:nth-of-type()	选择与具有相同元素名称的兄弟元素相关的父元素的第 n 个子元素的所有元素
:only-child	选择作为其父级唯一子级的所有元素
:only-of-type	选择所有没有具有相同元素名称的兄弟元素的元素。

内容过滤器

名称	描述
:contains("XX")	选择包含指定文本的所有元素
:empty	选择所有没有子元素的元素（包括文本节点)
:has()	选择包含至少一个与指定选择器匹配的元素的元素
:parent()	选择具有至少一个子节点（元素或文本）的所有元素 ; 查找父级

JQuery扩展选择器

名称	用法	描述
:first	$("li:first")	获取第一个元素
:last	$("li:last")	获取最后一个元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素
:not	$("li:not(.myClass)")	获取class不等于myClass的li元素
:gt(index)	$("li:gt(1)")	获取索引号大于1的li对象
:lt(index)	$("li:lt(3)")	获取索引号小于1的li对象
:hidden	$("li:hidden")	获取所有隐藏的li元素
:visible	$( "div:visible" )	选择所有可见的元素

jQuery隐式迭代

jQuery设置样式

$('div').css('属性', '值')

jQuery排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

$(this).css('color ', 'red ');
$(this).siblings().css("color ", "");

隐式迭代

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

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

$('div').hide(); //页面中所有的div全部隐藏，不用循环操作

链式编程

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

$(this).css('color', 'red').sibling().css('color', '');

jQuery样式操作

jQuery中常用的样式操作有两种：css() 和 设置类样式方法

方法1: 操作 css 方法

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

常用以下三种形式 :

（1）参数只写属性名，则是返回属性值

var strColor = $(this).css('color');

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

$(this).css("color", "red ");

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

$(this).css({"color": "white","font-size": "20px"});

注意：css() 多用于样式少时操作，多了则不太方便。

方法2: 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

注意：

设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：show() / hide() / toggle();
划入画出：slideDown() / slideUp() / slideToggle();
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo();
自定义动画：animate() ;

注意：

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

jQuery为我们提供另一个方法，可以停止动画排队：stop();

停止动画排队

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

停止动画排队的方法为：stop() ;

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

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

事件切换

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover

hover([over, ] out) // 其中over和out为两个函数

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

显示隐藏

显示隐藏动画，常见有三个方法：show() / hide() / toggle();

1.显示语法规范

show([speed, [easing],[fn]]);

显示参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

2.隐藏语法规范

hide([speed, [easing],[fn]]);

隐藏参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

3.切换语法规范

toggle([speed, [easing],[fn]]);

切换参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

建议：平时一般不带参数，直接显示隐藏即可

滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle();

1.下滑语法规范

slideDown([speed, [easing],[fn]]);

下滑参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

2.上滑语法规范

slideUp([speed, [easing],[fn]]);

上滑参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

3.滑动语法规范

slideToggle([speed, [easing],[fn]]);

滑动参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

淡入淡出

淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

1.淡入语法规范

fadeIn([speed, [easing],[fn]]);

淡入参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

2.淡出语法规范

淡出参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

3.淡入淡出语法规范

fadeToggle([speed, [easing],[fn]]);

淡入淡出参数

（1）参数都可以省略，无动画直接显示

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

4.渐进方式调整到指定的不透明度

fadeTo([speed, opacity, [easing],[fn]])

效果参数

（1）opacity 透明度必须写，取值0~1之间

（2）speed：（必须写）三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

自定义动画

1.语法

animate(params, [speed], [easing], [fn])

2.参数

（1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数可省略

（2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000）

（3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

jQuery属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的href ，比如 <input> 元素里面的type

1.获取属性语法

prop("属性")

2.设置属性语法

prop("属性", "属性值")

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等

建议设置boolean类型的属性[true/false]

元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”

1.获取属性语法

attr("属性") //类似原生getAttribute()

2.设置属性语法

attr("属性", "属性值") //类似原生setAttribute()

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

数据缓存 data()

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

1.附加数据语法

data("name","value") //向被选元素附加数据

2.获取数据语法

attr("name") //向备选数据获取数据

注意：同时，还可以读取 HTML5 自定义属性 data-index（第一个不用带data-），得到的是数字型

jQuery文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val() ;

分别对应JS中的 innerHTML 、innerText 和 value 属性

jQuery内容属性值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作

1.普通元素内容html()（相当于原生inner HTML）

html() //获取元素的内容

html("内容") //设置元素的内容

2.普通元素文本内容text()（相当于原生innerText）

text() //获取元素的文本内容

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

3.表单的值val()（相当于原生value）

val() //获取表单的值

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

注意：html() 可识别标签，text() 不识别标签

parents("element")返回指定的祖先级元素

toFixed(数字)可保留几位小数

jQuery元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作

遍历元素

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

语法1

$("div").each(function(index, domEle) {
            xxx;
        })

（1）each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个（2）里面的回调函数有2个参数：

index是每个元素的索引号；

demEle是每个DOM元素对象，不是jQuery对象

（3）**使用jQuery方法，需要给这个dom元素转换为jQuery对象 **$(domEle)

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换

语法2

$.each(Object, function(index, element) {
            xxx;
        })

（1）$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

（2）里面的回调函数有2个参数：

index是每个元素的索引号

element遍历内容

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换

创建、添加、删除

1.创建

$("<li></li>");

动态的创建了一个 <li>

2.1内部添加

element.append("内容")

把内容放入匹配元素内部最后面，类似原生appendChild

子元素添加到父元素

Element.appendTo("内容");

把内容放入匹配元素内部最前面

2.2外部添加

element.after("内容") //把内容放入目标元素后面
element.before("内容") //把内容放入目标元素前面

（1）内部添加元素，生成之后，它们是父子关系

（2）外部添加元素，生成之后，它们是兄弟关系

3.删除元素

element.remove() //删除匹配的元素（本身）
element.empty() //删除匹配的元素集合中所有的子节点
element.html("") //清空匹配的元素内容

（1）remove删除元素本身

（2）empty()和html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内容

jQuery 尺寸、位置操作

jQuery 尺寸操作

语法	用法
width()/height()	取得匹配元素宽度和高度值只算width/height
innerWidth()/innerHeight	取得匹配元素宽度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含padding、border、margin

以上参数为空，则是获取相应值，返回数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

jQuery 位置操作

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

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

（1）offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

（2）该方法有2个属性left、top。

offset().top用于获取距离文档顶部的距离

offset().left用于获取距离文档左侧的距离

（3）可以设置元素的偏移：offset({top:10,left:30});

2.position()获取元素偏移

（1）position()方法用于返回被选元素相对于带有定位的父级的偏移坐标，如果父级都没有定位，则以文档为准

（2）该方法有2个属性left、top。

position().top用于获取距离定位父级顶部的距离

position().left用于获取距离定位父级左侧的距离

（2）该方法只能获取

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

（1）scrollTop()方法设置或返回被选元素被卷去的头部

（2）不跟参数是获取，参数为不带单位的数字是设置被卷去的头部

事件注册

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法

语法

element.事件(function() {})
$("div").click(function() {
    事件处理程序
})

其他事件和原生基本一致

比如mouseover、mouseout、focus、change、keydown、keyup，resize、scroll

jQuery事件处理

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发

on()绑定事件

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

语法

element.on(events, [Selector], fn)

events：一个或多个用空格分隔的事件类型，如“click”“keydown”
selector：元素的子元素选择器

优点：

（1）可以绑定多个事件，多个处理事件处理程序

$("div").on({
    mouseover: function() {},
    mouseout: function() {},
    click: function() {}
});

如果事件处理程序相同

$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
})

（2）可以事件委派操作。

事件委派定义：把原来加给子元素身上的事件绑定在父元素身上，就是事件委派给父元素

$("ul").on("click", "li", function() {
    alert("hello world");
})

在此之前有bind(),live(),delegate()等方法来处理事件绑定或事件委派

（3）动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

$("div").on("click", "p", function() {
    alert("可以给动态生成的元素绑定事件");
})
$("div").append($("<p>我是动态创建的p</p>"))

off()解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;

语法

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

解绑p元素所有事件处理程序

$("p").off()

解绑p元素上面的点击事件后面off是侦听函数名

$("p").off("click")

解绑事件委托

$("ul").off("click", "li")

如果有的事件只想触发一次，可以使用one(）来绑定事件

trigger()自动触发事件

提供了两个自动触发事件 trigger() 和 triggerHandler()

第一种：trigger()

element.click() //第一种简写形式
element.trigger("type") //第二种自动触发模式

第二种：triggerHandler()

element.triggerHandler(type) //第三种自动触发模式

triggerHandler模式不会触发元素的默认行为

jQuery事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生

语法

element.on(events, [selector], function(event) {})

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

阻止冒泡：event.stopPropagation()

jQuery拷贝对象

语法

$.extend([deep], target, Object1, [ObjectN])

（1）deep：如果设为true为深拷贝，默认为false浅拷贝

（2）target：要拷贝的目标对象

（3）object1：待拷贝到第一个对象的对象

（4）onjectN：待拷贝到第N个对象的对象

（5）浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象

（6）深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象

jQuery多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存

解决方案

（1）把里面的$符号统一改为jQuery

（2）jQuery变量规定新的名称：$.noConflict()

jQuery插件

jQuery 插件常用的网站：

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：

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

瀑布流插件

http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html

插件的使用三点：

引入css

2.引入JS

3.引入html（有的简单插件只需引入html和js，甚至有的只需引入js）

图片懒加载插件

https://www.jq22.com/search?seo=%e6%87%92%e5%8a%a0%e8%bd%bd&PageNo=1

图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验

懒加载只需引入html 和 js操作即可，此插件不涉及css

全屏滚动插件

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站

GitHub：https://github.com/alvarotrigo/fullPage.js

全屏滚动插件介绍比较详细的网站为：

http://www.dowebok.com/demo/2014/77/

bootstrap组件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式

布局，使得 Web 开发更加方便快捷

凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件

凡是在应用程序中已经预留接口的组件就是插件

Bootstrap组件使用非常方便:

1.引入bootstrap相关css和js

2.去官网复制html

bootstrap插件（JS）

bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）

步骤：

1.引入bootstrap相关css和js

2.去官网复制html

3.复制js代码，启动js插件。

贡献者

xiaofei

更新日志

2026/4/5 03:39

查看所有更新日志

fb8bc-更新为vuepress于 2026/4/5