JQuery常用操作归纳

一、CSS操作

1. addClass()：向被选元素添加一个或多个类

2. removeClass()：从被选元素删除一个或多个类

3. toggleClass()：对被选元素进行添加/删除类的切换操作

4. css()：设置或返回样式属性

例如：$('button').onclick(function(){ $('p').css('color','red')} );

5. removeAttr()：从被选元素中移除属性

例如：$('button').click( function(){$('p').removeAttr('id class');} );

二、操作元素

var oLi = $(' <li> ');  oLi.html( 'hello' );  $(' ul ').append(oLi);

结果为：<ul><li>hello</li></ul>

三、删除元素

1. remove()：删除被选元素及其子元素

2. empty()： 从被选元素中删除子元素

3. unwrap()：删除被选元素的父元素

注：remove方法可接受一个参数，对被删元素进行过滤

四、获取内容/设置属性

1. text()：设置或返回所选元素的文本内容

2. html()：设置或返回所选元素的内容

3. val()：设置或返回表单字段的值

4. attr()：设置或返回所选元素的属性值

5. width()/height()：设置或返回元素的宽高（不含内外边距、边框）

6. innerWidth()/innerHeight()：宽高（含内边距）

7. outerWidth()/outerHeight()：宽高（含内边距和边框）

五、元素移形换位

 insertAfter()、appendTo()、after()、append()、prepend()、before()

1. appendTo()：在被选元素的结尾插入内容

2. prepend()：在被选元素的开头插入内容

3. after()：在被选元素之后插入内容

4. before()：在被选元素之前插入内容

六、JQuery遍历

1. 向上遍历DOM树：parent()、parents()、parentsUntil()

注：parentsUntil()方法返回介于两个给定元素之间的所有祖先元素

2. 向下遍历DOM树：children()、find()

注：前者只寻找到下一级，后者找所有的元素

3. 水平遍历：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil().

注：siblings()返回所选元素的所有同胞元素

        next()返回被选元素的下一个同胞元素

        nextUntil()返回介于两个给定参数之间的所有同胞元素

        prev一类返回前面的同胞元素

4. 过滤：first()、last()、eq()、filter()、not()

5. each()方法为每个匹配的元素规定运行的函数

$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});

七、jQuery运动特效

1. 隐藏/显示

hide( speed,callback )、show()、toggle()两者间切换

注：可选speed参数：“slow”、“fast”或毫秒，可选callback参数是动作执行完毕后所执行的函数名称（下同）。

2. 淡入淡出

fadeIn(speed,callback)、fadeOut()、fadeToggle()、fadeTo()

3. 滑动方法

slideDown(speed,callback)向下展开、slideUp()向上收起、slideToggle()

4. jQuery动画

①animate()、stop()        $(selector).animate( {params},speed,callback );

注：当使用animate()时，必须使用驼峰法书写所有的属性名，例如：

$("button").click(function(){
$("div").animate({paddingLeft:'50px'});
});

②animate()支持队列功能，使用多个animate，会逐一调用，例如：

$("button").click(function(){
var div = $("div");
div.animate({height:'300px',opacity:'0.4'},'slow');
div.animate({width:'300px',opacity:'0.8'},'slow');
div.animate({height:'100px',opacity:'0.4'},'slow');
div.animate({height:'100px',opacity:'0.8'},'slow');
})

2016/12/6后续更新......