申明：本篇博客是学习舟炬教育课程：全网最详细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

方式一：官网下载

<script src="../jquery-3.3.1.min.js"></script>

方式二：npm下载安装

方式三：CDN引用（推荐），使用第三方服务器上的jQuery文件，加载速度快。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

2、jQuery版本介绍

jQuery2.0以上的版本，不兼容IE8及以下版本。

3、jQuery的兼容性引用方式

<body><!-- chrome firefox Safari opera IE9+ --><!-- [if gt IE 8]> --><script src="../jquery-3.3.1.min.js"></script><!-- <![endif]--><!-- IE8以及以下--><!-- [if lte IE 8]><script src="../jquery-1.12.4.min.js"></script><![endif]-->
</body>

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元素。如：$("<p>").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 classif($(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、创建元素

$("<tagName>")

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:100

5、版本

$.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:,...
})

//插件的使用
<head><link rel="stylesheet" href="./select2/css/select2.min.css">//这里引用插件中的css压缩文件
</head>
<body><select id="mySelect01"><option value="1">北京市</option><option value="2">上海市</option>//等等等选择</select><select id="mySelect02"></select><select id="mySelect03"></select><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./select2/js/select2.min.js"></script>//这里引用插件中的js压缩文件<script>$(document).ready(function(){$("#mySelect01").select2({width:150//这里可以配置函数的一些属性，具体有哪些配置，在插件介绍里有});//这里直接调用插件中编辑好的函数即可，非常方便$("mySelect02").select2({width:150,data:[{id:1,text:"小明"}，{id:2,text:"小红"}，//等等选择。这里通过配置插件属性中的data属性完成选项内容的填写。这里的id值就充当了选项的value值。具体开发中，还是需要读懂相关源代码。]});$("mySelect03").select2({width:150,ajax:{url:"http://localhost/address.php",//这里会发起ajax请求dataType:"json",processResults:function(data){//对响应内容进行处理var resList=[];$.each(data,function(index,item){resList.push({id:item.id,text:item.name})})//返回结果return{results:resList}}}})})</script>
</body>

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:默认值,...
})

<h1>datetimepicker时间日期插件</h1>
<hr>
<input type="text" id="datetime">
<input type="text" id="dateInput">
<script src="../jquery/jquery-3.3.1.min.js"></script>
<script src="./datetimepicker/jquery.datetimepicker.full.min.js"></script>
<script>$(document).ready(function(){//设置插件的语言$.datetimepicker.setLocale("zh");//调用插件$("#datetime").datetimepicker();//调用插件，只要日期不要时间$("datetime").datetimepicker({timepicker:false,format:"Y-m-d H:i"//小写h代表12进制的小时，如果把时分的格式删掉的话，就只显示日期。没有时间})})
</script>

2.3 fullpage全屏滚动插件

官网 https://alvarotrigo.com/fullpage/zh/ 这个网页中使用了谷歌的插件，所以需要配置vpn才能正常访问

github https://github.com/alvarotrigo/fullpage.js/

自定义的导航，需要写在包裹fullpage的外面。

<head>
<link rel="stylesheet" href="./fullpage/jquery.fullpage.min.css">
<style>#fullpage{text-align:center;color:#fff;}h1{font-size:80px;}h2{font-size:60px;}#nav{position:fixed;top:20px;left:20px;z-index:1000;//置于顶层}#nav a{color:#fff;text-decoration:none;padding:0 20px;}.page01{background:url("../images/10.jpge") no-repeat center/cover; //将第一页的背景换成一张图片}
</style>
</head>
<body><div id="nav"><a href="#firstPage">首页</a><a href="#secondPage">介绍</a><a href="#thirdPage">功能</a><a href="#forthPage">演示</a>//这里的每一个类都与插件属性anchors中的每一个锚点对应，实现跳转</div><div id="fullpage"><div class="section page01">//默认的幻灯片类名需要是section，不过也可以更改<h1>欢迎使用fullpage</h1></div><div class="section page02"><div class="slide"><h2>第二页 第一张</h2></div>//默认的子幻灯片类名需要是slide，不过也可以更改<div class="slide"><h2>第二页 第二张</h2></div><div class="slide"><h2>第二页 第三张</h2></div><div class="slide"><h2>第二页 最后 一张</h2></div></div><div class="section page03"><h2>第三页</h2></div><div class="section page04"><h2>最后一页</h2></div></div><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./fullpage/jquery.fullpage.min.js"></script><script>$(document).ready(function(){//调用插件$("#fullpage").fullpage({navigation:true,//侧边的导航栏显示sectionsColor:["orange","skyblue","pink","#369"],//设置四张幻灯片的背景颜色navigationTooltips:['第一页','第二页','第三页','第四页'];//导航栏提示anchors:["firstPage","secondPage","thirdPage","forthPage"];//设置锚点名称，将四张幻灯片与相应的a元素绑定});    })

局限：风格不一定与自身开发的网页风格一致。有可能会导致代码冗余。

2.4 lazyload图片懒加载

图片懒加载：鼠标滚动到相应位置之前，不加载该位置的图片。当鼠标滚动到相应位置时，才加载图片。缓解服务器压力。

官网 https://appelsiini.net/projects/lazyload/

github https://github.com/tuupola/jquery lazyload/tree/2.x

<head>body{background-color:#ccc;}.container{margin:0 auto;width:920px;}.img-wrapper:{font-size:0;    }.img-item{display:inline-block;margin-right:20px;margin-bottom:20px;width:400px;padding:20px;background-color:#fff;}.img-item img{width:400px;height:300px;background:url("../images/loading.gif") no-repeat;}
</head><body><div class="container"><h1>图集</h1><hr><div class="img-wrapper"><div class="img-item"><img data-src="../images/1.jpeg"></div><div class="img-item"><img data-src="../images/2.jpeg"></div><div class="img-item"><img data-src="../images/3.jpeg"></div><div class="img-item"><img data-src="../images/4.jpeg"></div><div class="img-item"><img data-src="../images/5.jpeg"></div><div class="img-item"><img data-src="../images/6.jpeg"></div>...</div><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./lazyload/lazyload.min.js"></script><script>$(document).ready(function(){$(".img-wrapper img").lazyload();
})
</body>

2.5 layer弹窗

官网 http://layer.layui.com/?alone

github https://github.com/sentsin/layer

<body><button id="btn00">alert</button><button id="btn01">confirm</button><button id="btn02">msg提示</button><button id="btn03">tips</button><button id="btn04">load</button><button id="btn05">自定义弹框</button><button id="btn06">网页</button><script src="../jquery/jquery-3.3.1.min.js"></script><script src="./layer/layer.js"></script><script>$(document).ready(function(){$("#btn00").click(function(){//调用插件layer.alert("警告，失败");});$("#btn01").click(function(){layer.confirm("你确定吗");});$("#btn02").click(function(){layer.msg("提示");});$("#btn03").click(function(){layer.tips("小贴士","#btn03");});$("#btn04").click(function(){var loadEle = layer.load();//等待两秒后关闭加载效果setTimeout(function(){layer.close(loadEle);},2000)});$("#btn05").click(function(){layer.open({title:"个人信息",area:["500px","400px"],content:"<p>Hello</p>"   //这里的content还可以是jquery dom对象，该对象可以在上文先编辑好。这时属性type需要取除默认值以外的值，其默认值是0，取1时可以正常显示jquery dom对象。 //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）})})；$("#btn06").click(function(){layer.open({type:2,title:"网页",content:"http://www.itxdl.cn",area:["600px","500px"],//弹框最大最小化按钮是否显示maxin:true,})})})
</body>

2.6 nice valldator表单验证

官网 https://validator.niceue.com/

github https://github.com/niceue/nice-validator

<form action="1.php" method="post" id="loginForm"><table><tr><td>邮箱：</td><td><input type="text" name="email"></td></tr><tr><td>密码：</td><td><input type="password" name="pwd"></td></tr><tr><td>确认密码：</td><td><input type="password" name="repwd"></td></tr><tr><td></td><td><button>注册</button></td></tr>
</form>
<script>$(function(){$("#regForm").validator({fields:{//表单验证：验证输入的内容是否符合要求，required参数表示必须验证。另外不同的验证需求可以在官网上查询实现email:{rule:"required,email",ok:"邮箱可用",tip:"请输入邮箱"},pwd:{rule:"length(6~18)",msg:"密码必须6-18位",ok:"密码可用",tip:"请输入6-18位密码"},repwd:{rule:"match(pwd)",msg:"两次密码不一致",ok:"密码确认成功",tip:"请确认密码"}}})})
</script>

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(){}
})

//封装自己的插件  消息滚动插件
<head><style>.wrapper{margin:100px auto;padding:800px;overflow:hidden;}.wrapper li{margin-bottom:10px;padding:20px;background-color:#ccc;}</style>
</head>
<body><ul class="wrapper" id="wrapList"><li>1 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>2 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>3 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>4 xxxxxxxx   xxx  xx  x x x x x x x .</li>        <li>5 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>6 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>7 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>8 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>9 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>10 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>11 xxxxxxxx   xxx  xx  x x x x x x x .</li><li>12 xxxxxxxx   xxx  xx  x x x x x x x .</li></ul><script src="../jquery/jquery.3.3.1.min.js"></script><script>//定义插件$.fn.scrollList=function(options){var obj=options?options:{};var limit = obj.limit ? obj.limit :4;//默认值 页面中显示几个项目var speed = obj.speed ? obj.speed : 3000;//默认值 滚动的速度var type = obj.type ? obj.type : 0;//滚动的形式 默认是0//获取其中一个项目的元素对象var itemEle = $(this).children().first();//获取项目元素的高度var itemHeight = itemEle.outerHeight()+parseFloat(itemEle.css("margin-top"))+parseFloat(itemEle.css("margin-bottom"));//设置包裹元素的高度$(this).height(itemHeight*limit);//包裹的元素var that = $(this);//判断滚动的动画形式switch(type){case 1:setInterval(function(){that.children().last().fadeTo(0,0).hide().prependTo(that).slideDown(400).fadeTo(600,1);},speed);break;case 2:that.children().slice(limit).hide();//隐藏后面setInterval(function(){that.children().eq(limit-1).fadeOut(600,function({that.children().last().prependTo(that).delay(200).slideDown(400);})},speed);break;default://定时动起来setInterval(function(){that.children().last().hide().prependTo(that).slideDown(500);},speed)break;}}//调用插件$(document).ready(function(){$("#wrapList").scrollList({limit:4,speed:3000,type:0,//代表不同滚动形式})})
</body>

(function($){
//定义插件$.fn.scrollList=function(options){var obj=options?options:{};var limit = obj.limit ? obj.limit :4;//默认值 页面中显示几个项目var speed = obj.speed ? obj.speed : 3000;//默认值 滚动的速度var type = obj.type ? obj.type : 0;//滚动的形式 默认是0//获取其中一个项目的元素对象var itemEle = $(this).children().first();//获取项目元素的高度var itemHeight = itemEle.outerHeight()+parseFloat(itemEle.css("margin-top"))+parseFloat(itemEle.css("margin-bottom"));//设置包裹元素的高度$(this).height(itemHeight*limit);//包裹的元素var that = $(this);//判断滚动的动画形式switch(type){case 1:setInterval(function(){that.children().last().fadeTo(0,0).hide().prependTo(that).slideDown(400).fadeTo(600,1);},speed);break;case 2:that.children().slice(limit).hide();//隐藏后面setInterval(function(){that.children().eq(limit-1).fadeOut(600,function({that.children().last().prependTo(that).delay(200).slideDown(400);})},speed);break;default://定时动起来setInterval(function(){that.children().last().hide().prependTo(that).slideDown(500);},speed)break;}}
})(jQuery)

4、jQuery UI

官网 https://jqueryui.com/ 版本很久没更新了，使用得越来越少。

5、jQuery Mobile

官网 https://jquerymobile.com 针对移动端设计上有些过时，官网很久没有更新。

6、Sizzle

官网 https://sizzlejs.com

独立出来的jquery选择器

7、Zepto

官网 http://zeptojs.com

与jQuery区别：https://www.zhihu.com/question/25379207

由于不做兼容性处理（只针对IE9以上及其他主流浏览器）而且删除了jquery动画部分，所以相对于jquery来说体积很小。

使用时，可以直接在引用处代替jquery路径，使用方法与jquery基本一致。

注意：最好使用CSS3的选择器。

笔记：全网最详细jQuery教程相关推荐

鸿蒙系统电视k歌,华为电视怎么k歌？全网最详细的教程在这里
原标题:华为电视怎么k歌?全网最详细的教程在这里利用智能电视在家k歌,是一个很不错的娱乐活动.那么,家里的华为怎么电视k歌?需要准备什么设备?下面就为大家分享一份详细教程,看完两分钟快速开启K歌模 ...
vscode全网最详细使用教程
vscode下载地址官网下载:https://code.visualstudio.com/或者直接点击**我的资源**下载 VScode使用教程安装教程鼠标左键双击,即可运行安装程序一:同意协 ...
Docker学习笔记(全网最详细)
一. Docker的简介 1.Docker是什么? 1.1 问题:为什么会有docker出现? 一款产品从开发到上线,从操作系统,到运行环境,再到应用配置.作为开发+运维之间的协作我们需要关心很多东西 ...
UIApp教程（全网最详细的教程来啦）
UIApp教程 1. UIApp概述 1.1 UIApp简介 UIApp是一款基于React Native开发的跨平台移动应用开发框架. UIApp提供了丰富的组件库和模板,可以快速构建高质量的移动应 ...
lombok如何给属性设置_你不得不会的Lombok全面详细讲解，全网最详细的教程
读者范围: 如果你使用过Lombok你可能只使用了部分功能,那么这里列举了所有功能,你继续阅读能完善这方面的知识: 如果你还没用用过,甚至不知道这是什么,那么对不起,你已经被技术淘汰了,这里有一份详尽 ...
pikachu全网最详细安装教程
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.phpStudy V8版本安装步骤二.pikachu安装前言 pikachu是一个包含了常见的web安全漏洞的 ...
【从零开始玩量化17】如何python+QMT完成自动化交易？（全网最详细入门教程）
一.什么是QMT 此部分为扫盲内容,有一定了解者可以跳过. 概念它是一款量化交易客户端软件,由一家叫做迅投公司出品,可以直接登录你的券商账号进行股票交易,但与同花顺/通信达不同的是,它暴露了基于py ...
挑战全网最详细靶机教程——vulnhub靶机实战 lampiao【适合刚接触的新人学习】
靶机地址:https://www.vulnhub.com/entry/lampiao-1,249/ 靶机难度:中等工具:kalilinux: 一个灵活的脑子 : 一双手目标:得到root权限&am ...
挑战全网最详细靶机教程——vulnhub靶机实战vulnhub Tr0ll: 1【适合刚接触的新人学习】
靶机地址:https://www.vulnhub.com/entry/tr0ll-1,100/ 靶机难度:简单靶机发布日期:2014年8月14日靶机描述:Tr0ll的灵感来自OSCP实验室中不断摇 ...
Netty 全网最详细的教程! 没有之一!
Netty 入门文章目录 Netty 入门入门案例 1.服务器端代码 2.客户端代码 3.运行流程组件解释使用组件 EventLoop 创建一个EventLoopServer 创建一个Clie ...

笔记：全网最详细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

7、Zepto

笔记：全网最详细jQuery教程相关推荐

最新文章

热门文章