笔记：全网最详细jQuery教程
申明：本篇博客是学习舟炬教育课程：全网最详细jQuery讲解的课程笔记。
前言：在华为实习的两个月时间中，接触了jQuery，因为所做的前端工作是基于Angular框架的，本身有许多需求在实现的时候都会比较复杂，在这个过程中，如果遇到比较难实现的需求，就会使用jQuery。这时候的jQuery仿佛是个消防员一样的存在。所以在现在vue等框架盛行的情况下，觉得还是有学习了解jQuery的必要，毕竟它提供了许多实现需求的方式方法，所以可以作为储备来学习。
目录
一、jQuery基础
1、获取jQuery
2、jQuery版本介绍
3、jQuery的兼容性引用方式
4、jQuery的使用
5、jQuery的特点
6、jQuery DOM对象
7、jQuery全局对象
二、jQuery选择器
三、jQuery属性与样式操作
1、属性操作：两个方法：attr()和prop()
2、CSS类操作
3、HTML代码/文本/值
四、jQuery样式操作
1、CSS操作
2、位置
3、尺寸
五、jQuery中的筛选操作
1、过滤操作
2、查找
3、串联
4、jQuery DOM对象的方法
六、jQuery DOM操作
1、创建元素
2、内部插入
3、外部插入
4、包裹
5、替换
6、删除
7、克隆
七、jQuery事件
1、事件绑定
2、解除事件绑定
3、事件委派
4、控制事件触发
5、事件列表（新增）
6、事件对象（event对象）属性
八、jQuery动画
九、jQuery ajax
1、快速请求方法
2、ajax方法
3、表单方法
4、处理json数据
十、jQuery 工具方法
1、数组对象方法
2、函数方法
3、类型判断
4、字符串
5、版本
十一、jQuery插件
1、jQuery插件的网站
2、经典jQuery插件
2.1 select2 下拉框搜索插件推荐
2.2 经典datetimepicker时间日期插件
2.3 fullpage全屏滚动插件
2.4 lazyload图片懒加载
2.5 layer弹窗
2.6 nice valldator表单验证
2.7 jQuery-easing
3、自定义jQuery插件
4、jQuery UI
5、jQuery Mobile
6、Sizzle
一、jQuery基础
1、获取jQuery
方式一：官网下载
方式二：npm下载安装
方式三：CDN引用（推荐），使用第三方服务器上的jQuery文件，加载速度快。
2、jQuery版本介绍
jQuery2.0以上的版本，不兼容IE8及以下版本。
3、jQuery的兼容性引用方式
4、jQuery的使用
//jQuery入口
$(document).ready(function(){
//自己的代码
})
//jQuery入口简写
$(function(){
//自己的代码
})$(document).ready(function(){})事件和window.οnlοad=function(){}的区别：
ready表示页面中DOM加载完毕后触发；
onload表示页面中所有一切加载完毕后触发，包括一些图片资源。所以实际应用中ready更合理实用一些。
5、jQuery的特点
便捷的DOM操作；强大的选择器；链式操作；可靠的事件机制；封装了简单易用的Ajax操作；兼容性处理；丰富的插件。
6、jQuery DOM对象
对于原生方法如：var box = document.querySelector("#app")取得的DOM对象，称为原生DOM对象；
对于jQuery方法如：var $box = $("#app")取得的DOM对象，称为jQuery DOM对象；
jQuery DOM本质上是由该选择器下的所有原生DOM组成的类数组集合（类数组是我自己加的，不知道准不准确）。所以可以通过索引值，将jQuery DOM转换成原生DOM。如：如果该选择器下只有一个原生DOM的话，$box[0]即可。（$box是前面选择到的jQuery DOM对象）。
原生DOM对象转换为jQuery DOM对象：$(原生DOM对象)，如$(box)，用$方法，传入原生DOM对象，即可转换为jQuery DOM对象。
7、jQuery全局对象
引入jQuery之后，即存在了一个全局变量，这个变量的名字叫jQuery，别名是$.所以 $ === jQuery（！！！终于知道$到底是个啥了）
$的作用到底有哪些？根据参数形式不同，$可以实现不同的功能。
===>1、参数是字符串时充当选择器。 如：$("#app").width(100)等
2、参数是对象时，充当方法。将原生DOM对象转换为jQuery DOM对象。其实$(document)本身就是把原生DOM对象document转换成了jQuery DOM对象。
3、参数是字符串，里面是元素标签。可以创建一个DOM元素。如：$("
").html("xxx").appendTo("#app").
二、jQuery选择器
特性：js中的选择器与CSS选择器不同，没有优先级之分，谁写在后面，谁就显示；覆盖前面的相同属性。
1、基本选择器
id选择器#Idname、类选择器.className、标签选择器tagName、全局选择器、组合选择器
2、层级选择器
后代元素：selector selector
子元素：selector>selector
并列元素：selectorselector
相邻兄弟元素：selector+selector（后面紧邻的一个兄弟元素）
兄弟元素：selector~selector（后面所有的兄弟元素）
3、筛选选择器
在选择器后加冒号，之后选择第一个:first/最后一个:last/第奇数个:odd/第偶数个:even/第N个:eq(index)索引从零开始/大于某个数:gt/小于某个数:lt/排除:not(选择器)/指定语言:lang(语言)/过滤出锚点正在指向的元素:target/过滤出根元素:root/过滤获取焦点的元素:focus/所有的标题标签:header/:animated正在执行动画（jQuery动画）的元素
4、内容选择器
.contains(text)包含指定文本
.has(selector) 包含满足条件的后代元素的元素
.empty 没有内容也没有子元素
.parent 跟empty相反，有内容或者有子元素
5、可见性选择器
:hidden 不可见元素
:visible 可见元素 感觉还挺有用的，可以把页面里所有的元素圈出来，方便布局和debug
6、属性选择器
可以选择包含某些属性以及满足特定属性正则匹配条件的标签
如：$("img[src*='d'][alter]")表示包含src和alter属性，并且src属性名中包含'd'字符。
[attrName]表示包含该属性；
[attrName=value]等于/[attrName!=value]不等于/[attrName^=value]以。。。开头/[attrName$=value]以。。。结尾/[attrName*=value]包含。。。
7、子元素选择器
$("li:first-child")取所有的li元素的第一个子元素。:last-child和nth-child(index)与之类似。不过此时的index从1开始。此外还有nth-last-child(index)，这里是从后往前索引。:only-child表示唯一的子元素。
此外，子元素选择器还有first-of-type/last-of-type/nth-of-type(index)/nth-last-of-type(index)/only-of-type，这一类型的选择器与-child不同的地方在于，-child选择的是所有子元素排序里的某一个，而-of-type选择的是所有子元素里相同元素的排序里的某一个。所以，-child有可能会存在满足排序顺序但是不是满足的元素类型，导致没有元素被选中的结果。而-of-type则不会。
8、表单选择器
:input 表示选择所有的表单控件。有：input/textarea/button/select/form/label/fieldset/legend/optgroup/option/datalist/keygen/output
:text/:password/:radio/:checkbox/:file/:reset 根据input的type值选择
:submit 所有有提交功能的按钮，包括button和input type="submit"
:button 表示选择button元素和input=button
9、表单对象选择器
:disabled/:enabled/:checked/:selected表示选择有相应属性的标签
10、混淆选择器
$.escapeSelector(selector) 当className或者idName有特殊符号时，用混淆选择器完成转义，之后进行字符串拼接，从而完成选择。
三、jQuery属性与样式操作
1、属性操作：两个方法：attr()和prop()
使用方法：$("img").attr("alt")、$("img").prop('alt')
两者的区别在于：attr获取的是所有的属性，包括内置属性和自定义属性，且得到的属性值与设置的属性值完全一致。而prop获取的只有HTML内置属性。如果获取的是一组jQuery对象，则获取的值是第一个对象的属性值。
原生js在操作DOM属性的时候，也有两种方法：对于内置属性，可以直接使用‘.’+属性名的方法，但是对于自定义属性，需要使用getAttribute或者setAttribute。
修改属性值：$("img").attr("title","你好") 可以修改内置属性和自定义属性。$("img").prop("title","我好") 只能修改内置属性。
添加属性值：同上，如果第一个参数不存在，就会添加属性值，同样的，attr可以添加内置属性和自定义属性，而prop只能添加内置属性。（如果使用prop添加自定义属性，则添加不到DOM对象去，但是如果查看该对象的这个属性却还是可以打印得出来。。。。。很神奇，不知道这个点存在的意义是什么。。。。而且removeProp也只能删除这一类由prop添加的自定义属性，并不能删除内置属性。。。。。很神奇）
删除属性值：上面说了removeProp。另外还有removeAttr，这个方法可以删除内置属性和自定义属性。比较靠谱，嗯。
2、CSS类操作
$(document).ready(function(){
//$(this)表示当前点击的元素
//判断该元素中有没有current class
if($(this).hasClass("current")){
//删除class值
$(this).removeClass("current");
} else {
//添加上class值
$(this).addClass("current");
}
//使用toggleClass方法可以切换current类的有无，代替上面判断和操作过程
$(this).toggleClass("current");
})3、HTML代码/文本/值
获取元素内的内容（包含标签元素文本元素等）：.html([html])方法，该方法相当于原生js里的innerHTML方法。该方法传入一个参数时是设置其内容。当添加的内容里有标签的时候，就会显示出该标签。
获取元素内的文本（文本元素）：.text([text])方法，该方法相当于原生js里的innerText方法。该方法传入一个参数时是设置其文本内容。如果内容中含有标签，也不会显示标签，而是显示纯文本。
val([val])方法：设置或获取表单控件里的值
四、jQuery样式操作
1、CSS操作
css(attr[,value])获取的是css计算属性，当传入两个参数的时候，可以实现赋值。其参数还可以是一个对象，方便赋值多个属性。
2、位置
offset()方法，返回一个对象，有.left属性和.top属性，获取的是元素的坐标。可以用来设置位置，属性为left/top。
position()方法，返回一个对象，有.left属性和.top属性，获取的是相对于第一个定位的祖先元素的坐标。只能获取位置，不能改变位置。
3、尺寸
width/height：内容的尺寸
innerWidth/innerHeight：内容的尺寸+padding
outerWidth/outerHeight：盒子的尺寸。
五、jQuery中的筛选操作
1、过滤操作
first()/last()/eq()/not()/filter()选取，与not相反/slice()截取/has()包含某个子元素
以上方法的返回值，都是jQuery DOM对象。
2、查找
children([selector]) 获取子元素
find(selector) 获取后代元素
parent([selector]) 获取父元素
parents([selector]) 获取所有的祖先元素（满足条件）
parentsUntil([selector]) 获取祖先元素集合（从父元素到选择器指定的祖先元素（不包括祖先元素自身））
offsetParent() 获取第一个定位的祖先元素
next([selector]) 紧邻在后面的兄弟元素
nextALL([selector]) 后面所有的兄弟元素
nextUntil([selector])
prev([selector]) 紧邻在前面的兄弟元素
prevAll([selector]) 前面所有的兄弟元素
prevUntil([selector])
siblings([selector]) 所有的兄弟元素
closest(selector) 从所有的祖先元素和本身里面找出第一个满足条件
3、串联
add() 把选中的元素加入当前集合
addBack() 把调用该方法的元素加入当前的集合
end() 返回最后一次破坏性操作之前的DOM
contents() 返回所有子节点的集合（包括元素节点、文本节点、注释节点、属性节点）
4、jQuery DOM对象的方法
each() 遍历
map() 返回新的集合
length 不是方法，是属性，表示集合中的元素数量
index() 返回该元素在父元素中的索引位置
get([index]) 返回集合指定索引的dom 对象，还可以把jquery dom集合转为纯数组（不传入参数的时候）
is(selector) 判断该jqdom对象是否满足某个条件，返回的是布尔值。
六、jQuery DOM操作
1、创建元素
$("
2、内部插入
append()
appendTo()
prepend()
prepentTo()
3、外部插入
after()
insertAfter()
before()
insertBefore()
4、包裹
wrap()
wrapAll()
wrapInner()
unwrap()
5、替换
replaceWith() 传入的参数需要是jquery dom，所以需要用$转换。
replaceAll() 其余replaceWith的关系相当于append和appendTo的关系。主语和宾语相反。
6、删除
empty() 清空。
remove() 移除。使用该方法返回的jq dom对象再重新添加到原来的集合时，不具有之前的方法和属性。
detach() 移除。使用该方法返回的jq dom对象再重新添加到原来的集合时，仍然具有之前的方法和属性。
7、克隆
clone()
七、jQuery事件
1、事件绑定
on(event,fn) 标准的绑定方式；
one(event,fn) 只能绑定一次；
on({"event",fn}) 传入对象参数，可以绑定多个事件；
此外，可以将事件作为dom对象的方法连续绑定多个事件，连贯操作。dom.event(fn).event(fn)...
2、解除事件绑定
off()方法
3、事件委派
selector集合.on(event,selector,fn)
4、控制事件触发
selector.trigger("event") 触发selector的event事件。其中，event可以是单击双击等事件。
selector.triggerHandler("event")
trigger和triggerHandler的区别：
1、trigger返回的是jquery dom，可以进行连贯操作，而triggerHandler不行。
2、trigger可以触发元素自带的事件，比如输入框的focus事件，表单按钮的submit事件，而triggerHandler不行。
3、trigger会触发集合中所有元素的事件，而triggerHandler只触发集合中第一个元素的事件。
5、事件列表（新增）
blur([[data],fn]) 失去焦点
focus([[data],fn]) 获取焦点
ready(fn) 页面加载完毕
focusin([data],fn) 获取焦点，绑定给输入框的父元素
focusout([data],fn) 失去焦点，绑定给输入框的父元素
mouseenter([[data],fn]) 代替mouseover（鼠标经过其子元素的时候也会触发），鼠标在该元素里只触发一次，不会受子元素影响。
mouseleave([[data],fn]) 代替mouseout，同上。
hover 鼠标进入和离开时都会触发。mouseenter和mouseleave的集合。
6、事件对象（event对象）属性
event.pageX 鼠标箭头的x坐标（相对于文档，而不是窗口）
event.pageY 鼠标箭头的y坐标（相对于文档，而不是窗口）
target 当前触发事件的元素
which 键盘按键的ascII码
type 事件类型（事件名称，如：keypress click）
preventDefault() 阻止默认事件
stopPropagation() 阻止事件冒泡
在事件执行函数中，使用“return false”，可以同时阻止事件冒泡和默认事件。
八、jQuery动画
这里的jquery动画部分没有学习，主要是因为目前普遍使用CSS3动画。后期在需要的话再考虑学习。
九、jQuery ajax
1、快速请求方法
get() 发起get请求
$.get(url,callback[,dataType])post() 发起post请求
$.post(url[,data],callback[,dataType])服务器环境工具：xampp lite控制面板 apache 。。。这个好像是用来连接服务器用的。。。
打开html文件本身就是一次服务器请求
$("#btm00").ready(function(){
$.get("http://localhost/get-content.php?name=Lili&message=hello",function(data){
alert(data);
})
})这里不需要创建XML Ajax对象，只需要调用jquery里的get()和post()函数。传递的第一个参数是地址，地址的后面用?连接的是传给服务器的参数，第二个参数是回调函数，data是回调函数返回的数据。
post()方法的第一个参数也是地址，第二个参数是传递给服务器的数据，格式是对象{name:"Jack",message:"nihao"}或者字符串"name=Bob&message=Hello World"或者从表单中读取的内容，如果不需要传递的话这个参数可以省略，第三个参数是回调函数。
发起post请求，传递参数
$.post("http://localhost/post-content.php",$("#myForm").serialize(),function(data){
alert(data);
})2、ajax方法
ajax() 既可以发起get请求，又可以发起post请求。传参是一个对象，对象里面分别为各个关键参数和取值。async:true，表示异步。如果是发起post请求的话，就将type值改成post。data的格式可以是对象，也可以是字符串，所以可以是取自表单的元素。
$.ajax({
url://请求的地址,
type://请求的方式 GET/POST,
async://是否异步,
data://发送的数据，对象或字符串（序列化）
dataType://相应的内容格式,
success://相应成功的回调函数,
error://相应失败的回调函数
})("#btn01").click(function(){
$.ajax({
url:"http://localhost/get-content.php",
type:"get",
data:{name:"Jim",message:"lala"},
async:true,
success:function(data){
alert(data);
}
})
})这里的data是传递给服务器的内容，即自动拼接到url后面的内容。其格式可以是对象，也可以是字符串，data:"name=BOB&&message=I LOVE YOU" 或 data:$("#myForm").serialize()
3、表单方法
serialize() 便捷获取有name属性的表单元素的name属性拼接结果（序列化表单）。拼接结果是一个字符串。用来提交。
这样就不需要手动地在访问地址后面拼接传递的内容了。
$.get("http://localhost/get-content.php?"+$("#myForm").serialize(),function(data){
alert(data);
})4、处理json数据
使用ajax方法，指定dataType值为"json"即可：
$.ajax({
url:"http://localhost/data.json",
type:"get",
async:true,
dataType:"json",
success:function(data){
console.log(data);//这里打印输出的是对象
processData(data);
},
error:function(err){
alert("请求失败");
}
});
function processData(data){
$.each(data,function(index,item){
...
})
}使用get方法，只需要指定第三个参数"json"，就可以。不需要做其他的处理。post方法类似。：
$.get("http://localhost/data.json",processData,"json");
function processData(data){
...
}十、jQuery 工具方法
1、数组对象方法
$.each(Array,fn(index,item)) 用于遍历数组或类数组对象（如jquery对象、原生dom对象）
$.grep(Array,fn(item,index)) 过滤操作，该方法返回一个新的数组。
var list=[1,2,3,4,5,6,7,8];
//$.grep() 对数组进行过滤
var res=$.grep(list,function(item,index){
return item % 2 === 0;
});
console.log(res);//[2,4,6,8]$.map(Array,fn(item,index)) 用于遍历数组或类数组对象，与each方法不同的是，map方法会返回一个新的数组，不改变原来的数组。
var res=$.map(list,function(item,index){
return item+4;
})
console.log(res);//[5,6,7,8,9,10,11,12]$.makeArray(likeArray) 把类数组对象转换为一个纯数组，返回一个新的数组。
var newArr = $.makeArray($("#myList li"));$.inArray(ele,Array) 返回一个元素在数组中的位置。如果该元素在数组中不存在，则返回-1.
$.merge(Array1,Array2[,Array3...]) 合并数组
没有加$.的方法都是jquery dom的方法
toArray(jquerydom) 把jquerydom转为纯数组，功能与makeArray类似，用法不同。
2、函数方法
$.proxy() 改变函数内的上下文环境（this指向）。类似于原生jquery中的bind方法。
3、类型判断
$.type() 返回参数的类型，如果是数组的话，不会像原生jquery那样返回对象，而是返回array数组。
$.isFunction() 判断参数是不是函数，是则返回true，不是则返回false。
$.isEmptyObject() 判断是不是空的对象。
$.isPlainObject() 判断是不是纯的对象（构造函数是object）。
$.isWindow() 判断是不是window对象。
$.isNumeric() 判断是不是数字，如果是小数也返回true。如果是NaN，返回false。
4、字符串
$.trim() 去除两边的空格。传入的参数是要去除两边空格的字符串。
$.param() 序列化成字符串。传入的参数是对象（包含jquery 对象），将对象序列化成字符串。
console.log($.param({name:"lili",age:100}));
//name:lili&age:1005、版本
$.fn.jquery 返回当前使用的Jquery版本。
十一、jQuery插件
1、jQuery插件的网站
http://plugins.jquery.com/ 官网 这个是英文的，感觉不是很好用。
http://www.jq22.com/ jQuery插件库 这个是中文的，感觉不错
http://www.htmleaf.com/ jQuery之家 这个比较棒，中文
http://www.jq-school.com/ jQuery-school
2、经典jQuery插件
插件其实就是封装好的特效代码。如何选择插件：1、要有官方网站；2、要定期维护；3、使用数量多。
2.1 select2 下拉框搜索插件推荐
官网 http://select2.org/
github http://github.com/select2/select2
$(dom).select2()
$(dom).select2({
width:,
data:,
ajax:,
...
})//插件的使用
//这里引用插件中的css压缩文件
//这里引用插件中的js压缩文件
2.2 经典datetimepicker时间日期插件
github https://github.com/xdan/datetimepicker
文档 https://xdsoft.net/jqplugins/datetimepicker/
//设置语言
$.datetimepicker.setLocale('zh');
//调用插件
$(dom).datetimepicker({
datepicker:true/false,
timepicker:true/false,
format:"Y-m-d H:i",
value:默认值,
...
})datetimepicker时间日期插件
2.3 fullpage全屏滚动插件
官网 https://alvarotrigo.com/fullpage/zh/ 这个网页中使用了谷歌的插件，所以需要配置才能正常访问
github https://github.com/alvarotrigo/fullpage.js/
自定义的导航，需要写在包裹fullpage的外面。
//默认的幻灯片类名需要是section，不过也可以更改
欢迎使用fullpage
//默认的子幻灯片类名需要是slide，不过也可以更改
第三页
最后一页
2.7 jQuery-easing
官网 http://gsgd.co.uk/sandbox/jquery/easing/
github https://github.com/gdsmith/jquery.easing
$(dom).hide(speed,easing,fn)
//hide表示某个jquery动画函数，easing表示的是插件中的某个效果3、自定义jQuery插件
jQuery.fn.extend() 给 jqueryDom 对象扩展方法（大部分插件）
$.fn.extend({
方法名:function(){}
})
//或者
$.fn.方法名=function(){
}jQuery.extend() 给jquery对象本身扩展方法
$.extend({
方法名:function(){
}
})
//封装自己的插件 消息滚动插件
- 1 xxxxxxxx xxx xx x x x x x x x .
- 2 xxxxxxxx xxx xx x x x x x x x .
- 3 xxxxxxxx xxx xx x x x x x x x .
- 4 xxxxxxxx xxx xx x x x x x x x .
- 5 xxxxxxxx xxx xx x x x x x x x .
- 6 xxxxxxxx xxx xx x x x x x x x .
- 7 xxxxxxxx xxx xx x x x x x x x .
- 8 xxxxxxxx xxx xx x x x x x x x .
- 9 xxxxxxxx xxx xx x x x x x x x .
- 10 xxxxxxxx xxx xx x x x x x x x .
- 11 xxxxxxxx xxx xx x x x x x x x .
- 12 xxxxxxxx xxx xx x x x x x x x .