链式编程

$("div").css("color","red");
$("div").siblings().css("color","pink");
$("div").css("color","red").siblings().css("color","pink");

JQuery 样式操作

操作 CSS 的方法

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

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

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

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

3.参数可以是对象形式,便于设置多组样式.属性名和属性值用冒号隔开,属性可以不用加引号,数字可以不用加引号,复合属性需要用驼峰命名法

$("div").css({
  width:400,
  heigth:400,
  backgroundColor:"red"
})

设置类样式操作

1.添加类–>addClass(类名)
2.删除类–>removeClass(类名)
3.切换类–>toggleClass(类名)

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

JQuery 操作影响原来样式

类操作和 className 的区别

原生 JS 中 className 会覆盖元素原先里面的类名
JQuery 里面类操作只是对指定类进行从操作,不影响原先的类名.

JQuery 效果

显示隐藏 滑动 淡入淡出

显示与隐藏效果

语法规范: show([speed],[easing],[fn])
显示参数:
1)参数都可以省略,表示无动画显示
2)speed:三种预定速度之一的字符串(“slow”,“normal”,fast")或表示动画时长的毫秒数值
3)easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次

滑动

下拉: slideDown()
上拉:slideUp()
切换:slideToggle()

动画队列及停止动画队列的方法

动画队列是指:在同一时间内触发多个动画,每个动画都必须完成
stop() 用于停止动画或效果
stop()写在动画或者效果前面,相当于停止了上一次的动画或效果

淡入淡出效果

淡入 fadeIn()
淡出 fadeOut()
切换 fadeToggle()
修改透明度 fadeTo()