0
点赞
收藏
分享

微信扫一扫

jQuery 常用API

皮皮球场 2022-04-06 阅读 78

1. jQuery 选择器

1.1 jQuery 基础选择器

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

 1.2  jQuery 层级选择器

jQuery 设置样式

 1.3  隐式迭代(重要)

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

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

1.4  jQuery 筛选选择器

 1.5  jQuery 筛选方法(重点)

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

1.6  jQuery 里面的排他思想

想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。

案例:淘宝服饰精品案例分析

核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。

需要得到当前小li 的索引号,就可以显示对应索引号的图片

jQuery 得到当前元素索引号 $(this).index()  

中间对应的图片,可以通过  eq(index) 方法去选择

显示元素 show()   隐藏元素 hide() 

1.7  链式编程

链式编程是为了节省代码量,看起来更优雅。

使用链式编程一定注意是哪个对象执行样式.

2. jQuery 样式操作

2.1  操作 css 方法

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

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

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

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

2.2  设置类样式方法

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

1. 添加类

2.  移除类

3.  切换类

案例:tab 栏切换分析

点击上部的li,当前li 添加current类,其余兄弟移除类。

点击的同时,得到当前li 的索引号

让下部里面相应索引号的item显示,其余的item隐藏 

2.3  类操作与className区别

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

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

3. jQuery 效果

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

3.1  显示隐藏效果

显示

1. 显示语法规范

2. 显示参数

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

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

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

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

隐藏

 1. 隐藏语法规范

2. 隐藏参数

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

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

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

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

切换

1. 切换语法规范

2. 切换参数

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

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

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

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

建议:平时一般不带参数,直接显示隐藏即可。 

3.2  滑动效果

下滑

1. 下滑效果语法规范

2. 下滑效果参数

(1)参数都可以省略。

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

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

上滑

1. 上滑效果语法规范

2. 上滑效果参数

(1)参数都可以省略。

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

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

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

切换

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

2. 滑动切换效果参数

(1)参数都可以省略。

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

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

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

3.3  事件切换

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)

(2)out:鼠标移出元素要触发的函数(相当于mouseleave)

(3)如果只写一个函数,则鼠标经过和离开都会触发它 

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

1. 动画或效果队列

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

2. 停止排队

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

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

3.5  淡入淡出效果

淡入

1. 淡入效果语法规范

2. 淡入效果参数

(1)参数都可以省略。

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

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

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

淡出

1. 淡出效果语法规范

2. 淡出效果参数

(1)参数都可以省略。

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

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

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

切换

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

2. 淡入淡出切换效果参数

(1)参数都可以省略。

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

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

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

不透明度

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

2. 效果参数

(1)opacity 透明度必须写,取值 0~1 之间

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

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

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

3.6  自定义动画 animate

1. 语法

2. 参数

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

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

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

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

案例:王者荣耀手风琴效果分析

鼠标经过某个小li 有两步操作:

当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入

其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出

举报

相关推荐

0 条评论