45 jQuery常用API
2020-06-10 本文已影响0人
CurryCoder
技术交流QQ群:1027579432，欢迎你的加入！
欢迎关注我的微信公众号：CurryCoder的程序人生
1.jQuery基础选择器
- 原生JS获取元素的方式很多、很杂，而且兼容性情况不一致。因此，jQuery给我们做了封装，使获取元素统一标准。
- 语法格式：
$('选择器') // 里面选择器直接写CSS选择器即可，但是要加引用
jQuery基础选择器.png
2.jQuery层级选择器
jQuery层级选择器.png
3.jQuery隐式迭代
-
jQuery设置样式：
$('div').css('属性','值'); - 隐式迭代：遍历内部DOM元素(伪数组形式存储)的过程。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
4.jQuery筛选选择器
jQuery筛选选择器.png
5.jQuery筛选方法[重点]
jQuery筛选方法.png
- 重点记忆：parent()、children()、find()、siblings()、eq()。
6.jQuery中的排他思想
- 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
7.jQuery中的样式操作
7.1 操作css方法
- jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。
-
参数只写属性名，则是返回属性值。
$(this).css("color"); - 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用加单位和引号。
$(this).css("color", "red"); - 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号分隔开，属性名可以不用加引号。如果是复合属性必须采取驼峰名命名。如果属性值不是数字，必须加引号。
$(this).css({"color": "red", "font-size": "14px"});
7.2 设置类样式方法[重点]
- 作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
-
添加类
$('div').addClass("current"); -
删除类
$('div').removeClass("current"); -
切换类
$('div').toggleClass("current");
7.3 类操作与className区别
- 原生JS中的className会覆盖元素原先里面的类名。
- jQuery里面的类操作只是对指定类进行操作，不影响原先的类名。
8.jQuery动画效果
-
jQuery给我们封装了很多的动画效果，最常见的如下所示：
jQuery动画效果.png
8.1 显示、隐藏与切换效果
- 显示语法规范：
show([[speed], [easing], [fn]]) - 显示参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 隐藏语法规范：
hide([[speed], [easing], [fn]]) - 隐藏参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 切换语法规范：
toggle([[speed], [easing], [fn]]) - 切换参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
8.2 滑动效果
- 下拉滑动效果语法规范：
slideDown([[speed], [easing], [fn]]) - 下拉滑动效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 上拉滑动效果语法规范：
slideUp([[speed], [easing], [fn]]) - 上拉滑动效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 切换滑动效果语法规范：
slideToggle([[speed], [easing], [fn]]) - 切换滑动效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
8.3 事件切换
- 事件切换语法规范：
hover([over,]out) - 事件切换参数说明：
- over：鼠标移动到元素上要触发的函数(相当于mouseenter)
- out：鼠标移出元素要触发的函数(相当于mouseleave)
8.4 动画队列及其停止排队方法
- 动画或效果队列：动画或效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
-
停止排队：
stop() - 停止排队说明：
- stop()方法用于停止动画或效果。
- 注意：stop()写到动画或效果的前面，相当于停止结束上一次的动画。
8.5 jQuery淡入淡出效果
- 淡入效果语法规范：
fadeIn([[speed],[easing], [fn]]) - 淡入效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 淡出效果语法规范：
fadeOut([[speed],[easing], [fn]]) - 淡出效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
- 淡入淡出切换效果语法规范：
fadeToggle([[speed],[easing], [fn]]) - 淡入淡出切换效果参数说明：
- 参数都可以省略，无动画直接显示；
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
-
渐进方式调整到指定的透明度语法规范
fadeTo([[speed],opacity, [easing], [fn]]) - 渐进方式调整到指定的透明度参数说明：
- opacity透明度必须写，取值0~1之间。
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)，必须写。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
8.6 自定义动画animate[重点]
- 语法规范：
animate(params, [speed], [easing], [fn]) - 参数说明：
- params: 想要修改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果复合属性则需要采用驼峰命名法borderLeft，其余参数都可以省略。
- speed：三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如：1000)。
- easing:用来指定切换效果，默认是swing，可用参数linear。
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
