JQuery常用操作归纳
JQuery常用操作总结
一、样式属性操作
1. addClass()：向被选元素添加一个或多个类
2. removeClass()：从被选元素删除一个或多个类
3. toggleClass()：对被选元素进行添加/删除类的切换操作
4. css()：设置或返回样式属性
例如：
$('p').css('color') //获取
$('p').css('color','red') ; //设置
5. removeAttr()：从被选元素中移除属性
例如：
$('button').click( function(){$('p').removeAttr('id class');} );
二、元素操作
1. remove()：删除被选元素及其子元素
2. empty()： 从被选元素中删除子元素
3. unwrap()：删除被选元素的父元素
4. wrap(): 把所有匹配的元素用其他元素的结构化标记包裹起来
例如：
$("p").wrap("
"); //把所有的段落用一个新创建的div包裹起来，与wrap()配合使用5. replaceWith(): 将所有匹配的元素替换成指定的HTML或DOM元素
6. replaceAll(selector): 用匹配的元素替换掉所有 selector匹配到的元素
三、获取内容/设置属性
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())
});
});七、高级用法与便捷函数（new !!!）
1. 制作jQuery插件
jQuery.fn.extend - 扩展 jQuery 元素集来提供新的方法
jQuery.fn.test - test为自定义函数名
例如：
$.fn.check = function(){
return this.each(function() { this.checked = true; });
}2. 数据缓存
data(key, value) - 在元素上存放或读取数据，返回jQuery对象
removeData() - 删除缓存
例如：
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined$.type(obj) - 检测obj的数据类型
例如：
jQuery.type("test") === "string"
jQuery.type(function(){}) === "function"
jQuery.type([]) === "array"
jQuery.type(new Date()) === "date"
jQuery.type(/test/) === "regexp"4. 对象合并，拷贝
$.extend - 用一个或多个其他对象来扩展一个对象，返回被扩展的对象
例如：
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//结果如下：
//settings == { validate: true, limit: 5, name: "bar" }$.extend的另一种用法是拷贝
例如：
var x = {a:1, b:2, c:3};
var y = {};
jQuery.extend(true, y, x);
//y = {a:1, b:2, c:3};第一个参数设置为true时，为递归合并（深拷贝）
八、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后续更新......
2018/7/3更新，新增高级用法与便捷函数