[JavaScript知识库]jQuery常用的API

1.jQuery 选择器

2021年8月10日

11:04

1.1 jQuery 基础选择器

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

?

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

?

1.2 jQuery 层级选择器

1.3 隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

1.4 jQuery 筛选选择器

1.5 jQuery 筛选方法（重点）

1.6 链接编程

链接编程是为了节省代码量，看起来更优雅

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

2. jQuery 样式操作

2.1 操作css方法

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

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

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

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

??????? $(this).css("color","red");

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

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

2.2 设置类样式方法

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

1. 添加类

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

1. 移除类

$("div").remove("current");

1. 切换类

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

2.3 类操作与className区别

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

jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

3. jQuery 效果

2021年8月11日

17:44

3.1 显示隐藏效果

1. 隐藏语法规范

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

1. 隐藏参数

• 参数都可以省略，无动画直接显示。
• speed：三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000);
• easing：(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
• fn：回调函数，在动画完成是执行的函数，每一个元素执行一次。

3.2 滑动效果

1.下滑效果语法规范

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

2.下滑效果参数

• 参数都可以省略。
• speed：三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000);
• easing：(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
• fn：回调函数，在动画完成是执行的函数，每一个元素执行一次。

1.上滑效果语法规范

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

2.上滑效果参数

• 参数都可以省略。
• speed：三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000);
• easing：(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
• fn：回调函数，在动画完成是执行的函数，每一个元素执行一次。

1.滑动切换效果语法规范

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

2.滑动切换效果参数

• 参数都可以省略。
• speed：三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000);
• easing：(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
• fn：回调函数，在动画完成是执行的函数，每一个元素执行一次。

3.3 事件切换

hover([over,]out)

• over:鼠标移动元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素要触发的函数（相当于mouseleave）

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

1.动画或效果队列

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

2.停止排队

stop()

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

?

3.5 淡入淡出效果

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

fadeTo（[[speed],opacity,[easing],[fn]]）

?

2.效果参数

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

• speed：三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000)。必须写
• easing：(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
• fn：回调函数，在动画完成是执行的函数，每一个元素执行一次。

?

3.6 自定义动画 animate

1.语法

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

?

2.参数

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

• speed：三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如：1000);
• easing：(Optional)用来指定切换效果，默认是“swing”,可用参数“linear”。
• fn：回调函数，在动画完成是执行的函数，每一个元素执行一次。

?