jQuery学习第二天

jquery学习day02

jquery选择器

jquery里面的排他思想

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

链式编程

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

$(this).css("color","red").siblings().css("color",'')

jquery样式操作

操作css方法

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

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

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

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

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

   $(this).css({
   "color":"white",
   "font-size":"20px"
   });

设置类样式方法

1. 添加类

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

2. 移除类

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

3. 切换类

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

类操作与className区别

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

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

jquery效果

显示隐藏

1. show()

   show([speed],[easing],[fn])

2. hide()

   hide([speed],[easing],[fn])

3. toggle()

   toggle([speed],[easing],[fn])

滑动

1. slideDown()

   slideDown([speed],[easing],[fn])

2. slideUp()

   slideUp([speed],[easing],[fn])

3. slideToggle()

   slideToggle([speed],[easing],[fn])

淡入淡出

1. fadeIn()

   fadeIn([speed],[easing],[fn])

2. fadeOut()

   fadeOut([speed],[easing],[fn])

3. fadeToggle()

   fadeToggle([speed],[easing],[fn])

4. fadeTo()

   fadeTo([speed],opacity,[easing],[fn])

自定义动画

animate()

animate(params,[speed],[easing],[fn])

参数解释

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

easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"liner"（表示匀速）。

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

opacity:透明度必须写，取值0~1之间。

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。

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

1. 动画或效果队列

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

2. 停止排队

   stop()

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

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