jQuery快速开发（二）
文章目录
- 样式操作
- 操作css样式
- 操作类
- jQuery常用效果
- 显示与隐藏
- 上拉与下拉
- 淡入淡出
- 自定义动画
- 部分参数含义
- 总结
样式操作
操作css样式
$("selector").css("attribute");//获取样式
$("selector").css("attribute","value");//设置样式
其中，设置样式时参数可以是一个对象，用来批量设置样式。
操作类
$("selector").addClass("classname");//添加类
$("selector").removeClass("classname");//移除类
$("selector").toggleClass("classname");//切换类
在原生JS中对类名className的操作会覆盖原类名，而在jQuery中，类操作只是对类名进行操作。现实案例有tab栏切换等。
jQuery常用效果
显示与隐藏
$("selector").show([speed],[easing],[fn]);//显示操作
$("selector").hide([speed],[easing],[fn]);//隐藏操作
$("selector").toggle([speed],[easing],[fn]);//切换操作
其中，speed参数控制元素显示与隐藏的速度，easing参数控制切换效果，fn则代表回调函数，在元素显示或隐藏后有选择性地触发事件。
上拉与下拉
$("selector").slideDown([speed],[easing],[fn]);//下拉操作
$("selector").slideUp([speed],[easing],[fn]);//上拉操作
$("selector").slideToggle([speed],[easing],[fn]);//切换操作
现实中的案例有下拉菜单等。
淡入淡出
$("selector").fadeIn([speed],opacity,[easing],[fn]);//淡入操作
$("selector").fadeOut([speed],opacity,[easing],[fn]);//淡出操作
$("selector").fadeTo([speed],opacity,[easing],[fn]);//通过渐进的方式调整元素的不透明度
$("selector").fadeToggle([speed],opacity,[easing],[fn]);//淡入淡出效果切换操作
自定义动画
它的一般代码格式为：
$("selector").animate(params,[s],[e],[f]);//自定义动画
其中，params参数是元素的样式属性，一般为对象的形式。常见的案例有王者荣耀的手风琴效果。
部分参数含义
| 参数 | 含义 |
|---|---|
| selector | 选择器 |
| attribute | 属性 |
| value | 值 |
| classname | 类名 |
| opacity | 不透明度 |
总结
首先，本期的知识点很多，但都有很多共同点，只要熟练使用一至两种，其他的也极易上手。其次，知识点是死的，人是活的，当我们加入我们自己的思想、逻辑，然后对照代码格式进行操作，也能产生很多有趣的效果。最后，要注意的是，以上这些操作，比如显示隐藏、上拉下拉、淡入淡出等，如果短时间内触发多次，就会形成动画或效果队列，也就是说它必须等待执行完上次的操作才会执行下一次，而等待执行的动画或效果就会形成队列，我们对此的解决方法是加入stop()函数，且必须加在动画或效果之前，这样我们就能在触发下一次操作时，停止上一次的操作。