jQuery知识点笔记上

1、jQuery是什么？

jQuery是一个快速、小巧且功能丰富的JavaScript库。它使HTML文档的遍历和操作、事件处理、动画和Ajax等操作变得更加简单，并提供了一个易于使用的API，可以跨多种浏览器工作，结合了多功能性和可扩展性。
jQuery中封装了很多方法，学习jQuery就是学习当中方法的使用。
jQuery特性：隐式迭代、链式编程。

2、如何使用jQuery？

使用步骤：
（1）引入jQuery文件；
下载jQuery文件：
jQuery官网：https://jquery.com/

jQuery版本：
1.x：支持老浏览器，比如IE678，停止更新
2.x：不支持老浏览器，停止更新
3.x：不支持老浏览器，更新中
引入jQuery代码：

（2）写一个入口函数；
入口函数有两种写法：

jQuery入口函数和JavaScript的入口函数window.onload的区别：

a、jQuery入口函数可以写多个，而window.onload只能写一个；
b、执行时间不同，jQuery入口函数要先于window.onload函数执行；因为jQuery要等待页面上dom树加载完后执行，window.onload要等待页面上所有资源（dom树、外部图片、图片等）加载完执行。

（3）使用jQuery选择器找到要操作的元素，进行操作。

3、$是一个函数

jQuery文件结构：jQuery文件是一个自执行函数；

$是一个函数，因此参数传递不同，效果也不同；
如果参数传递的是一个匿名函数，就成为了入口函数；
如果参数传递的是一个字符串，就成为了选择器，也有可能创建一个标签；
如果参数是一个dom对象，它就会把参数转换为jQuery对象。

4、dom对象和jQuery对象

dom对象（Document Object Model）：文档对象模型，定义了访问HTML文档对象的一套属性、方法和事件。
dom对象就是原生js获取到的对象，比如document.getElementById("one")；
特点：只能调用dom方法或属性，不能调用jQuery的属性或方法。

jQuery对象：利用jQuery选择器获取到的对象就是jQuery对象。
特点：只能调用jQuery对象的属性和方法，不能调用原生js的dom对象的属性和方法；
ps：定义jQuery对象的变量时，最好使用$开头。
jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集。

dom对象和jQuery对象的相互转换：

5、获取、设置文本内容text()

获取文本：
text()方法不给参数，获取标签的文本，会获取到这个标签中所有的文本，包括后代元素中的文本；
包含了多个dom元素的jQuery对象，通过text()方法获取文本，会把所有dom元素的文本获取到。

设置文本：
text()方法含参数，参数就是要设置的文本，设置的文本将覆盖原来的文本；
如果设置的文本中包含HTML标签，不会被解析出来，仍然是以文本形式显示；
包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有dom元素的文本都设置上（隐式遍历)。

6、获取、设置样式css()

获取样式：
将css()的参数设置为想要获取的样式值的样式名称；
在IE浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框，比如border-top-width：上边框宽度；
获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom元素的样式。

设置样式：
css()参数为样式名、样式值用来设置元素的样式（设置的样式是行内样式）；
设置包含了多个dom元素的jQuery对象的样式，将为所有dom元素设置给定的样式。

7、jQuery选择器

jQuery选择器返回的是jQuery对象。
jQuery选择器分为：基本选择器、层级选择器、过滤选择器、筛选选择器（方法）。

7.1、基本选择器

语法：类似于CSS；
分为：ID选择器、类选择器、标签选择器、并集选择器、交集选择器。

7.2、层级选择器

语法：类似于CSS；
分为：子代选择器、后代选择器。

7.3、过滤选择器

语法：

7.4、筛选选择器（方法）

语法：

8、mouseenter事件和mouseleave事件

mouseover事件在鼠标移动到选取的元素及其子元素上时触发；
mouseenter事件只有在鼠标移动到选取的元素上时才会触发；

9、class类操作

jQuery中的类操作有：添加类、移除类、判断类、切换类；
添加类addClass()：

移除类removeClass()：

判断类hasClass()：判断某个元素是否含有某个类，返回值true、false；

切换类toggleClass()：如果元素有某个类，就移除这个类；没有就添加这个类。

jQuery知识点笔记下

10、jQuery动画

10.1、显示show()隐藏hide()

显示show()：
当为show()添加参数时，就可以实现动画效果；
有两个参数：
参数1：执行动画的时长，以毫秒为单位，也可以使用代表时长的字符串：fast（相当于200毫秒）、normal（相当于400毫秒）、slow（相当于600毫秒），如果代表时长的单词写错了，相当于normal；
参数2：代表动画执行完毕后的回调函数；

隐藏hide()：语法与show()类似；

切换toggle()：当状态为显示时切换为隐藏，当状态为隐藏时，切换为显示，语法与show()类似；

10.2、滑入slideDown()滑出slideUp()

默认参数400毫秒；
滑入slideDown()：
slideDown()不加参数时也可以实现动画效果，但是slideDown()也有两个参数；
参数1：执行动画的时长；
参数2：代表动画执行完毕后的回调函数；

滑出slideUp()：语法和slideDown类似；

切换slideToggle()：

10.3、淡入fadeIn()淡出fadeOut()

没有参数时默认400毫秒；
淡入fadeIn()：

淡出slideOut()：

切换fadeToggle()：

淡出到某种长度fadeTo()：

10.4、自定义动画animate()

animate()有四个参数：
参数1：必选，对象类型，代表的是需要做动画的属性；
参数2：可选的，代表的是执行动画的时长，单位毫秒；
参数3：可选的，代表的是动画是缓动还是匀速，有两个可设置值：默认为swing（缓动）、linear（匀速）；
参数4：动画执行完毕后的回调函数。
示例：为id为div1的元素设置自定义动画

10.5、动画队列与停止动画

当我们多次触发一个元素上的动画时，就会出现动画队列，后面触发的动画要等前面的动画执行完才能开始执行；
我们可以使用stop()方法停止动画：
两个参数（都是布尔类型，如果不写参数，默认两个参数都是false）：
参数1：是否清除队列；
参数2：是否跳转到最终结果。
示例：设置元素div的动画的stop()

11、节点操作

11.1、动态创建元素html()和$()

html()：
当html()不给参数时，可以获取元素的所有内容，包括文本、标签等；
当html()给了参数时，可以设置元素的内容，新设置的内容将覆盖元素原来的内容，与text()不同的是html()可以解析html代码，因此可以创建节点；

$()：
可以创建节点，但是创建的节点只存在于内存中，如果需要显示，则需要追加到页面；

11.2、添加节点

添加节点的方法有append()、prepend()、before()、after()、appendTo()。

append()：作为最后一个子元素添加；
父元素.append(子元素);

prepend()：作为第一个子元素添加；
父元素.prepend(子元素);

before()：把元素B插入到元素A的前面，兄弟元素添加；
元素A.before(元素B);

after()：把元素B插入到元素A的后面，兄弟元素添加；
元素A.after(元素B);

appendTo()：把子元素作为父元素的最后一个子元素添加；
子元素.appendTo(父元素);

11.3、清除节点empty()和移除节点remove()

empty()：
不仅清除了节点，并且把节点的事件也清除了，相对于html()较为安全；

remove()：

11.4、克隆节点clone()

clone()克隆出来的节点（包括后代节点）只存在于内存中，如果需要显示，则需要追加到页面；
clone()方法具有参数：
true：代表将事件一起克隆；
false：代表不会克隆事件。
ps：不给参数默认false，不管参数是什么都会克隆后代元素。

12、获取、设置表单元素内容val()

获取：
val()不给参数就可以获取内容；

设置：
val()中给的参数就是要设置的内容；

13、属性操作attr()和removeAttr()

设置属性：
attr('属性名','属性值');

获取属性：
attr('属性名');

移除属性：
removeAttr('属性名');

14、布尔类型属性操作prop()

jQuery1.6以后，对于checked、selected、disabled这一类布尔类型的属性，不能用attr()，只能用prop()。
示例：

15、尺寸和位置操作：宽width()和height()

width()和height()：
获取、设置元素的宽高，不包括padding/border/margin；

innerWidth()和innerHeight()：
返回元素的宽高，包括padding；

outerWidth()和outerHeight()：
返回元素的宽高，包括padding/border；

outerWidth(true)和outerHeight(true)：
返回元素的宽高，包括padding/border/margin；

获取页面可视区域的宽高：

16、offset()和position()

offset()：
获取元素距离document的位置，返回值是一个对象，对象里面包含了top和left的值；

position()：获取的是元素距离有定位的父元素的位置，返回值是一个对象，对象里面包含了top和left的值。

17、scrollLeft()和scrollTop()

设置或者获取垂直滚动条的位置：

18、事件

18.1、注册事件on

jQuery与原生js注册事件的区别：jQuery给同一个元素注册相同的事件，后一个事件不会把前面的覆盖掉，而原生js则会覆盖前面的事件。
on注册简单事件：

on注册委托事件：

18.2、解绑事件off()

示例：

18.3、事件触发trigger()

18.4、事件对象

事件对象：注册一个事件，触发它时系统自动生成的记录这个事件触发时的一些信息就是事件对象，比如触发时有没有按住某个键等；
事件对象用事件参数来获取。

事件对象常用的三个坐标：
pageX和pageY：触发点距离页面最顶部的左上角的位置（会计算滚动条的距离）；
screenX和screenY：触发点距离屏幕最左上角的值；
clientX和clientY：可视区，触发点距离页面左上角的值（忽视滚动条）；

阻止事件冒泡（子元素事件组织父元素事件冒泡）：stopPropagation()；

阻止浏览器默认行为：preventDefault()；

既阻止事件冒泡，又阻止默认行为：return false;

获取按键：keyCode。

19、链式编程

链式编程是jQuery的一大特性，只要方法返回值是jQuery对象，那么就可以继续点出方法。
end()：回到上一个状态。
jQuery方法只有jQuery对象能使用。
示例：

20、显示迭代each()

each()：遍历jQuery对象集合，为每个匹配的元素执行函数；

lis是li对象数组，遍历$lis，并为每个li设置对应的opacity；

21、多库共存

查看jQuery版本：

当引入多个jQuery时，后引入的jQuery文件将覆盖原来的jQuery文件（多库冲突）。
多库共存：noConflict()