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插件。
贡献者
更新日志
fb8bc-更新为vuepress于