jQuery

介绍

jQuery为一个前端方法库，主要封装了各种dom操作

优点：
1.选择器
2.链式编程
3.隐式迭代

特点：
全兼容
2.0以前兼容IE
2.0后不再兼容IE

当你引入一个jQuery后，会暴露两个变量名：1.jQuery 2.$

效果、用法一样

前端方法库

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

dom元素如果想用jQuery的方式，用$（）包起来

选择器

对元素进行获取

基本选择器

语法：$（选择器）

$("div")
$(".class")
$("#id")
$("div>ul>li:nth-child(1)")
//class选择器怎么写，里面就可以怎么写

返回值：满足条件的所有元素（id选择器除外，只能拿一个）
放在一个数组里返回给用户
都是一个集合的形式（jQuery元素集合）

特殊选择器

语法：$（选择器）
对你已经存在的选择器进行修饰
1.：first
2.：last
3.：eq（索引值）

按照索引排列的

4.：odd

按照索引排列的奇数个
注意区别:nth-child(odd)

5.：even

按照索引排列的偶数个
注意区别:nth-child(even)

$("div:first")//所有div标签的第一个
$("div:last")//所有div标签的最后一个
$("div:eq(1)")//所有div标签里索引值为1的
$("li:odd")//索引值为奇数的li
$("li:nth-child(odd)")//第奇数个li
$("li:even")//索引值为偶数的li
$("li:nth-child(even)")//第偶数个li

筛选器

对已经获取到的jQuery元素集合进行二次筛选

只有jQuery元素集合才能使用，原生dom对象不能使用

1..first 集合中的第一个

2..last 集合中的最后一个

3..eq（索引值） 集合中指定索引的那一个

4..next（） 当前元素的下一个

5.nextAll（）
语法一：元素集合.nextAll（）获取到当前元素后面的所有兄弟元素
语法二：元素集合.nextAll（选择器）获取到当前元素后面所有指定选择器的元素

6..nextUntil（）
语法一：元素集合.nextUntil（）获取到当前元素后面的所有兄弟元素
语法二：元素集合.nextUntil（选择器）获取到当前元素后面的所有兄弟元素，直到某选择器为止

不包含元素集合本身，也不包含选择器

7..prev（） 当前元素的上一个

8..prevAll（）
语法一：元素集合.prevAll（）获取到当前元素上面的所有兄弟元素
语法二：元素集合.prevAll（选择器）获取到当前元素上面所有指定选择器的元素

从元素集合依次向上拿（从下往上）

9..prevUntil（）
语法一：元素集合.prevUntil（）获取到当前元素上面的所有兄弟元素
语法二：元素集合.prevUntil（选择器）获取到当前元素上面的所有兄弟元素，直到某选择器为止

不包含元素集合本身，也不包含选择器

10..parent（）获取当前元素的父元素

11..parents（）
语法一：元素集合.parents（） 拿到结构父级的所有父元素
语法二：元素集合.parents（选择器）拿到结构父级的所有父元素中符合选择器的元素

最大拿到html，document是节点拿不到

12..children（）
语法一：元素集合.children（）拿到该元素的所有子元素
语法一：元素集合.children（选择器）拿到该元素的所有子元素中符合选择器的元素

13..siblings（） 拿到该元素的所有兄弟元素，自己除外

14..find（）找到该元素中所有后代元素里符合选择器条件的元素

15..index（）获取该元素在其父元素里的索引值（即兄弟元素集合排列的索引值）

<div class="body">
	<div>
		<ul>
			<li></li>
			<li class="obj"></li>
			<li class="box"></li>
			<span></span>
			<li class="box"></li>
			<li class="obj"></li>
			<li></li>
		 </ul>
	</div>
</div>
$("li").first//li的集合中第一个li

$("li").last//li的集合中最后一个li

$("li").eq(2)//li的集合中索引值为2的li

$("span").next()//span元素的下一个元素

$("span").nextAll()//span元素后面所有元素
$("span").nextAll(".box")//span元素后面所有带class=“box”的元素

$("span").nextUntil()//span元素后面所有兄弟元素
$("span").nextUntil(".obj")//span元素后面所有兄弟元素直到带class=“obj”的元素为止

$("span").prev()//span元素的上一个元素

$("span").prevAll()//span元素上面所有元素
$("span").prevAll(".box")//span元素上面所有带class=“box”的元素

$("span").prevUntil()//span元素上面所有兄弟元素
$("span").prevUntil(".obj")//span元素上面所有兄弟元素直到带class=“obj”的元素为止

$("span").parent()//span元素的父元素（ul）
$("span").parents()//span元素的父级所有元素（ul、div、div）
$("span").parents(".body")//span元素的结构父级元素中带class=“body”的元素

$("ul").children()//ul的所有子元素
$("ul").children(".box")//ul的子元素中带class=“box”的元素

$("span").siblings()//span所有兄弟元素，自己除外

$(".body").find("span") <div class="body">中所有后代<span>

$("span").index()//获取索引值为3

操作文本内容

主要操作元素内的文本和超文本

注：属于jQuery的方法，智能通jQuery元素集合调用，原生dom不能调用

1..html（）等价于原生里的innerHTML
语法一：元素集合.html（） 获取该元素的超文本内容，以字符串的形式返回

为保证html的结构，只能获取第一个元素的超文本内容

语法二：元素集合.html（“内容”） 设置元素集合内的超文本内容

完全覆盖式的写入，元素集合内有多少元素，就写入多少元素

<div>
	<span>1111</span>
</div>
<div>
	<span>222</span>
</div>
<div>
	<span>333</span>
</div>
<div>
	<span>444</span>
</div>
$("div").html()//只能获取<span>1111</span>
$("div").html("<p>666</p>")//全部div里的span改成<p>666</p>

2..text（）等价于原生里的innerText
语法一：元素集合.text（） 获取该元素的文本内容，以字符串的形式返回

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

语法二：元素集合.text（“内容”） 设置元素集合内元素的文本内容

完全覆盖式的写入，元素集合内有多少元素就写入多少元素，不会解析内容只会以文本的形式导入进标签内

3..val（）
语法一：元素集合.val（） 获取元素集合内元素的value值

只能获取第一个元素的value值

语法二：元素集合.val（“内容”） 设置元素集合内元素的value值

完全覆盖式的写入，元素集合内有多少元素就写入多少元素

操作元素类名

1..addClass（） 添加class名
元素集合.addClass（“class名”）

2..removeClass（） 删除class名
元素集合.removeClass（“class名”）

3..hasClass（） 判断有没有该类名
元素集合.hasClass（“class名”）输出true / false

4..toggleClass（）切换类名
如果原先有就删除，如果原先没有就添加
元素集合.toggleClass（“class名”）

操作元素样式

.css（）
语法一：元素集合.css（“样式名”）
获取元素的某个样式的值
不管是行内还是非行内（外联、内嵌）都能获取到

只能获取第一个元素

语法二：元素集合.css（“样式名”,“样式值”）.css（“样式名”,“样式值”）…
设置元素行内样式，元素集合内有多少元素就设置多少元素

设置时如果单位是px可以不写
如果原先存在值，会覆盖更改

语法三：元素集合.css（{样式名1：样式值1，样式名2：样式值2，…}）
批量给元素设置行内样式，元素集合内有多少元素就设置多少元素

设置时如果单位是px可以不写
如果原先存在值，会覆盖更改

事件绑定

1..on（）
语法一：元素集合.on（“事件类型”，事件处理函数）
元素集合内有多少元素，就给多少元素绑定事件

语法二：元素集合.on（“事件类型”，“选择器”，事件处理函数）
事件委托的绑定，把选择器元素委托给元素集合里的元素

选择器元素要是元素集合内元素的后代元素

this指向的不是元素集合而是元素集合中后代元素里你点击的那个元素

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
	$("ul").on("click","li",function(){
		console.log("我执行了")
		console.log(this)//this指向你点击的那个li
	})
</script>

语法三：元素集合.on（“事件类型”，复杂数据类型，事件处理函数）
元素集合内有多少元素，就给多少元素绑定事件
复杂数据类型是事件触发时，传给事件里的参数，在事件对象里有一个叫data的成员，就是你传递进来的参数

$("li").on("click",{name:'jack'},function(x){
	console.log("我执行了")
	console.log(x)
})

语法四：元素集合.on（“事件类型”，“选择器”，任意数据类型，事件处理函数）
以事件委托的形式，带上传递参数
把选择器所属事件，委托给了元素集合内的事件
数据位置，就是在事件触发的时候传递给事件处理函数参数

$("ul").on("click","li","hello world",function(x){
	console.log("我执行了")
	console.log(x)
})

语法五：元素集合.on（{“事件类型1”，事件处理函数1，“事件类型2”，事件处理函数2，…}）
一次性给元素绑定多种事件

没法进行事件委托了

2..one（）
和on（）方法的使用方式一样，但只能执行一次事件

3..off（）
用来解除事件绑定
语法一：元素集合.off（事件类型）
解除元素身上该事件类型的所有事件处理函数

语法二：元素集合.off（事件类型，事件处理函数）
解除元素身上该事件类型的某一个事件处理函数

4..trigger（）
用js代码的方式来触发事件
元素集合.trigger（事件类型）

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
$("li").on("click",function(){
	console.log("我执行了")
})
$("li").trigger("click")//自动执行了4次
</script>

事件函数

jQuery给我们提供了一些简洁的绑定事件的方式，把一些常用事件直接封装成了函数
例：click（）、mouseover（）等
这些方法可以直接使用，带有隐式迭代（快速绑定事件）
元素集合.事件类型（事件处理函数）
元素集合.事件类型（数据类型，事件处理函数）

数据类型会在data上显示

$("div").click(function(){})

唯一特殊事件，鼠标移入移出

.hover（）
一个结合了移入移出的事件（模拟css中:hover的行为）
元素集合.hover（移入事件处理函数，移出事件处理函数）

如果只传递一个参数，移入移出都触发

节点操作

创建节点

$（html结构字符串）

const div = $("<div>我是一个创建的节点</div>")

插入节点

内部插入（父子关系）

1..append（）
父元素.append（子元素）
把子元素插入到父元素内部，放在末尾的位置

2..appendTo（）
子元素.appendTo（父元素）
把子元素插入到父元素内部，放在末尾的位置

3..prepend（）
父元素.prepend（子元素）
把子元素插入到父元素内部，放在最前面位置

4..prependTo（）
子元素.prependTo（父元素）
把子元素插入到父元素内部，放在最前面位置

注：当执行多次的时候以最后一个为准

$("div").append(p)
$("div").prepend(p)//执行这个，上面那个不执行

外部插入（兄弟关系）

1..after（）
存在元素.after（插入元素）
把插入元素放在存在的元素的后面，兄弟关系
2..insertAfter（）
插入元素.insertAfter（存在元素）
把插入元素放在存在的元素的后面，兄弟关系
3..before（）
存在元素.before（插入元素）
把插入元素放在存在的元素的前面，兄弟关系
4..insertBefore（）
插入元素.insertBefore（存在元素）
把插入元素放在存在的元素的前面，兄弟关系

删除节点

1..remove（）
元素集合.remove（）
把自己从自己的父元素里移出

元素集合.find（）.remove（）移除该元素的子节点

2..empty（）
元素集合.empty（）
把自己变成空标签，把所有后代节点全部移出

替换节点

1..replaceWith（）
换下的节点.replaceWith（换上的节点）
2..replaceAll（）
换上的节点.replaceAll（换下的节点）

克隆节点

.clone（）
元素集合.clone（参数1，参数2）参数选填

带所有子元素节点都过来

第一个参数默认是false，表示是否克隆元素本身的事件
第二个参数默认是根据第一个参数，表示是否克隆元素后代节点的事件（第一参数是false的时候，第二参数没有意义）

操作元素属性

原生属性（id class…）

H5自定义属性（dataset、data-xxx）

自定义属性（getAttribute()）

.attr（）和 .removeAttr（）

元素集合.attr（属性名）
获取元素的该属性，主要用来获取标签属性，包括一些自定义属性

元素集合.attr（属性名，属性值）
设置元素的标签属性，只是把属性设置在标签上，当做一个自定义属性使用

对于原生属性有些有用，有些没用
无论设置的是什么数据类型，都会变成字符串类型

元素集合.removeAttr（属性名）
删除元素身上的自定义属性
id class等属性也可以删除

多用于删除attr设置的属性

.prop（）和 .removeProp（）

元素集合.prop（属性名）
主要用于获取元素的原生属性，也可以获取元素的自定义属性

注：attr方法设置的自定义属性获取不到

元素集合.prop（属性名，属性值）
主要用于设置元素的原生属性，也可以设置元素的自定义属性

注：设置什么数据类型，获取时就是什么数据类型。
他设置的自定义属性不会显示在标签上，而是存储在元素身上（如同对象向里面添加东西）

元素集合.removeProp（属性名）
删除元素的属性，但只能删除由prop设置的自定义属性，原生属性不能删除

.data（）和 .removeData（）

元素集合.data（属性名）
获取使用data（）方法存储的数据，获取元素身上data-xxx的属性

元素集合.data（属性名，属性值）
设置的时候，只是把数据存储在元素身上的某一个对象空间内
但不会出现在标签上，不会由data-xxx的属性出现

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

获取元素尺寸

1..width()和 .height()
语法:元素集合.width（）或元素集合.height（）获取的是元素内容位置的尺寸

2..innerwidth()和.innerHeight()
语法:元素集合.innerwidth（）或元素集合.innerHeight（）
获取的是元素内容 + padding 区域的尺寸

3..outerwidth()和 .outerHeight()
语法:元素集合.outerwidth（）或元素集合.outerHeight（）
获取的是元素内容 +padding + border区域的尺寸

4..outerwidth(true)和 .outerHeight(true)
语法:元素集合.outerwidth(true）或元素集合.outerHeight(true)
获取的是元素内容 + padding + border + margin区域的尺寸

原生js里获取尺寸（占地）如果是display：none 获取不到，而jQuery不影响

操作元素位置

1..ottset()
读取
元素集合.offset()
返回值为一个对象，里面包含x，y
相对页面左上角的绝对坐标

注意:读取出来是一个对象，你需要值得时候（offset().x或offset().y）
不能继续链式编程,只能作为链式编程的结尾

设置
元素集合.offset({ top: xxx，left: xxx })
设置的是相对于页面左上角的绝对位置

注意:你设置的时候，如果父子元素都要动,考虑先后顺序

2..position()
读取
元素集合.position()
返回值为一个对象,里面包含x,y
就是元素的定位关系

如果你定位的是 right和bottom，那么会自动计算成left 和 top

基础动画

.show() 显示
.hide() 隐藏
toggle() 切换

本身显示就隐藏，本身隐藏就显示

三个方法操作的是display: none和 display:block
三个的语法是一样的：方法名(运动时间ms，运动曲线，回调函数)
=>运动时间:多长时间运动结束
=>运动曲线:什么方式运动（贝塞尔运动曲线或者ease、linear…）
=>回调函数:运动结束后触发

折叠动画

.slideDown() 下拉显示
.slideUp() 上拉隐藏
.slideToggle() 切换显示和隐藏
三个的语法是一样的：方法名(运动时间ms，运动曲线，回调函数)

如果想上拉显示，下拉隐藏，可以设置个大小一样的盒子套上，加上绝对定位和相对定位，定位bottom

渐隐渐显动画

通过操作元素的opacity达到效果
.faseIn() 渐显 opacity 0~1
.fadeout() 渐隐 opacity 1～0
.fadeToggle() 切换
三个的语法是一样的：方法名(运动时间ms，运动曲线，回调函数)
.fadeTo() 运动到指定透明度
语法:fadeTo(时间,指定透明度，运动曲线,回调函数)

综合动画

可以按照你的设定去进行运动
.animate()
animate({},时间，运动曲线，回调函数)
{ }:书写你要运动的属性

颜色相关的属性运动不了
css3的 2d 和3d动画效果运动不了

$(' button' ).click(() =>{
	$(' div' ).animate({
		width: 300,
		height: '400px',
		borderRadius: '50%’//圆角样式
})

停止动画

当你给一个元素设置动画以后，如果快速触发，会停不下来，直到你所有的触发都执行完毕为止（点100次触发100次）

.stop()
元素集合.stop()
当代码执行到这句的时候，不管运动到什么程度，立刻停下来
运动到什么位置就停止在什么位置
.finish()
元素集合.finish()
当代码执行到这句的时候，不管运动到什么程度，直接去到运动结束位置

animatecss动画插件

jQuery深浅拷贝

jQuery里面提供了一个进行深浅拷贝的方法+ $.extend()
语法:
1.$.extend(对象1，对象2，对象3，...)
->把从第二个参数开始的每一个对象的数据拷贝到第一个对象中->是一个浅拷贝
2.$.extend(true，对象1，对象2，对象3，...)
->把从第三个参数开始的每一个对象的数据拷贝到第二个对象中
->是一个深拷贝
=>注意:
->如果你要进行拷贝，不管是深拷贝还是浅拷贝
->至少传递两个参数

selectAll()

＋判断元素集合内是不是所有的元素的 checked 都是 true
+将来使用的时候:$(元素).selectAll()
=>返回一个结果,true或者 false
=>返回一个结果,true或者 false
=> true表示元素集合内所有的元素checked都是 true
=> false表示元素集合内至少有一个元素checked是 false1-1,为了$(元素).selectAll()调用方式
=>扩展在原型上 $.fn.extend({ })

setchecked()

一旦执行的时候,给元素集合内的所有元素设置 checked属性
接收一个参数，true或者 false
=>将来你调用的时候$(元素).setchecked()
=>你如果不传递,默认是 true,全都设置checked为true=>如果你传递了一个 false，全都设置checked为false＋需要遍历元素集合
=>为了达到隐式迭代+我们封装的方法可以使用
=>但是使用完毕，到这里就结束了，不能继续链式编程了=>因为要达到链式编程,每一个方法都要依靠元素集合调用=〉我这个方法执行完毕以后，返回值是undefined
=>不能继续链式编程了

jQuery 的插件扩展

jQuery再设计的时候，封装了好多的方法
+但是怕你不够用，提供了插件扩展机制
+你可以向jQuery里面扩展一些内容
+插件扩展机制提供了两个方法
1.扩展到jQuery本身，作为全局方法调用=>语法:$.extend({你扩展的方法})
2.使用:$.extend({ a: function ()0})->相当于扩展了一个a方法再jQuery本身
3.如果你向调用，就书写$.a()

jQuery 的入口函数

其实就是 window.onload这个函数
语法:$().ready(function（){})
入口函数有一个简写的语法
$(function ())
区别：
window.onload:所有资源加载完毕后执行
$().ready():DOM 结构加载完毕就执行