jQuery常用的API

1.jQuery 选择器

2021年8月10日

11:04

1.1 jQuery 基础选择器

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

 

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

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

 

1.2 jQuery 层级选择器

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

1.3 隐式迭代（重要）

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

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

1.4 jQuery 筛选选择器

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

1.5 jQuery 筛选方法（重点）

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

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：回调函数，在动画完成是执行的函数，每一个元素执行一次。