jQuery操作样式、动画、节点操作

• jQuery操作样式

1、样式属性操作
.css() 作用：设置或获取元素的样式属性值

①设置单个样式：$(selector).css("color", "red");
②设置多个样式：$(selector).css({"color": "red", "font-size": "30px"})
var cssStyle = {"color": "red", "font-size": "30px"};
$(selector).css(cssSTyle);
③获取样式属性操作：$(selector).css( "font-size");

2、类操作

①添加类样式：

$(selector).addClass(className) 为指定元素添加类classNam

②移除类样式：

$(selector).removeClass(className) 为指定元素移除类 className
$(selector).removeClass(); 不指定参数，表示移除被选中元素的所有类

③判断有没有类样式：

$(selector).hasClass(calssName) 判断指定元素是否包含类 className

④切换类样式：

$(selector).toggleClass(className) 为指定元素切换类，该元素有类则移除，没有指定类则添加。

• jQuery操作属性

attr()-----设置或修改样式，操作的是style属性,用法和css()一样

① 设置单个属性----$(selector).attr('属性名','属性值')
② 设置多个属性----$(selector).attr({'属性名1':'属性值1','属性名2':'属性值3'.....})
③ 获取属性值----$(selector).attr('属性名')
④ 移出属性----$(selector).removeAttr('属性名')

prop()----对于布尔类型的属性，在jQuery1.6版本以后用attr方法就没有效果了，prop方法 prop用法跟attr方法一样。
boolean类型的值： checked selected disabled readOnly

 ① 设置checked属性-----$(selector).prop('checked', false)
 ③ 获取checked属性值-----$(selector).prop('checked')

• jQuery动画

1、显示隐藏动画show()和hide()
show()显示和hide()隐藏：从左上角到右下角变化的过程， 参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
参数一：可以是数值类型（毫秒数值）或者字符串类型（①fast（200ms） ②normal（400ms） ③slow（600ms）④特殊：如果随便写一个字符串，代表normal）；
参数二：动画执行完后立即执行的回调函数。

$(selector).show();---没有参数，没有动画效果
$(selector).show(2000);---一个参数
$(selector).show(2000, function() {});----两个参数

2、滑入滑出动画slideDown()、slideUp()和slideToggle()
滑入滑出，类似卷帘门，从上往下的一个过程
（1）滑入动画效果
作用：让元素以下拉动画效果展示出来

1.不传入参数： 也有动画效果，有一个默认的normal
2.传一个参数： slideDown(speed)参数的类型：毫秒数值，固定字符串
3.传两个参数： slideDown(speed,function(){})

（2）滑出动画效果
作用：让元素以上拉动画效果隐藏起来

 $(selector).slideUp(speed,callback);同slideDown一样

（3）滑入滑出切换动画效果

 $(selector).slideToggle(speed,callback);

3、淡入淡出动画fadeIn()、 fadeOut()和fadeToggle()、fadeTo
（1）淡入动画效果
作用：让元素以淡淡的进入视线的方式展示出来

 $(selector).fadeIn(speed, callback);

（2） 淡出动画效果
作用：让元素以渐渐消失的方式隐藏起来

$(selector).fadeOut(speed, callback);

（3）淡入淡出切换动画效果
作用：通过改变不透明度，切换匹配元素的显示或隐藏状态

 $(selector).fadeToggle(speed, callback);

（4）改变不透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
作用：调节匹配元素的不透明度

 $(selector).fadeTo(1000, .5); 
 参数1：时长，参数2：不透明值、 0全透，1全不透 

4、自定义动画
animate():自定义动画
参数1： 对象，{属性：属性值}
参数2： speed 动画执行的事件
参数3：动画执行的效果: linear swing(默认效果)
参数4： 回调函数

5、stop()停止动画

$(selector).stop(clearQueue,jumpToEnd);

参1：是否清空所有的后续动画,true:直接停止动画,false（默认）:当前动画停止，执行动画队列的下一个动画效果。
参2：是否立即执行完当前正在执行的动画,true: 直接跳转到最终动画效果
false(默认):不跳转，保持当前状态。

• jQuery节点操作

1、操作元素节点
（1）动态创建元素

var spanNode = $("<span>我是一个span元素</span>");

（2）添加元素append() 参数jQuery对象

$(selector).append($node);// 在$(selector)中追加$node

作用：在被选元素的最后一个子元素（或内容）后面插入内容（页面中存在或者创建出来的元素都可以）
如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新 的位置。
如果是给多个目标追加一个元素，那么append()方法的内部会复制多份这个元素，然后追加到多个目标里面去。

	①append
	$(selector).append('<div></div>');// 在$(selector)中追加div元素，参数为htmlString
    ② appendTo()
    $(selector).appendTo(node);把$(selector)追加到node中去
     ③prepend()
    $(selector).prepend(node);作用：在元素的第一个子元素前面追加内容或节点
     ④after()
    $(selector).after(node);作用：在被选元素之后，作为兄弟元素插入内容或节点
     ⑤before()
    $(selector).before(node);作用：在被选元素之前，作为兄弟元素插入内容或节点

（4）html创建元素
作用：
①设置内容，参数为普通字符串
②创建元素，如果传入的是符合html规则的字符串，就会创建出相应的元素

$(selector).html('<span>这是span标签</span>');// 动态创建元素

③获取内容

 $(selector).html();// 获取html内容，有什么返回什么 ，调用这个方法，首先会清空原来的内容，然后再设置新的内容

（5）清空元素

$(selector).empty();// 清空指定元素的所有子元素()// 没有参数
$(selector).html("");// 把自己(包括所有内部元素)从文档中删除掉
$(selector).remove();

（6）复制元素

(selector).clone();// 复制$(selector)所匹配到的元素// 返回值为复制的新元素