jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件
jQuery
一 jQuery 的基础
1.1 jQuery 的版本
不同的开发版本
jquery.js 开发版（不压缩）
jquery.min.js 产品版（压缩过）
jquery.slim.js 简化版（去掉了动画功能和ajax功能）
https://www.bootcdn.cn/
版本号
1.x.x 兼容IE6~IE8
2.x.x 和 3.x.x 需要 IE9 以上浏览器支持
1.2 如何使用 jQuery
需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery 导入之后，这样才能使用 jQuery 中封装的方法！
① 导入本地的 jQuery 文件
下载地址：https://jquery.com/download/
<script src="jquery-3.3.1.min.js">script>
<script>
//注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
script>
② 导入 CDN 上的 jQuery 文件
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<script>
code...
script>
CDN:
内容分发系统，CDN提供商拥有非常多的服务器
需要下载 CDN 上的文件，可以就近下载，提高加载速度
通过npm下载安装
- 安装
node - 在项目根目录打开
cmd，初始化package.json
npm init -y
下载jQuery
npm i jquery
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
code...
</script>
③ 根据浏览器版本加载不同版本的 jQuery
<script src="../../dist/jquery-3.1.1.min.js">script>
1.3 核心函数 / jQuery 对象
$ 是 jQuery 的别名； 是一个 function 类型的对象.
通过jQuery，可以选取（查询query）HTML 元素，并对它们执行“操作”（actions）。
核心函数的作用：
- 获取元素； 参数是字符串，指定选择器；返回值是 jQuery DOM 对象（表示页面中某个或某些元素或其他节点）。
- 把原生DOM转为jQuery DOM； 参数是原生 DOM；返回值jQuery DOM 对象。
- 文档就绪事件的简写，参数是回调函数。
1.3.1 $是jQuery的别名
jQuery('.item').show();
//等同于
$('.item').show();
console.log(jQuery === $); // true
1.3.2 释放$使用权
当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery
// 释放$使用权
jQuery.noConflict();
// 隐藏ID为demo的元素
abc("#demo").hide();
当便捷访问符号发生冲突时,我们也可以自定义便捷访问符号
// 指定自定义符号
var abc = jQuery.noConflict();
// 隐藏ID为demo的元素
abc("#demo").hide();
1.4 jQuery DOM 对象
① jQuery DOM 对象
jQuery DOM 对象是由原生 DOM 组成的集合，是个伪数组；（与 NodeList 和 HTMLCollection 完全不同）
jQuery DOM 对象调用方法设置样式或属性，集合中所有的元素都会生效，无需进行遍历。
接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,返回jQuery对象。
- 通过原生
js获取的dom对象，我们称之为jsDOM或者原生DOM - 通过
jQuery选择器获取的dom对象，我们称之为jQuery DOM（jQuery对象）
// 利用jquery得到的是一个jQuery对象
var $box = $("#demo");
console.log($box);
// 利用js原生语法得到的是一个jsDOM对象
var box = document.getElementById("demo");
console.log(box);
② 原生 DOM
把原生 JS 方式获取的元素对象或其他节点对象 称之为 原生 DOM。
③ 原生 DOM 和 jQuery DOM 互相转换
原生DOM转为jQueryDOM： 使用核心函数，把原生DOM作为参数，返回jQuery DOM。
jQuery DOM 转为原生DOM： jQueryDOM是集合，集合的成员就是原生DOM。
jQuery DOM本质上 是由jsDOM组成的集合，是个伪数组。可以通过 [索引]或.get(索引值)获取其中的jsDOM$(jsDOM)可以转为jQuery DOM
// 获取jQuery DOM
var $lis = $('ul li')
console.log($lis.length) //6
// 增加属性
$lis.css('border-bottom','1px dashed #ccc').css('line-height','40px');
// 增加点击事件
$lis.click(function() {
alert('ok');
});
// 遍历
for (var i = 0;i<$lis.length;i++) {
console.log($lis[i])
}
1.5 文档就绪事件
① 语法
// 把 document 转为 jQueryDOM，添加 ready 事件
$(document).ready(function(){
// code ....
});
// 文档就绪事件简写
$(function(){
// code ....
})
② ready 事件与 load 的事件区别
1. ready 事件等到页面所有元素加载完毕，与 DOMContentLoaded 类似；
2. load 事件等到页面中所有的一切，包括外部文件（图片、视频、音配等）都加载完毕。
// 文档就绪事件的简写
$(function(){
console.log('ready');
console.log(document.getElementById('box'));
console.log($('#box').length);
console.log('');
});
1.6 链式调用（连贯操作）
jQuery DOM 对象支持链式调用
$('#box').width(400).height(300).css('background-color', 'red');
链式调用的原理： jQuery DOM 的方法返回还是调用它的 jQuery DOM！
二 jQuery 选择器
2.1 基本选择器
与 css 选择器一致的
| 选择器 | 名称 | 描述 | 示例 |
|---|---|---|---|
| #id | id选择器 | 根据给定的id匹配一个元素 | $("#box");选取id为box元素 |
| .class | 类选择器 | 根据给定的类名匹配元素 | $(".box");选取所有类名为box元素 |
| element | 元素选择器 | 根据给定的元素名称匹配元素 | $(“p”);选取所有 元素 |
| * | 通配符选择器 | 匹配所有元素 | $("*");选取所有元素 |
| selector1,selector2,selectorN | 并集选择器 | 将所有选择器匹配到的元素合并后一起返回 | $(“div,p,.box”);选取所有
元素,所有
元素和所有类名为box元素 |
$("div").css("color","red");
$("#one").css("color","red");
$(".three").css("color","green");
$("*").css("color","red");
$("#one,.three").css("color","red");
2.2 层级选择器
与 css 选择器一致的
| 选择器 | 名称 | 描述 | 示例 |
|---|---|---|---|
| $(“ancestor descendant”) | 后代选择器 | 选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等) | $(“div span”);选取
元素里所有的 元素
|
| $(“parent > child”) | 子元素选择器 | 找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等) | $(“div>span”);选取
元素下元素名称是 的子元素
|
| $(“prev + next”) | 相邻兄弟选择器 | 选取prev元素后面紧跟的那个next元素 | $(".one+div");选取类名为one的下一个同级的
元素
|
| $(“prev ~ siblings”) | 通用兄弟选择器 | 选取prev元素后面的所有next元素 | $("#two~div");选取id名为two元素后面所有同级的
元素
|
2.3 过滤选择器
| 写法 | 描述 |
|---|---|
| $(‘p:first’) | 选取页面元素内的第一个p元素 |
| $(‘p:last’) | 选取页面元素内的最后一个p元素 |
| $(‘p:not(.select)’) | 选取选择器不是select的p元素 |
| $(‘p:even’) | 选取索引是偶数的P元素(索引从0开始) |
| $(‘p:odd’) | 选取索引是奇数的p元素(索引从0开始) |
| $(‘p:eq(index)’) | 选取索引等于index的p元素(索引从0开始,索引支持负数) |
| $(‘p:gt(index)’) | 选取索引>index的p元素(索引从0开始) |
| $(‘p:lt(index)’) | 选取索引 |
| $(‘:header’) | 选取标题元素h1~h6 |
| $(‘:animated’) | 选取正在执行动画的元素 |
| $(‘input:focus’) | 选取当前被焦点的元素 |
| jQuery为常用的过滤器提供了丰富的方法 | |
| eq(index) | 获取是index索引值的元素(索引从0开始,负值从后开始) |
| first() | 选取第一个元素 |
| last() | 选取最后一个元素 |
| not(select) | 选取不是该选择器的元素 |
$("p:gt(2)").css("background","orange");
$("p:lt(2)").css("background","orange");
$("p:lt(2),p:eq(2)").css("background","orange");
$(":header").css("color","gold");
$("h5:header").css("color","pink");
$("input").focus();
$("input:focus").css("color","red");
setTimeout(()=>{
$("input:focus").css("color","red");
},5000)
2.4 内容选择器
| 写法 | 描述 |
|---|---|
| $(‘:contains(“尚硅谷”)’) | 选取含有”尚硅谷”文本的元素 |
| $(‘:empty’) | 选取不包含子元素或空文本的元素 |
| $(‘:has(select)’) | 选取含有该select选择器的元素(必须是父元素上调用,返回的是父元素) |
| $(‘:parent’) | 选取含有子元素或文本的元素 |
| has() | jQuery提供了一个has()方法作用等同has过滤器,选中含有什么的元素 |
| jQuery提供了parent相关方法,但与过滤器含义不等同 | |
| parent() | 选择当前元素的父元素 |
| parents() | 选择当前元素的祖先元素(包括父元素) |
| parentsUntil() | 选择当前元素的祖先元素,遇到指定元素则停止 |
$("div:has(span)").css({
color:"red"
})
$("div:has(.one)").css({
color:"red"
})
$("div").has(".one").css({
color:"red"
})
2.5 可见性选择器
:hidden 不可见的元素（display:none 和 type值为hidden的input元素）
:visible 可见的元素，除了不可见的都是可见的 opacity:0 visibility:hidden
hidden过滤器一般是包含样式为display:none。input表单类型为hidden
设置了visibility:hidden的元素,虽然其在物理上是不可见的,但却保留了物理空间,因此该算是可见元素
2.6 属性选择器
| 写法 | 描述 |
|---|---|
| $(‘a[name]’) | 获取具有这个属性的DOM对象 |
| $(‘a[name =num]’) | 获取具有这个属性且属性值=num的DOM对象 |
| $(‘a[name ^=num]’) | 获取具有这个属性且属性值是以num开头的DOM对象 |
| $(‘a[name $=num]’) | 获取具有这个属性且属性值是以num为结尾的DOM对象 |
| $(‘a[name!=num]’) | 获取具有这个属性且属性值不等于num的DOM对象 |
| $(‘a[name|=num]’) | 获取有这个属性且等于属性值或属性值开头匹配后带‘—’符号的DOM对象 |
| $(‘a[name ~=num]’) | 获取具有这个属性且属性值是以一个空格隔开,其中包含属性值的DOM对象 |
| $(‘a[name *=num]’) | 获取具有这个属性值且属性值含有指定字符串的DOM对象 |
| $(‘a[xm] [ name =num]’) | 获取具有这个属性且属性值匹配的DOM对象 |
2.7 子元素选择器
与 css 选择器中的结构伪类选择器一致
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:only-child
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type
$(‘li:nth-child(even/odd/index)’) 获取li是偶数/奇数/索引的子元素(索引从1开始)
2.8 表单选择器
| 写法 | 描述 |
|---|---|
| $(":input") | 匹配所有 input, textarea, select 和 button 元素 |
| $(":text") | 所有的单行文本框， ( " : t e x t " ) 等 价 于 (":text") 等价于 (":text")等价于("[type=text]")，推荐使用$(“input:text”)效率更高，下同 |
| $(":password") | 所有密码框 |
| $(":radio") | 所有单选按钮 |
| $(":checkbox") | 所有复选框 |
| $(":submit"） | 所有提交按钮 |
| $(":reset") | 所有重置按钮 |
| $(":button") | 所有button按钮 |
| $(":file") | 所有文件域 |
2.9 表单对象选择器
与 css 选择器中的 UI伪类选择器 一致:
:disabled 匹配不可用的 input
:enabled 匹配可用的 input
:checked 被选中的单选按钮、复选框或下拉选项（option）元素 （与 css 中的有区别）
jQuery 特有的选择器：
:selected 被选中的下拉选项option 元素
2.10 注意事项
选择器 "li :first" 的意思是从li的后代元素中匹配第一个
选择器 "li:first" 的意思是从li元素中匹配第一个
2 .11 混淆选择器
| 写法 | 描述 |
|---|---|
| $.escapeSelector(selector) | className或IDName是有特殊符号 |
$(function () {
$("."+$.escapeSelector(".abc")+"").css({
color:"red"
})
$(":input").css({
color:"yellow"
})
})
三 jQuery 筛选器方法
在已经获取到了元素（jQueryDOM）的时候，通过方法获取与之关联的其他元素
3.1 过滤方法
| 函数 | 描述 |
|---|---|
| eq() | 用于获取当前jQuery对象所匹配的元素中指定索引的元素 |
| first() | 用于获取当前jQuery对象所匹配的元素中的第一个元素 |
| last() | 用于获取当前jQuery对象所匹配的元素中的最后一个元素 |
| has() | 用于筛选出包含特定后代的元素 |
| hasClass() | 用于指示当前jQuery对象所匹配的元素是否含有指定的css类名 |
| filter() | 用于筛选出符合指定表达式的元素 |
| is() | 用于判断当前jQuery对象所匹配的元素是否符合指定的表达式 |
| map() | 用于处理当前jQuery对象匹配的所有元素，并将处理结果封装为新的数组 |
| not() | 用于从匹配元素中删除符合指定表达式的元素，并以jQuery对象的形式返回保留的元素。 |
| slice() | 用于选取匹配元素中一段连续的元素，并以jQuery对象的形式返回 |
jQuery DOM 调用过滤的相关方法，会从jQueryDOM集合中取出满足条件的元素，组成的新的jQuery DOM
- 调用过滤方法的jQueryDOM和返回的jQueryDOM，不一样，指向的元素不同。
- 过滤方法返回的jQueryDOM是调用方法jQueryDOM的子集。
console.log($("#one").hasClass("abc"));// false
console.log($("#two").hasClass("my"));// true
$("ul li").slice(1).css("border","1px solid green"); 索引为1的后面都发生变化
$("div").filter(function (index,ele) {
console.log(index,ele,$(ele))//索引 div jqDOM
console.log(this === ele);// true
console.log(this.innerText) //1 2 3
console.log($(this).text()) //1 2 3
})
var arr = [1,2,3,4];
//[1,2,3,4]
var arr2 = arr.map(function (item) {
return item+1;
})
console.log(arr2);// map非常重要重要重要 2 3 4 5
console.log(arr2 === arr);// false
3.2 查找方法
| 函数 | 描述 |
|---|---|
| children() | 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 |
| find(） | 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法 |
| parent() | 取得一个包含着所有匹配元素的唯一父元素的元素集合 |
| parents() | 取得一个包含着所有匹配元素的祖先元素的元素集合 |
| parentsUntil() | 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 |
| offsetParent() | 返回第一个匹配元素用于定位的父节点。 |
| next() | 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合 |
| nextAll() | 查找当前元素之后所有的同辈元素 |
| nextUntil() | 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止 |
| prev() | 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 |
| prevall() | 查找当前元素之前所有的同辈元素 |
| prevUntil() | 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止 |
| siblings() | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合 |
| closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 |
3.3 串联方法
| 函数 | 描述 |
|---|---|
| add() | 把与表达式匹配的元素添加到jQuery对象中 |
| andSelf() | 加入先前所选的加入当前元素中 |
| addBack | 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器 |
| contents | 查找匹配元素内部所有的子节点（包括文本节点） |
| end() | 回到最近的一个"破坏性"操作之前 |
具有破坏性操作的方法： 筛选器方法
不具有破坏性操作的方法： css() addClass() removeClass() 等
3.4 其他方法
map(callback) 返回新的jQueyDOM，新对象中的成员取决与每次回调函数的返回值（功能与数组的map方法相似）
is(selector) 返回布尔值，判断调用该方法的jQueyDOM是否满足选择器条件
四 DOM操作：元素的创建、添加、删除、克隆
4.1 内部插入（添加子元素）
append() 子元素添加到最后面，父元素调用添加子元素，参数是子元素； 参数形式：原生DOM、jQueryDOM、html字符串
appendTo() 子元素调用插入到父元素中，参数是父元素； 参数形式：原生DOM、jQueryDOM、选择器（字符串）
prepend() 子元素添加到最前面
prependTo()
$box.append(''
);
$(''
).appendTo($box)
4.2 外部插入(添加兄弟元素)
after() 已经存在的元素调用
insertAfter() 新元素调用
before()
insertBefore()
4.3 包裹
wrap() 给jQueryDOM中的每个元素都添加一父元素
wrapAll() 给jQueryDOM中的元素添加一个共同的父元素
wrapInner() 在元素和资源股或内容至今包裹一层元素
unwrap() 删除父元素
是字符串，加￥是jq对象来使用
4.4 替换
repalceWith() 旧的元素调用，参数是新元素； 新的会替换掉旧的。
replaceAll() 新的元素调用，参数是旧的
二者区别同 append 和 appendTo 的区别是一样的！
旧元素.replaceWith(新元素)
新元素.replaceAll(旧元素)
4.5 删除
| 函数 | 描述 |
|---|---|
| empty() | 清空此节点下的所有子节点 |
| remove() | 从DOM中删除所有匹配的元素 |
| detach() | 从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来 |
remove和detach的区别：
都有返回值
4.6 克隆
clone()
clone()方法中传递参数true,它的含义是复制元素的同时复制元素所绑定的事件,否则不会复制事件
五 属性和样式操作
5.1 属性操作
① 属性操作
| 函数 | 描述 |
|---|---|
| attr() | 设置或返回被选元素的属性值 |
| removeAttr() | 从每一个匹配的元素中删除一个属性，不论内置还是自定义 |
| prop() | 获取在匹配的元素集中的第一个元素的属性值 |
| removeProp() | 用来删除由.prop()方法设置的属性集 |
prop() 和 attr() 只有一个参数，获取某个属性的值； 两个参数是设置
获取属性值，只获取jQueryDOM集合中第一个元素的属性值。
设置属性值，jQueryDOM集合中所有的元素都会被设置。
prop设置的removeProp才能删除
attr 方法与 prop 方法有什么区别
prop 获取或设置内置属性
attr 获取或设置写在标签上的属性
② data- 开头的自定义属性
data() 获取或设置 data- 开头的自定义属性
③ 类名操作
addClass() 为每个匹配的元素添加指定的类名
removeClass() 从所有匹配的元素中删除全部或者指定的类
toggleClass() 如果存在（不存在）就删除（添加）一个类
hasClass() 返回布尔值 检查当前的元素是否含有某个特定的类，如果有，则返回true
④ 代码/文本/值
html() 获取或设置元素中的html内容 类似于原生DOM的 innerHTML
text() 获取或设置元素中的文本内容 类似于原生DOM中 textContent
val() 获取或设置表单控件的值
没有参数是获取，有参数是设置！
val和value使用时，val没有值就是清空value的值。defaultvalue默认值
$("input[name=userName]").focus(function () {
// console.log("获得焦点",$(this).val())
if($(this).val() === "请输入你的用户名"){
$(this).val("")
}
}).blur(function () {
console.log("失去焦点",this.value,this.defaultValue)
if($(this).val() === ""){
$(this).val("请输入你的用户名")
}
})
5.2 样式操作
① css 方法
// css 设置样式
$('#box').css('background', '#f90');
// 使用 css 方法同时设置多个 css 样式
$('#box').css({
'background': '#ccc',
'box-shadow': '3px 3px 3px red'
});
// 获取元素的样式 注意获取的是计算样式
console.log($('#box').css('border'));
console.log($('#box').css('font-size'));
② 元素的位置
offset() 设置或者获取元素的位置； 获取元素的位置不需要给参数，返回对象，对象中有属性 left 和 top
设置元素的位置，需要设置一个有left和top属性的对象作为参数
操作的是元素在整个页面（根元素）上的位置
position() 只能获取位置，无法设置；获取元素在包含块上的位置。
scrollLeft() 获取或设置元素内容的位置；相当于原生DOM的scrollLeft属性
scrollTop() 获取或设置元素内容的位置；相当于原生DOM的scrollTop属性
③ 元素的尺寸
width() / height() 获取或设置元素内容的大小
innerWidth() / innerHeight() 获取或设置元素内容+内边距的大小
outerWidth() / outerHeight() 获取或设置元素总的大小（内容+内边距+边框）
六 jQuery 中的事件机制
页面对不同访问者的响应叫做事件。
JQuery中的事件有很多，有可以通过鼠标触发的，也有通过键盘触发的，当然还有典型的页面加载事件。这些事件都能通过JQuery代码来实现，而且相比JaveScript代码会更简洁，代码量也更少一些，
6.1 绑定事件
| 语法 | 描述 |
|---|---|
| eventName(fn) | 绑定对应事件名的监听 |
| on(eve,[sel],[data],fn) | 1.7+ 在被选元素及子元素上添加一个或多个事件处理程序 |
| bind(type,[data],fn) | 3.0- 请使用on() |
| one(type,[data],fn) | 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数 |
① 事件名作为方法
$(dom).click(callback)
$("button").click(function () {
console.log("单击")
})
② on 方法监听事件
$(dom).on('事件名', callback)
$("button").on("dblclick",function () {
console.log("on 双击")
})
③ 事件只监听一次
$(dom).one('事件名', callback)
$("button").one("click",function () {
console.log("单击，只能触发一次")
})
6.2 解除事件绑定
| 语法 | 描述 |
|---|---|
| off(eve,[sel],[fn]) | .7+ 在选择元素上移除一个或多个事件的事件处理函数 |
| unbind(t,[d|f]) | 3.0- 请使用off() |
$(dom).off()
off() 可以指定要解除的事件，如果没有参数解除元素上所有的事件
不论是任何方式添加的事件，off() 都可以解除
$("button").eq(1).on("click",function () {
console.log("on-->click");
})
$("button").eq(3).click(function () {
$("button").eq(0).off("click").off("dblclick")
$("button").eq(1).off("click")
})
6.3 使用代码触发事件
① 第一种方式 把事件作为方法调用
$(dom).click()； // 不能有参数，触发 click 行为
② 第二种方式 使用trigger方法（推荐）
$(dom).trigger('事件名');
七 jQuery 筛选器方法
在已经获取到了元素（jQueryDOM）的时候，通过方法获取与之关联的其他元素
7.1 过滤方法
| 函数 | 描述 |
|---|---|
| eq() | 用于获取当前jQuery对象所匹配的元素中指定索引的元素 |
| first() | 用于获取当前jQuery对象所匹配的元素中的第一个元素 |
| last() | 用于获取当前jQuery对象所匹配的元素中的最后一个元素 |
| has() | 用于筛选出包含特定后代的元素 |
| hasClass() | 用于指示当前jQuery对象所匹配的元素是否含有指定的css类名 |
| filter() | 用于筛选出符合指定表达式的元素 |
| is() | 用于判断当前jQuery对象所匹配的元素是否符合指定的表达式 |
| map() | 用于处理当前jQuery对象匹配的所有元素，并将处理结果封装为新的数组 |
| not() | 用于从匹配元素中删除符合指定表达式的元素，并以jQuery对象的形式返回保留的元素。 |
| slice() | 用于选取匹配元素中一段连续的元素，并以jQuery对象的形式返回 |
jQuery DOM 调用过滤的相关方法，会从jQueryDOM集合中取出满足条件的元素，组成的新的jQuery DOM
- 调用过滤方法的jQueryDOM和返回的jQueryDOM，不一样，指向的元素不同。
- 过滤方法返回的jQueryDOM是调用方法jQueryDOM的子集。
console.log($("#one").hasClass("abc"));// false
console.log($("#two").hasClass("my"));// true
$("ul li").slice(1).css("border","1px solid green"); 索引为1的后面都发生变化
$("div").filter(function (index,ele) {
console.log(index,ele,$(ele))//索引 div jqDOM
console.log(this === ele);// true
console.log(this.innerText) //1 2 3
console.log($(this).text()) //1 2 3
})
var arr = [1,2,3,4];
//[1,2,3,4]
var arr2 = arr.map(function (item) {
return item+1;
})
console.log(arr2);// map非常重要重要重要 2 3 4 5
console.log(arr2 === arr);// false
7.2 查找方法
| 函数 | 描述 |
|---|---|
| children() | 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 |
| find(） | 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法 |
| parent() | 取得一个包含着所有匹配元素的唯一父元素的元素集合 |
| parents() | 取得一个包含着所有匹配元素的祖先元素的元素集合 |
| parentsUntil() | 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 |
| offsetParent() | 返回第一个匹配元素用于定位的父节点。 |
| next() | 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合 |
| nextAll() | 查找当前元素之后所有的同辈元素 |
| nextUntil() | 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止 |
| prev() | 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 |
| prevall() | 查找当前元素之前所有的同辈元素 |
| prevUntil() | 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止 |
| siblings() | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合 |
| closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 |
7.3 串联方法
| 函数 | 描述 |
|---|---|
| add() | 把与表达式匹配的元素添加到jQuery对象中 |
| andSelf() | 加入先前所选的加入当前元素中 |
| addBack | 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器 |
| contents | 查找匹配元素内部所有的子节点（包括文本节点） |
| end() | 回到最近的一个"破坏性"操作之前 |
具有破坏性操作的方法： 筛选器方法
不具有破坏性操作的方法： css() addClass() removeClass() 等
7.4 其他方法
map(callback) 返回新的jQueyDOM，新对象中的成员取决与每次回调函数的返回值（功能与数组的map方法相似）
is(selector) 返回布尔值，判断调用该方法的jQueyDOM是否满足选择器条件
八 DOM操作：元素的创建、添加、删除、克隆
8.1 内部插入（添加子元素）
append() 子元素添加到最后面，父元素调用添加子元素，参数是子元素； 参数形式：原生DOM、jQueryDOM、html字符串
appendTo() 子元素调用插入到父元素中，参数是父元素； 参数形式：原生DOM、jQueryDOM、选择器（字符串）
prepend() 子元素添加到最前面
prependTo()
$box.append(''
);
$(''
).appendTo($box)
8.2 外部插入(添加兄弟元素)
after() 已经存在的元素调用
insertAfter() 新元素调用
before()
insertBefore()
8.3 包裹
wrap() 给jQueryDOM中的每个元素都添加一父元素
wrapAll() 给jQueryDOM中的元素添加一个共同的父元素
wrapInner() 在元素和资源股或内容至今包裹一层元素
unwrap() 删除父元素
是字符串，加￥是jq对象来使用
8.4 替换
repalceWith() 旧的元素调用，参数是新元素； 新的会替换掉旧的。
replaceAll() 新的元素调用，参数是旧的
二者区别同 append 和 appendTo 的区别是一样的！
旧元素.replaceWith(新元素)
新元素.replaceAll(旧元素)
8.5 删除
| 函数 | 描述 |
|---|---|
| empty() | 清空此节点下的所有子节点 |
| remove() | 从DOM中删除所有匹配的元素 |
| detach() | 从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来 |
remove和detach的区别：
都有返回值
8.6 克隆
clone()
clone()方法中传递参数true,它的含义是复制元素的同时复制元素所绑定的事件,否则不会复制事件
九 属性和样式操作
9.1 属性操作
① 属性操作
| 函数 | 描述 |
|---|---|
| attr() | 设置或返回被选元素的属性值 |
| removeAttr() | 从每一个匹配的元素中删除一个属性，不论内置还是自定义 |
| prop() | 获取在匹配的元素集中的第一个元素的属性值 |
| removeProp() | 用来删除由.prop()方法设置的属性集 |
prop() 和 attr() 只有一个参数，获取某个属性的值； 两个参数是设置
获取属性值，只获取jQueryDOM集合中第一个元素的属性值。
设置属性值，jQueryDOM集合中所有的元素都会被设置。
prop设置的removeProp才能删除
attr 方法与 prop 方法有什么区别
prop 获取或设置内置属性
attr 获取或设置写在标签上的属性
② data- 开头的自定义属性
data() 获取或设置 data- 开头的自定义属性
③ 类名操作
addClass() 为每个匹配的元素添加指定的类名
removeClass() 从所有匹配的元素中删除全部或者指定的类
toggleClass() 如果存在（不存在）就删除（添加）一个类
hasClass() 返回布尔值 检查当前的元素是否含有某个特定的类，如果有，则返回true
④ 代码/文本/值
html() 获取或设置元素中的html内容 类似于原生DOM的 innerHTML
text() 获取或设置元素中的文本内容 类似于原生DOM中 textContent
val() 获取或设置表单控件的值
没有参数是获取，有参数是设置！
val和value使用时，val没有值就是清空value的值。defaultvalue默认值
$("input[name=userName]").focus(function () {
// console.log("获得焦点",$(this).val())
if($(this).val() === "请输入你的用户名"){
$(this).val("")
}
}).blur(function () {
console.log("失去焦点",this.value,this.defaultValue)
if($(this).val() === ""){
$(this).val("请输入你的用户名")
}
})
9.2 样式操作
① css 方法
// css 设置样式
$('#box').css('background', '#f90');
// 使用 css 方法同时设置多个 css 样式
$('#box').css({
'background': '#ccc',
'box-shadow': '3px 3px 3px red'
});
// 获取元素的样式 注意获取的是计算样式
console.log($('#box').css('border'));
console.log($('#box').css('font-size'));
② 元素的位置
offset() 设置或者获取元素的位置； 获取元素的位置不需要给参数，返回对象，对象中有属性 left 和 top
设置元素的位置，需要设置一个有left和top属性的对象作为参数
操作的是元素在整个页面（根元素）上的位置
position() 只能获取位置，无法设置；获取元素在包含块上的位置。
scrollLeft() 获取或设置元素内容的位置；相当于原生DOM的scrollLeft属性
scrollTop() 获取或设置元素内容的位置；相当于原生DOM的scrollTop属性
③ 元素的尺寸
width() / height() 获取或设置元素内容的大小
innerWidth() / innerHeight() 获取或设置元素内容+内边距的大小
outerWidth() / outerHeight() 获取或设置元素总的大小（内容+内边距+边框）
十 jQuery 中的事件机制
页面对不同访问者的响应叫做事件。
JQuery中的事件有很多，有可以通过鼠标触发的，也有通过键盘触发的，当然还有典型的页面加载事件。这些事件都能通过JQuery代码来实现，而且相比JaveScript代码会更简洁，代码量也更少一些，
10.1 绑定事件
| 语法 | 描述 |
|---|---|
| eventName(fn) | 绑定对应事件名的监听 |
| on(eve,[sel],[data],fn) | 1.7+ 在被选元素及子元素上添加一个或多个事件处理程序 |
| bind(type,[data],fn) | 3.0- 请使用on() |
| one(type,[data],fn) | 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数 |
① 事件名作为方法
$(dom).click(callback)
$("button").click(function () {
console.log("单击")
})
② on 方法监听事件
$(dom).on('事件名', callback)
$("button").on("dblclick",function () {
console.log("on 双击")
})
③ 事件只监听一次
$(dom).one('事件名', callback)
$("button").one("click",function () {
console.log("单击，只能触发一次")
})
10.2 解除事件绑定
| 语法 | 描述 |
|---|---|
| off(eve,[sel],[fn]) | .7+ 在选择元素上移除一个或多个事件的事件处理函数 |
| unbind(t,[d|f]) | 3.0- 请使用off() |
$(dom).off()
off() 可以指定要解除的事件，如果没有参数解除元素上所有的事件
不论是任何方式添加的事件，off() 都可以解除
$("button").eq(1).on("click",function () {
console.log("on-->click");
})
$("button").eq(3).click(function () {
$("button").eq(0).off("click").off("dblclick")
$("button").eq(1).off("click")
})
10.3 使用代码触发事件
① 第一种方式 把事件作为方法调用
$(dom).click()； // 不能有参数，触发 click 行为
② 第二种方式 使用trigger方法（推荐）
$(dom).trigger('事件名');
riggleHandler:句柄：干什么事，去干什么，不支持连缀写法
triggerHandler(type, [data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡
这个方法的行为表现与trigger类似，但有以下三个主要区别：
- 第一，他不会触发浏览器默认事件。
- 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
- 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
10.4 事件委托（委派）
$(dom).on('事件名', 'selector', callback);
思路与原生js实现委托是一致，也是把事件添加到祖先元素上，再判断目标元素。
$("button").click(function () {
//console.log($("ul li").length);
$("" ).text($("ul li").length+1)
.appendTo($("ul"));
})
$("ul").on("click","li",function () {
$(this).css({
border:"1px solid red"
})
})
10.5 事件切换
| 语法 | 描述 |
|---|---|
| hover([over,]out) | 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法 |
| toggle([spe],[eas],[fn]) | 1.9- 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件 |
10.6 jQuery 特有的事件
hover() 鼠标进入和离开元素都触发，mouseenter 和 mouseleave 的结合
focusin() 监听给表单控件的父元素，表单控件获取焦点，就触发
focusout() 监听给表单控件的父元素，表单控件失去焦点，就触发
原生的 js 事件，jquey 基本都有
//1.7版js
$("#app").focusin(function () {
console.log(123,this);
$(this).css({
background:"green"
})
}).focusout(function () {
$(this).css({
background:"yellow"
})
})
10.7 事件列表
鼠标事件：
click([[data],fn]) 单击
dblclick([[data],fn]) 双击
mousedown([[data],fn]) 鼠标按键按下
mouseup([[data],fn]) 鼠标按键抬起
mousemove([[data],fn]) 鼠标移动
mouseover([[data],fn]) 鼠标悬停在元素
mouseout([[data],fn]) 鼠标离开元素
mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
表单事件：
blur([[data],fn]) 失去焦点
focus([[data],fn]) 获取焦点
change([[data],fn]) 变化
select([[data],fn]) 输入框文本被选中
submit([[data],fn]) 表单提示时
focusin([data],fn) 当元素获得焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
focusout([data],fn) 当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
键盘事件：
keydown([[data],fn]) 键盘按键按下
keypress([[data],fn]) 键盘按键按下，只有可输入字符按键才能触发
keyup([[data],fn]) 键盘按键抬起
文档和窗口事件：
resize([[data],fn]) 窗口尺寸变化
scroll([[data],fn]) 窗口滚动
unload([[data],fn]) 离开文档 1.8-
图片事件：
error([[data],fn]) 加载错误 1.8-
10.8 事件对象
- 属性
event.currentTarget 在事件冒泡阶段中的当前DOM元素
event.data 当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
event.delegateTarget 1.7+ 当currently-called的jQuery事件处理程序附加元素
event.namespace 当事件被触发时此属性包含指定的命名空间
event.pageX 鼠标相对于文档的左边缘的位置
event.pageY 鼠标相对于文档的顶部边缘的位置
event.relatedTarget 在事件中涉及的其它任何DOM元素
event.result 这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined
event.target 最初触发事件的DOM元素
event.timeStamp 返回事件触发时距离1970年1月1日的毫秒数
event.type 事件类型
event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮
- 方法
event.preventDefault() 阻止默认事件行为的触发
event.isDefaultPrevented() 根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值
event.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
event.isPropagationStopped() 检测 event.stopPropagation() 是否被调用过
event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
event.isImmediatePropagation() 检测 event.stopImmediatePropagation() 是否被调用过
10.9 常用Event 对象
jQuery 事件的回调函数中也可以获取都 event 对象，与原生的 Event 对象类似，属性方法都是一样的。
属性：
clientX/clientY
pageX/pageY
offsetX/offsetY
screenX/screenY
button
target
keyCode 按键的ascii码
which 按键的ascii码
key 按键的值
方法：
preventDefault() 阻止默认行为
stopPropagation() 阻止冒泡
注意：
jQuery 事件的回调函数中，
return false既可以阻止默认行为右可以阻止冒泡！原生 js 事件回调函数中
return false只能阻止默认行为！
十一 动画效果
11.1 基本动画效果
show([s,[e],[fn]]) 显示隐藏的匹配元素
hide([s,[e],[fn]]) 隐藏显示的元素
toggle([s],[e],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
- 方法如果没有参数就是瞬间隐藏和显示，设置动画的执行时间作为参数，用数字（单位毫秒）或者关键字
- 动画执行过程中，变化的样式有：width/height 内边距、外边距、边框宽度、opacity
jQuery 动画的特点：
- 给元素调用了多个动画方法，会按照顺序依次执行，前面动画执行结束了后面动画才开始
- 如果操作需要在动画执行结束之后进行，动画方法第二个参数是回调函数，动画执行结束之后回调函数会执行。
参数详解：
speed : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn : 在动画完成时执行的函数，每个元素执行一次。
opacity : (用户fadeTo)一个0至1之间表示透明度的数字。
params : 一组包含作为动画属性和终值的样式属性和及其值的集合
// 显示
$("button").eq(0).click(function () {
$("#app").show(1000);
})
// 隐藏
$("button").eq(1).click(function () {
// 指定完成动画的时间单位毫秒。
// $("#app").hide("fast");// 快 200
// $("#app").hide("slow");// 慢 600
// $("#app").hide("normal");// 400
11.2 滑动效果
slideDown([s],[e],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([s,[e],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn]) 通过高度变化来切换所有匹配元素的可见性
- 设置动画的执行时间作为参数，用数字（单位毫秒）或者关键字； 没有参数也有动画执行事件。
- 动画执行过程中，变化的样式有：高度、上下内边距、上下外边距。
// slideUp
$("button").eq(0).click(function () {
// $("#app").slideUp("fast");
$("#app").slideUp(2000);
})
// slideDown
$("button").eq(1).click(function () {
$("#app").slideDown(2000);
})
// slideToggle
$("button").eq(2).click(function () {
$("#app").slideToggle(2000);
})
11.3 淡入淡出效果
fadeIn([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
- 设置动画的执行时间作为参数，用数字（单位毫秒）或者关键字； 没有参数也有动画执行事件。
- 动画执行过程中，变化的样式有：opacity。
// 淡入
$("button").eq(0).click(function () {
$("#app").fadeIn(1000);
})
// 淡出
$("button").eq(1).click(function () {
$("#app").fadeOut(1000);
})
// 切换
$("button").eq(2).click(function () {
$("#app").fadeToggle(1000);
})
$("button").eq(3).click(function () {
$("#app").fadeTo(1000,0);
})
案例:图片上下自由切换
$(function () {
setInterval(()=>{
$(".appContainer li").last().fadeTo(0,0).hide().prependTo(".appContainer ul").slideDown(200).fadeTo(300,1);
},3000)
})
11.4 自定义动画
animate(params, speed [,fn])
第一个参数是对象，指定变化的 css 属性，只有以长度位置的css属性才能有效果
属性的值可以设置为
toggle, 会来回切换
// 隐藏
$("button").eq(0).click(function () {
$("#app").animate({
width:0,
height:0
},2000);
})
11.5 动画控制的方法
stop() 停止执行当前元素上的动画，动画执行到哪里就停到哪里
finish() 停止当前元素上的动画，队列中所有的动画会被快速完成，处于最后的状态
delay(time) 延迟执行
注意: 因为动画队列的存在，给某个元素执行了动画方法，所有的动画效果都会依次执行；所以，我们给元素执行某个动画效果的时候先把前面的动画都停掉（stop）
$("button").eq(1).click(function () {
$("#app").stop();
})
$("button").eq(2).click(function () {
$("#app").finish();
})
$("button").eq(3).click(function () {
$("#app").hide(1000).delay(1000).slideDown(1000);
})
11.6 设置
//关闭页面上所有的动画
jQuery.fx.off = true;
十二 工具和其他操作
12.1、 jQuery 对象访问
each(callback) 遍历jquery dom
size() 1.8- 返回dom集合中的个数 同length
length 返回dom集合中的个数
selector 返回选择器
context 返回原生js dom
get([index]) 获取dom集合中一个
index([selector|element]) 索引值
toArray() 转为纯数组
12.2 、数组和对象操作
$.each(object,[callback]) 遍历数组 对象
$.extend([d],tgt,obj1,[objN]) 合并对象 合并到第一个参数
$.grep(array,fn,[invert]) 过滤数组
$.makeArray(obj) 把类数组对象变为数组
$.map(arr|obj,callback) 操作数组的每一单元
$.inArray(val,arr,[from]) 判断值是否在数组中
$.merge(first,second) 合并数组
$.unique(array) 去重
$.parseJSON(json) 解析json
$.parseXML(data) 解析xml
12.3、 类型检测
$.contains(c,c) 判断一个元素是否是另一个元素的后代吗元素
$.type(obj) 判断类型
$.isarray(obj) 是否为数组
$.isFunction(obj) 是否是function
$.isEmptyObject(obj) 是否为空对象
$.isPlainObject(obj) 是否为纯粹的对象
$.isWindow(obj) 是否是window对象
$.isNumeric(value) 1.7+是否是number
12.4、 其他操作
$.trim(str) 去除左右两边的空格
$.param(obj,[traditional]) 把对象或数组 转为 特殊格式的字符串 序列化
十三 jQuery 插件
13.1、 jQuery 插件的网站
- http://plugins.jquery.com/ 官网
- http://www.jq22.com/ jQuery插件库
- http://www.htmleaf.com/ jQuery 之家
- http://www.jq-school.com/ jQuery-school
13.2、 经典jQuery插件
13.2.1、 select2 下拉框搜索插件
-
官网 https://select2.org/
-
github https://github.com/select2/select2
-
用法
导入css 导入js//调用插件 用法一 $("#mySelect01").select2(); //调用插件 用法二 $("#mySelect02").select2({ width: 150, data: [ {id:1, text:"小明"}, {id:2, text:"小强"}, {id:3, text:"小李"}, {id:4, text:"小张"}, {id:5, text:"小王"}, ] }); //调用插件 用法三 $("#mySelect03").select2({ width: 150, ajax: { url: "http://unclealan.cn/address.php", dataType: "json", processResults: function(data){ //对响应内容进行处理 var resList = []; $.each(data, function(index, item){ resList.push({id:item.id, text:item.name}) }); //返回结果 return { results: resList, "pagination": { "more": true } } } } })
13.2.2、 datetimepicker 时间日期插件
-
github https://github.com/xdan/datetimepicker
-
文档 https://xdsoft.net/jqplugins/datetimepicker/
-
用法
//设置语言 $.datetimepicker.setLocale('zh'); //调用插件 $(dom).datetimepicker({ datepicker: true, timepicker: true, format:"Y-m-d H:i", value: "2025-12-23"， .... });
13.2.3、 fullpage 全屏滚动插件
-
官网 https://alvarotrigo.com/fullPage/zh/
-
github https://github.com/alvarotrigo/fullpage.js/
-
用法
<div id="fullpage"> <div class="section">div> <div class="section"> <div class="slide">div> <div class="slide">div> <div class="slide">div> div> <div class="section">div> <div class="section">div> div> 自定义的导航 卸载包裹元素的外面 <script> $("#fullpage").fullpage({ navigation: true, sectionsColor: ["orange", "skyblue", "pink", "#369"], navigationTooltips: ['第一页', '第二页','第三页', '第四页'], showActiveTooltip: false, slidesNavigation: false, anchors: ["firstPage", "secondPage", "thirdPage", "forthPage"] }); script>
13.2.4、 lazyload 图片懒加载
-
官网 https://appelsiini.net/projects/lazyload/
-
github https://github.com/tuupola/jquery_lazyload/tree/2.x
-
用法
$("#lazyWrapper img").lazyload()
13.2.5、 layer 弹窗插件
-
官网 http://layer.layui.com/?alone
-
github https://github.com/sentsin/layer/
-
用法
layer.alert() layer.confirm() layer.msg() layer.load() layer.tips() layer.colse() layer.open({ type: , title: , content: .... }) ...
13.2.6、 nice validator 表单验证
-
官网 https://validator.niceue.com/
-
github https://github.com/niceue/nice-validator
-
用法
$("form").validator({ })
13.2.7、 jQuery-easing
-
官网 http://gsgd.co.uk/sandbox/jquery/easing/
-
github https://github.com/gdsmith/jquery.easing
-
用法
$(dom).hide(speed, easing, fn)
13.3、 自定义jQuery 插件
jQuery.fn.extend() 给jQueryDom扩展方法
$.fn.extend({
方法名:function(){}
})
//或者
$.fn.方法名 = function(){
}
jQuery.extend() 给jQuery 对象本身扩展方法
$.extend({
方法名: function(){
}
})
13.4、 jQuery UI
- 官网 https://jqueryui.com/
13.5、 jQueryMobile
- 官网 https://jquerymobile.com/
- 教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html
13.6、 Sizzle
- 官网 https://sizzlejs.com/
13.7、 Zepto
- 官网 http://zeptojs.com/
- 与jquery区别： https://www.zhihu.com/question/25379207