JQ常见样式操作方法

JQ常见样式操作方法

1、JQ操作CSS方法

---

• 返回属性值：
  $(‘this’).css(‘color’);在css里直接给出属性名称即可得到该属性值；

---

• 修改属性值：

$(this).css(‘color’,‘red’);
$(this).css(‘width’,100);
写法：‘属性名’+‘值’，如果是数字的话可以不用双引号;

---

• 修改属性值（对象形式）

$(this).css({‘color’:‘white’,‘font-size’:‘20px’});
属性与属性值直接用“；”冒号隔开，可以多个属性值一起修改；

2、JQ的addClass，removeClass、toggleClass

基本写法：$(this).addClass/removeClass/toggleClass(‘className’)
分别表示，添加、删除、添加与删除的姿态中切换；

3、JQ的动画

提示：speed的值：slow、fast、自定毫秒数，callback为回调函数可有可无

• 隐藏和显示： hide(speed,callback)、show(speed,callback)、toggle(speed,callback).

用法示例：$(this).toggle(‘slow’);

• 下滑上滑： slideUp(speed,callback)、slideDown(speed,callback)、slideToggle().

用法示例：$(this).slideToggle(‘slow’);

• 渐入渐出： fadeIn(speed,callback)、fadeOut(speed,callback)、fadeToggle(speed,callback)、fadeTo(speed,opacity,callback)

用法示例：$(this).fadeToggle(‘slow’);
$(this).fadeTo(‘slow’,0.4);

• 自定动画：$(selector).animate({params},speed,callback);

示例：$(this).animate({width:‘400px’},fast);

• 暂停动画： $(selector).stop(stopAll,goToEnd);
  由于以上动画样式存在多个时候，动画会出现排队现象，即每个动画入队后逐个执行，可以通过暂停动画来使该元素的动画停止。
  stopALl~true/false;是否停止所有动画。默认false，会停止当前活动，后面的动画继续运行；；
  goToEnd~true/false;是否 立即 完成当前动画，默认false；

示例：$(this).stop()//按钮会停止当前活动的动画，但允许已排队的动画向前执行。
$(this).stop(true)//按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
$(this).stop(true,ture)//会立即完成当前活动的动画，然后停下来。