jQuery操作

CSS操作：设置或者修改样式，操作的是style属性。

设置单个属性

$("#one").css("background","gray");//将背景色修改为灰色

设置多个属性

css(obj);

$("#one").css({
 "background":"gray",
 "width":"400px",
 "height":"200px"
});

注意：获取样式操作只会返回第一个元素对应的样式值。

class操作

addClass(name);

removeClass()           移除所有

removeClass("name");        移除单个

hasClass(name)             判断是否有，得到boolean值

toggleClass(name);          切换样式

1. 如果操作到的样式非常少，可以考虑css方法
2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作

jQuery动画

1.隐藏和显示

1.show([speed], [callback]);

speed(可选)：动画的执行时间
     1.如果不传，就没有动画效果。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
 callback(可选):执行完动画后执行的回调函数

2.hide([speed], [callback]);

speed(可选)：动画的执行时间
 1.如果不传，就没有动画效果。
 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
 callback(可选):执行完动画后执行的回调函数

3.Toggle(speed, callback); 

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

注意：show/hide：修改的是元素的width、height、opacity。

2.划入与滑出

1.slideUp(speed, callback);

speed(可选)：动画的执行时间
     1.如果不传，默认为normal，注意和show/hide的区别。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     3.固定字符串，slow(200)、normal(400)、fast(600)
 callback(可选):执行完动画后执行的回调函数

2.slideDown(speed, callback);

speed(可选)：动画的执行时间
     1.如果不传，默认为normal，注意和show/hide的区别。
     2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
     3.固定字符串，slow(200)、normal(400)、fast(600)
 callback(可选):执行完动画后执行的回调函数

3.切换$(selector).slideToggle(speed,callback);

如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

注意：slideUp/slideDown：修改的是元素的height

3.淡入与淡出

1.fadeIn(speed, callback);

speed(可选)：动画的执行时间
    1.如果不传，默认是normal。
    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
    3.固定字符串，slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数

2.fadeOut(speed, callback);

speed(可选)：动画的执行时间
 1.如果不传，默认是normal。
 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
 3.固定字符串，slow(200)、normal(400)、fast(600)
callback(可选):执行完动画后执行的回调函数

3.切换

fadeToggle(speed, callback);

如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

4.淡入淡出到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明； 而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

fadeTo(speed, value, callback)

可以设置具体的透明度
speed（必须）
value 0-1之间的数值(比如0.4)，表示淡到某一个值。
callback(可选) 回调函数

注意: fade系列方法：修改的是元素的opacity

5.自定义动画

$(selector).animate({params},[speed],[easing],[callback]);

{params}：要执行动画的CSS属性，带数字（必选）
speed：执行动画时长（可选）

easing:(可选，不选默认swing)两个值swing：在开头和结尾移动慢，在中间移动速度快。linear：匀速移动

callback：动画执行完后立即执行的回调函数（可选）

5.动画队列和停止动画

Query中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。

Query中有stop这个方法可以停止当前执行的动画，并且它有两个布尔参数，默认值都为false。第一个参数为true时会清空动画队列，第二个参数为true时会瞬间完成掉当前动画。所以，我们经常使用obj.stop(true,true)来停止动画。

stop(clearQueue, jumpToEnd);
第一个参数：是否清除动画队列
第二个参数：是否跳转到当前动画的最终效果

jQuery操作DOM参数

1.创建元素

$(htmlStr)

$("<span>这是一个span元素</span>");

2.添加新建的元素

$("div").append("<span>这是一个span元素</span>");

3.添加已经存在的元素

$("div").append($p);

注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。
（类似于剪切的功能）。

• append 会将元素添加到子元素的最后面
• prepend 会将元素添加到子元素的最前面
• after 会将元素添加到该元素的后面
• before 会将元素添加到该元素的前面

4.使用html方法清空元素

$("div").html("")

使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

5.清空元素之empty

empty：清空指定节点的所有元素，自身保留(清理门户)

$("div").empty();
清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）

6.删除元素之remove

remove：相比于empty，自身也删除（自杀）

$("div").remove();

7.克隆元素

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）
//cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();