JavaScript框架——jQuery（二）过时

\(jQuery\) 常用\(API\)

\(jQuery\)选择器

\(jQuery\)基础选择器

\(原生js获取元素的方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。\)

$('选择器') // 里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID选择器	$("#id")	获取指定id的元素
全选选择器	$('*')	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

\(jQuery\)层级选择器

名称	用法	描述
子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素；注意：并不会获取孙子层级的元素
后代选择器	$("ul li")	使用空格，代表后代选择器，获取ul下的所有li元素，包括子孙元素

知识铺垫

\(jQuery\)设置样式

$('div').css('属性','值')

隐式迭代（重要）

遍历内部DOM元素(伪数组形式存储)的过程叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

\(jQuery\)筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$('li:eq(2)')	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$('li:odd')	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even')	获取到的li元素中，选择索引号为偶数的元素

\(jQuery\)筛选方法（重点）

语法	用法	说明
parent()	$('li').parent();	查找父级
children(selector)	$('ul').children('li')	相当于$('ul>li')，近一级（亲儿子）
find(selector)	$('ul').find('li')	相当于$('ul li')后代选择器
siblings(selector)	$('.first').siblings('li')	查找兄弟结点，不包括自己本身
nextAll([expr])	$('.first').nextALL()	查找当前元素之后所有的同辈元素
hasClass(class)	$('div').hasClass('protected')	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$('li').eq(2)	相当于$('li:eq(2)')，index从0开始

重点记住parent() children() find() siblings() eq()

\(jQuery\)样式操作

操作\(CSS\)方法

\(jQuery\)可以用\(css\)方法来修改简单元素样式；也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

$(this).css('color');

2. 参数是属性名，属性值，逗号是设置一组样式，属性必须加引号，如果是数字可以不用跟单位和引号。

$(this).css('color','red');

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({
    "color":"white",
    "font-size":"20px"
});

设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类

$('div').addClass('current');

2. 移除类

$('div').removeClass('current');

3. 切换类

$('div').toggleClass('current');

\(jQuery\)类操作与\(className\)区别

原生\(JS\)中\(className\)会覆盖元素原先里面的类名。

\(jQuery\)里面类操作知识对指定类进行操作，不影响原先的类名。

jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下：

显示隐藏效果

显示语法规范

show([speed,[easing],[fn]])

显示参数

(1) 参数都可以省略,无动画直接显示。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

切换效果

切换语法规范

toggle([speed,[easing],[fn]])

切换参数

(1) 参数都可以省略,无动画直接显示。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动效果

下滑效果语法规范

slideDown([speed,[easing],[fn]])

下滑效果参数

(1) 参数都可以省略。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定滑动效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

上滑效果语法规范

slideDown([speed,[easing],[fn]])

上滑效果参数

(1) 参数都可以省略。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定滑动效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动切换语法规范

slideToggle([speed,[easing],[fn]])

滑动切换效果参数

(1) 参数都可以省略。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定滑动效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

事件切换

hover(over[,out])

（1）over:鼠标移到元素上啊哟触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

如果只写一个函数，那么鼠标经过和鼠标离开，都会触发这个函数。

动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止排队

stop()

stop()方法用于停止动画或效果。

注意：stop()写到动画或者效果的前面，相当于停止结束上一次动画。

淡入淡出效果

淡入效果语法规范

fadeIn([speed,[easing],[fn]])

淡入效果参数

(1) 参数都可以省略。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定淡入效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

淡出效果语法规范

fadeOut([speed,[easing],[fn]])

淡出效果参数

(1) 参数都可以省略。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定淡出效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])

淡入淡出切换效果参数

(1) 参数都可以省略。

(2) speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。

(3) easing:(Optional)用来指定淡入淡出效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

渐进方式调整到指定不透明度

fadeTo([[speed],opacity,[easing],[fn]])

效果参数

（1）opacity透明度必须写，取值0~1之间。

（2） speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。必须写

（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

自定义动画animate

语法

animate(params[,speed,easing,fn])

#### 参数 （1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性需要采取驼峰命名法borderLeft。其余参数都可以省略。

（2） speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。必须写

（3）easing：（Optional）用来指定动画效果，默认是“swing”，可用参数“linear”

(4) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。