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 class='wrap'></div>"); //把所有的段落用一個新創建的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更新，新增高級用法與便捷函數