jQuery使用方法

什么是jQuery

https://jquery.cuishifeng.cn/ 这是jQuery中文在线使用手册网址

jQuery是前端方法库，主要内容是封装了各种dom操作

插件，库，和框架的区别
插件：实现某一个单一类功能
库：封装了各种的功能和所需要的工具
框架：自己的完整的生态系统

优点：

1，选择器

可以实现选择所有的标签

2，链式编程

3，隐式迭代

特点

号称全兼容
2.0以后的逐步不再兼任IE

当引入一个jQuery.js或者jQuery.min.js，会向全局暴露两个变量名

1，jQuery

2，$

jQuery的选择器

包含两个部分

1，选择器

对元素的获取

基本选择器

语法：$(选择器)
返回值：满足条件的所有元素（id选择器除外）
放在一个数组里面返回给你（都是一个集合的形式）==>我们管这个集合叫做jQuery元素集合

特殊选择器

语法：${选择器}
对你已经存在的选择器进行修饰

1，:first
2，:second
3，eq(索引的元素序位)

按照索引的排列开始
从0开始进行序数

4，:odd

按照索引排列的奇数个

5，:even

按照索引排列的偶数个

2，筛选器

对已经获取到的元素集合进行二次筛选，直接进行链式编程就可以了

注意：只有jQuery的元素集合才可以使用，原生DOM对象不能使用
1，:first
第一个元素
2，:second
第二个元素
3，eq(索引的元素序位)

按照索引的排列开始
从0开始进行序数

4，next()

当前元素的下一个元素

5，next All()

元素集合 .nextAll() 获取到当前元素后面的所有兄弟元素
元素集合 .nextAll(选择器) 获取到当前元素后面的所有元素中指定选择器的那一个

6，nextUntil()

元素集合.nextUntil() 获取到当前元素后面所有元素的兄弟元素
元素集合 .nextUntil(选择器) 获取到当前元素后面所有兄弟元素，直到选择器元素为止（不包含选择器元素）

7，prev()

当前元素的上一个元素

8，prevAll()

1，元素集合 .prevAll() 获取当前元素上面的所有兄弟元素
2，元素集合 .prevAll(选择器) 获取到当前元素上面的所有兄弟元素中指定选择器的那一个

9，prevUntil()

元素集合 .prevUntil() 获取到当前元素后面所有的兄弟元素
元素集合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素，直到选择器元素为止（不包含选择器元素）

10，parent()

获取到当前元素的父元素

11，parents()

1.元素集合.parents() 拿到结构父级的所有父元素
2.元素集合.parents(选择器) 拿到机构父级里面所有元素中符合选择器的那一个元素

12，children()

1.元素集合.children() 拿到该元素的所有子元素
2.元素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素

13，sinblings()

拿到该元素的所有兄弟元素，自己除外

14，find()

找到该元素中所有后代元素里面符合选择器条件的元素

15，index()

获取到的就是该元素在其父元素里面的索引位置

jQuery操作文本内容

操作元素内的文本和超文本
注意：属于jQuery的方法，只能jQuery元素集合调用，原生DOM不能调用

1，html()

A，元素集合.html()

获取该元素的超文本内容，以字符串的形式返回
获取的时候为了保证html结构只能获取第一个元素的超文本内容

B，元素集合.html('内容')

设置元素集合内元素的超文本结构
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素

2，text()

A，元素集合.text()

获取该元素的文本内容，以字符串的形式返回
因为是文本内容，不涉及html结构，所以拿到的是所有元素的文本内容
以一个字符串的形式返回

B，元素集合.html('内容')

设置元素集合内元素的文本结构
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素

3，val()

A，元素集合.val()

获取元素集合内元素的value值

B，元素集合.val('内容')

设置元素集合内元素的value
完全覆盖式的写入
隐式迭代：元素集合内有多少元素，就写入多少元素

jQuery操作元素类名

1，addClass()

添加元素类名

2，removeClass()

删除元素类名

3，hasClass()

判断有无元素类名

4，toggleClass()

切换类名
如果原先有，就是删除
如果原先没有，就是添加

jQuery操作元素样式

css()

A，语法：元素集合.css('width')

获取元素的某一个样式的值，不管是行内还是非行内都能获取到

B，语法：元素集合.css('样式名','样式值')

设置元素的行内样式
隐式迭代：元素集合内有多少元素就设置多少元素
设置的时候，如果需要设置的单位是px，可以不写

C，语法：元素集合.css({样式名1:样式值1,样式值2:样式值2}...)

批量给元素设置行内样式
隐式迭代：元素集合内有多少元素设置成多少元素
设置的时候，如果你需要设置的单位是ps，可以不写

基础绑定事件

例如

1，on()

语法：元素集合.on(事件类型，事件处理函数)
隐式迭代：元素集合内有多少元素，就会给多少元素绑定事件
例如：

jQuery书写选项卡

1，给所有的ul里面的li绑定事件

2，自己有类名，所有兄弟没有类名

$('ul>li').on('click',funtion(){	

$(this).addClass('active').siblings().removeClass('>acti>ve')
$('ol>li').removeClass('active').eq($(this).index()).addCl>ass('active')
})

A，on(事件类型，事件处理函数)

直接绑定事件，有隐式迭代

B，on(事件类型，选择器，事件处理函数)

事件委托的绑定
把选择器元素委托给元素集合里面的元素
注意：选择器元素主要是元素集合内元素的后代元素

$('ul').on('click','li',function(){
	console.log('执行了')
	console.log(this)
		//这个事件的事件源是ul
}） 

C，元素集合.on(事件类型，复杂数据类型)

这里传的必须是复杂数据类型，否则会被当成上面事件委托的绑定

给元素集合内的所有元素绑定事件
这个复杂数据类型是事件触发的时候，传递给事件里面的参数
在事件对象里面有一个叫做data的成员，就是传递进来的参数

D，元素集合.on(事件类型，选择器，数据，事件处理函数)

事件委托的形式，带上传递参数
把选择器所属的事件，委托给了元素集合内的事件
数据位置，就是在事件触发的时候传递给事件处理函数的参数

E，元素集合.on({事件类型1:事件处理函数,事件类型2:事件处理函数,。。。})

一次性给元素绑定多种事件
没法传递参数和事件委托了

2，one()

用来绑定事件的方法和on()方法的参数和使用形式相同，只不过绑定的事件只能执行一次

3，off()

function handlerA() {console.log('handlerA')}
function handlerB() {console.log('handlerB')}
$('li').on('click',handlerA)
$('li').on('click',handlerB)

A，off(事件类型)

把click事件的所有事件处理函数全部解除

$('li').off('click')

B，off(事件类型，事件处理函数)

把click事件的handlerA事件处理函数解除

4，trigger()

用JS代码的方式来触发事件
语法：元素集合.trigger(事件类型)

jQuery的事件函数

jQuery给我们提供了一些简洁的绑定事件方式
把一些常用事件直接封装成了函数click() mouseover()这些可以直接使用，带有隐式迭代
快捷绑定事件
语法：

绑定点击事件

$('div').on('click',function(){console.log('点击事件触发'))

1，元素集合.事件类型(事件处理函数)

$('div').click（{name:'Jack'},function(e){console.log('点击事件',e))

2，元素集合.事件类型(传入事件处理函数的参数，事件处理函数)

$('div').click(function(e){console.log('点击事件',e)})

jQuery唯一的特殊事件

hover()

一个结合了移入移出的事件
语法：元素集合.hover(移入的事件，移出的事件)
如果只传递了一个参数，那么移入移出都触发

jQuery的节点操作

原生JS的节点操作

创建节点，插入节点，删除节点，替换节点，克隆节点

jQuery的节点操作

创建节点，插入节点，删除节点，替换节点，克隆节点

1，创建节点

$(html结构字符串)

当$()里面传递一个选择器的时候，就是获取元素
当$()里面传递一个html结构字符串的时候，就是创建元素节点
当$()里面传递一个DOM元素节点的时候，就是转换成jQuery元素结合

2，插入节点

内部插入（父子关系的插入）

append()
语法：父元素.append(子元素)
把子元素插入到父元素内部，放在末尾的位置
appendTo()
语法：子元素.append(父元素)
把子元素插入到父元素内部，放在末尾的位置
prepend()
语法：父元素.prepend(子元素)
把子元素插入到父元素内部，放在最前面的位置
语法：子元素.prependTo(父元素)
把子元素插入到父元素内部，放在最前面的位置

外部插入

after()
语法：存在元素.after(插入元素)
把插入元素排在存在元素的后面，以兄弟关系出现
insertAfter()
语法：存在元素.insertAfter(存在元素)
把插入元素排在存在元素的后面，以兄弟关系出现
before()
语法：存在元素.before(插入元素)
把插入元素排在存在元素的前面，以兄弟关系出现
insertBefore()
语法：存在元素.insertBefore(存在元素)
把插入元素排在存在元素的前面，以兄弟关系出现

删除节点

remove()
语法：元素集合.remove()
把自己从自己的父元素里面移出

empty()
语法：元素集合.empty()
把自己变成空标签，把所有后代节点全部移除

替换节点

replaceWith()
语法：换下节点.replaceWith(换上节点)
replaceAll()
语法：换上节点.replaceAll(换下节点)

克隆节点

clone()
语法：元素集合.clone()
必然携带所有节点过来
第一个参数默认是false，表示是否克隆元素本身的事件，选填true
第二个参数默认是跟随第一个，表示是否克隆元素后代节点的事件，选填
注意：当第一个参数是false的时候，第二个参数没有意义

jQuery操作元素属性

一，几种元素属性

原生属性：id class src 。。。
自定义属性：getAttribute()。。。
H5 自定义属性：dataset data-xxx。。。

二，jQuery有三种操作方法

attr()和removeAttr()

attr()
语法：元素集合.attr(属性名)
获取元素的该属性，主要用来获取标签属性，包括一些自定义属性
语法：元素集合.attr(属性名,属性值)
设置元素的标签属性，只是把标签属性设置在标签上，当作一个自定义属性使用
对于原生属性有些有用，有些没有用

注意：
设置的时候，需要两个参数
设置的不管是什么数据类型，都会变成字符串类型
有的原生属性好使，有的不好使

removeAttr()
语法：元素集合.removeAttr(属性名)
删除元素身上的自定义属性
id class等属性也可以删除

注意
多用于删除attr方法设置的属性

prop()和removeProp()

prop()
语法：元素集合.prop(属性名)
获取元素的原生属性，也可以获取元素的自定义属性
但是attr方法设置的自定义属性他获取不到
语法：元素集合.prop(属性名,属性值)
主要设置元素的原生属性，也可以设置自定义属性
他设置的自定义属性不会显示在标签上，而是存储在元素身上

注意：
设置的自定义属性不会显示在标签上
你设置的时候是什么数据类型，获取到的时候还是什么数据类型
attr设置的自定义属性他拿不到

removeProp()
语法：元素集合.removeProp(属性名)
删除元素的属性，但是只能删除由prop设置的自定义属性
原生属性 id class。。。不能删除

data()和removeData()

data()
语法：元素集合.data(属性名)
获取使用data()方法存储的数据，获取身上data-xxx的属性
语法：元素集合.data(属性名,属性值)
设置的时候，只是把数据存储在元素身上的某一个对象空间内，但是不会出现在标签，不会由data-xxx

注意
可以获取元素标签上data-xxx的属性
但是不能设置标签上data-xxx的属性

removeData()
只能删除由data()方法设置的属性
不能删除元素身上data-xxx的属性

jQuery 获取元素尺寸

获取元素尺寸有三套方法四种使用方法

一，width()和height()

语法：元素集合.width()或者元素集合.height()
获取的是元素内容位置的尺寸

二，innerWidth()和innerHeight()

语法：元素集合.innerWidth()或者元素集合.innerHeight()
获取的是元素 内容+padding区域的尺寸

三，outerWidth()和outerHeight()

语法：元素集合.width()或者元素集合.height()
获取的是元素内容 +padding+border 区域的尺寸

四，outerWidth(true)和outerHeight(true)

语法：元素集合.outerWidth(true)或者元素集合.outerHeight(true)
获取的是元素内容 +padding+border+margin 区域的尺寸

jQuery操作元素位置

操作元素相对于某一个点的位置关系

1，offset()

是一个读写的方法

读取

语法：元素集合.offset()
返回值：一个对象，里面包含一个x信息和一个y信息
相对谁：相对页面左上角的绝对坐标
注意：读取出来是一个对象，你需要值得的时候，要继续不能继续链式编程

设置

语法：元素集合.offset({top:xxx,left:xxx})
设置的：设置的是相对于页面左上角的绝对位置
例子：$('div').offset({top:30,left:30})
一定会把这个div放在放在距离页面左上角30 30的位置
注意：你设置的时候，如果父子元素都要动，考虑先后顺序

2，position()

是一个只读的方法
读取：
语法：元素集合.position()
返回值：一个对象，里面包含一个x信息和一个y信息
就是元素的定位关系
如果你定位的是right和bottom，那么会自动计算成left和top

jQuery有三个基础动画

一，show()

显示

二，hide()

隐藏

三，toggle()

切换，如果其显示就隐藏，如果其隐藏就显示

上面三个方法操作的display:node和block
三个的语法是一样的
方法名(运动时间，运动曲线，回调函数)
运动时间：多长时间运动结束
运动曲线：什么方式运动
回调函数：运动结束后触发

jQuery的折叠动画

jQuery提供了三种折叠动画

slideDown()

下拉显示

slideUp()

上拉显示

slideToggle()

切换显示和隐藏

三个方法都是一样的参数
方法名(时间，运动曲线，回调函数)

jQuery 的渐隐渐显动画

通过操作元素的opacity达到效果

faseIn()

opacity 0~1

faseOut()

opacity 1~0

fadeToggle()

切换（如果其显示就隐藏，如果其隐藏就显示）

fadeTo()

运动到指定透明度
语法：fadeTo(时间，指定透明度，运动曲线，回调函数)

jQuery 的综合动画

按照设定进行运动

animate()

语法：animate({ },时间,运动曲线,回调函数)
{ }:书写你要运动的属性

注意
颜色相关的属性无法运行
CSS3的2d，3d动画效果运动不了

jQuery的停止动画

当对于一个元素设置动画以后
如果快捷触发，会停不下来，直到你所有的触发都执行完毕为止
jQuer提供了两个临时停止动画的方法

stop()

语法：元素集合.stop()
当代码执行到这句的时候，不管运动到什么程度，立刻停下来
运动到什么位置就会停在什么位置

finish()

语法：元素集合.finish()
当代码执行到这句的时候，不管运动到什么程度，直接去到运动结束的位置
直接完成本次动画

animatecss动画插件

网址：https://animate.style/

滑动选项卡

一，每一个li有一个鼠标移入事件

获取到移入的这个li的索引

二，如果出现一旦挨个触发动画，小恒星就根本上了的情况

使用stop()

三，文字改变

获取到当前li里面的文件设置商

四，点击事件没有了

因为span覆盖在了li身上，点击到的都是span
把li的事件委托给ul，并且设置span不作为事件目标

树状菜单

给一级菜单的每一个li绑定事件
ul>li
自己添加active4
自己下面的ol展开
自己所有兄弟下面的ol都闭合

手风琴

一，给li绑定一个鼠标移入事件

自己变大，其他的变小

为什么会变大

布局是浮动布局
一行放不下就会下来
先让自己变大，让兄弟元素变小
运动原理是定时器，每次只动一点点

解决方法：

先动兄弟元素，再动自己
在第一个瞬间，是在变小

分析问题

方案一

每次移入第二个li的时候会触发第一个li的移出事件

方案二

每次移入第二个li的时候会触发ul的移出事件
解决问题
方案二：
之所以会触发ul的移出事件，因为移出li的事件冒泡，只要不冒泡，不传播事件，你移出li的时候，就不会触发ul的移出事件
给每一个li绑定移出事件，在里面阻止事件传播
给ul绑定mouseleave

二，给ul绑定mouseout事件

当你第一个ul移出进入第二个的时候，会触发第一个li的移出行为，
冒泡：冒泡会触发ul的mouseout事件
就会有一个还原到160的过程

给每一个li绑定一个移出事件

复原：每一个li变成160
当我从第一个li移入第二个li的时候
触发第二个li的移入事件，同时触发第一个li的移入事件

鼠标跟随

一，给每一个li绑定移入移出事件

移入的时候显示div
移出的时候隐藏div
移入的时候替换img标签的src

二，给每一个li绑定移动事件

在移动事件获取坐标随时赋值
哪组坐标？
offset 目标元素的左上角
client 可视窗口
page 文档流

其中offset()设置的坐标是按照文档流左上角设置的，拿到的坐标也应该是相对于文档流左上角

jQuery发送AJAX请求

jQuery发送一个get请求

jQuery提供了一个函数，$.get{}
引入jQuery以后，会提供两个变量

1，$

2，jQuery

这两个都是函数数据类型

把这个函数当作一个对象，向它身上添加一些成员

我们管这种方法叫做jQuery的全局方法，不需要依赖选择器，不需要元素集合，直接调用就行

专门发送get请求

语法：$.get(地址,传给后端的数据,回调函数,期望返回的数据类型)

地址：请求地址
数据：给后端的数据，可以写成key=value&key=value或{。。。}
回调：请求成功的回调，请求成功以后会触发
期望返回的数据类型：是否是执行解析响应体的操作

'string’不解析
'json’会执行一步JSON.parse

jQuery发送一个post请求

jQuery提供了一个全局方法叫做$.post()
专门用来发送post请求

发送post请求

语法：$.post(地址,携带给后端的数据,回调函数,期望后端返回的数据类型)
四个参数的意义和$.get()完全一样

jQuery发送ajax请求的综合方法

可以由你直接配置，决定发送get还是post请求，叫做$.ajax()我们所有的请求都可以使用他来发送

使用

语法：$.ajax(options)

options：就是本次请求的配置信息，是一个对象的数据类型

配置信息里面可以填写的内容

1，url：请求地址，必填

2，async：是否异步，默认是异步（true），可以选填非异步（false）

3，type/method：表达请求方式，默认是get，可以选填其他的请求方式

（大小无所谓）

4，data：传递给后端的参数

可以是查询字符串的形式
可以是对象的形式

5，dataType：期望返回后端的数据

6，success：接收一个函数数据类型，表示不成功的回调

7，error：接收一个函数数据类型，表示失败的回调

（不光是请求失败会走失败的回调，当解析失败的时候，也会走失败的回调）

8，timeout：设置一个超时时间

（从发送请求开始计时，到达超时时间还没有接收到响应，会直接取消本次请求，到失败的会调函数）

9，cache：是否缓存

对于ajax请求默认缓存的（true），可以选填（false）
如果选择缓存，那么不会有最后一个时间戳参数
如果选择不缓存，那么jQuery会在本次请求的末尾添加一个时间戳

缓存：
GET请求会自主缓存，原因如下
因为两次发送同一个请求，浏览器就有可能会缓存下来

怎么证明两次是一个请求？
请求地址一模一样，就表示是同一个请求

不想进行缓存

A让每一次的请求地址不一样

B每次请求的时候，再最后携带一个没有用的参数，值设置成时间戳

每次的请求地址就不一样

9，context：上下文

指定回调函数的this执行
jQuery默认回调函数的this执行jQuery封装的xhr对象
context传递的是谁，回调函数的this就执行谁

jQuery对于ajax的封装

jQuery对于Ajax的封装
除了回调函数的形式接收结果
还封装了promise的形式接收结果

一个$.ajax()方法

可以选择书写回调函数的形式
也可以选择promise的形式

注意：选择一种方式，不要一起用

跨域请求

非同源地址

解决方案

1，jsonp

前端利用script标签和src属性绕开同源策略
和Ajax没有关系，实际上不是在发送Ajax请求，实际上是在请求一个js文件

2，代理

由一个同源的代理服务端转发请求
对于前端来说，依旧是正常发送请求，只不过把地址书写成代理地址，依旧是使用$.ajax()方法来发送，只不过url位置书写代理标识符

3，cors

服务端允许指定客户端发送请求，和前端没有关系
前端正常发送请求，使用$.ajax()

jQuery发送jsonp请求

使用一个叫做$.ajax()的方法
因为jQuery封装ajax函数的时候做了一个判断
根据dataType传递的值来判断

if(dataType === 'jsonp'){
//动态创建一套script标签
//动态标签添加src属性
//动态插入到body
//动态的删除script
}else{
//按照ajax的一套流程封装
}

只要把dataType书写成’jsonp’，就会发送jsonp请求

jQuery发送jsonp请求专用的配置项

1，jsonp：表示携带函数名的那个key

2，jsonpCallback：表示自定义的函数名

默认值是jQuery自己组装的jQuery版本号随机数，时间戳

jQuery的全局钩子函数

也叫做全局Ajax函数，出现在ajax的不同阶段，在一个Ajax的整个周期中，会在不同的位置执行的函数，我们管这种在一个时期的生命周期上各个不同时期触发的函数叫做钩子函数

不是自主触发的函数，而是钩挂在其他的事情上，由其他的事情发送过程中来触发

一，ajaxStart()

表在同一个作用域下多个ajax请求的时候第一个Ajax请求之前

二，ajaxSend()

表示在每一个请求发送之前触发

三，ajaxSuccess()

表示在每一个请求成功之后触发，只要有一个请求成功了，就会触发一次

四，ajaxError()

表示在每一个请求失败之后触发，只要有一个请求失败了，就会触发一次
根据jQuery判断的失败

五，ajaxStop()

表示在每一个请求完成之后触发，只要有一个请求完成了，不管是成功还是失败，只要完成了就会触发

六，ajaxStop()

表示在同一个作用域下最后一个ajax结束以后触发
当有多个请求的时候，会在最后一个结束以后触发这个构子

jQuery的多库并存

jQuery自己就是一个库，除此之外，还有许多其他的库，当出现第二个库一起使用的时候，如果两个库都向外暴露了$或者jQuery的变量名，就会出现变量名冲突
两个库只有一个能正常使用（优先使用后面的那个库）

但是

jQuery提供了多库并存的机制

使用：

一，要求你先把jQuery引入在最后面，

先暂时把变量名的所有权交给jQuery

二，执行一个方法，jQuery把变量名的所有权交出去，表示其不再占用这个变量名

noConflict()
交出$的控制权

noConflict(true)
交出$和jQuery的控制权
const 变量 = $.noConflict(true)
你的变量是什么，
自己定义一个控制权

深海拷贝

一，赋值

把一个对象的地址赋值给另一个变量，两个变量操作同一个空间

二，浅拷贝

把对象里面的每一个成员，复制一份一模一样的内容，放到另一个对象里面，当你有某一个对象成员是复杂数据类型的时候，这个成员依旧是一样的，只是操作对象里面一层可以没有关系，如果再深层次就会出现问题

三，深拷贝

对象空间里面不管多少层，都是相对独立，没有关系

方案一：

for in 遍历赋值
只要碰到了某一个复杂数据类型，对象或者数组，再次进入到这个数据类型里面进行第二次遍历，利用递归思想实现深拷贝，

把第一遍遍历放在一个函数里面
如果遍历的时候，发现有一个数据，数组，或者对象，就重新调用函数

方案二：json

不管多复杂的数据类型，转换成json以后就是字符串了，字符串的赋值是基本数据类型，赋值以后再转换回来

jQuery里面的深浅拷贝

jQuery里面提供了一个进行深浅拷贝的方法
$.extend()

语法：

1，$.extend(对象1,对象2,对象3,。。。)

把从第二个参数开始的每一个对象的数据拷贝到第一个对象中，是一个浅拷贝

2，$.extend(true,对象1,对象2,对象3,。。。)

把从第三个参数开始的每一个对象的数据拷贝到第二个对象中，是一个深拷贝

注意
如果你要进行拷贝，不管是深拷贝还是浅拷贝，至少传递两个参数，只传递一个参数不是进行拷贝

jQuery的插件扩展

jQuery在设计的时候，封装了许多方法，为防止不够用，提供了插件扩展机制，我们可以向jQuery里面扩展一些内容，插件扩展机制提供了两个方法

一，扩展带jQuery本身，作为全局方法调用

语法：$.extend({添加的方法})
使用：$.extend({a:function() {} })

相当于扩展了一个a方法再jQuery本身，如果调用，就书写$.a()

二，扩展到jQuery原型上，就是给jQuery的元素集合使用

语法：$.fn.extend({添加的方法})
使用：$.fn.extend({a:function() {} })

相当于扩展了一个a方法给jQuery的元素集合，如果调用，就书写$.(选择器)‘

插件扩展全选

使用插件扩展

扩展写好方法来操作全选，先准备扩展内容

一，selectAll()

判断元素集合内是不是所有的元素的checked都是true，将来使用的时候：$(元素).selectAll()

返回一个结果，true或者false，true表示元素集合内所有元素的checked都是true
false表示元素集合内至少有一个元素checked是false

1，为了$(元素).selectAll调用方式

扩展在原型上$.fn.extend({ })

2，循环遍历元素集合

拿到元素集合的方法

使用jQuery的元素集合方法，this一定是jQuery的元素集合，使用this

判断是不是全部选中

遍历，一个一个的去访问checked属性，提前定义一个flag变量为true，只要有一个的checked为false，就结束遍历

二，setChecked()

一旦执行的时候，给元素集合内的所有元素设置checked属性，接收一个参数，true或者false，将来调整的时候$(元素).setChecked你如果不传递，默认是true，全都设置checked为true，如果你传递了一个false，全都设置checked为false

需要遍历元素集合

（为了达到隐式迭代）

我们封装的方法可以使用，但是使用完毕，就结束了，不能链式编程。

因为要链式编程，每一个方法都要依靠元素集合调用，我的方法执行完毕之后，返回值是undefined，不能继续链式编程，再方法里面this就是元素集合

reture this
就能向外返回一个元素集合，就可以链式编程

三，getChecked()

拿到元素集合内第一个元素的checked属性

jQuery的插件

jQuery-validate：主要是用来做表单验证的插件

下载插件

导入文件

先导入jQuery.js
再导入jQuery-validate.js

正式使用

获取form标签
调用validate() 方法，传递参数为一个对象
在validate的参数对象中属性rules
表示校验规则（rules是一个对象）

jQuery的入口函数

其实就是window.onload这个函数
语法：$().ready(function() {})

入口有一个更加简单的方法：
$(function() { } )

区别：
window.onload：所有资源加载完毕后执行
$().ready():DOM结构加载完毕就执行