1、parent()：獲得當前匹配元素集合中每個元素的父元素，該方法只會向上一級對 DOM 樹進行遍歷
$('li.item-a').parent().css('background-color', 'red'); // 尋找類名為item-a的li元素的父節點元素，並設置背景色為紅色
1.1、parents() ：返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
$("span").parents().css({"color":"red","border":"2px solid red"}); // 將span元素直到HTML節點之前的所有父節點元素設置邊框樣式
1.2、parentsUntil() ：返回介於兩個給定元素之間的所有祖先元素
<!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父) <div style="width:500px;">div (曾祖父) <ul>ul (祖父) <li>li (直接父) <span>span</span> </li> </ul> </div> </body> </html>
2、children()：返回返回被選元素的所有直接子元素，該方法只會向下一級對 DOM 樹進行遍歷
$('ul.level-2').children().css('background-color', 'red'); // 尋找類名為level-2的ul元素，並將其子節點背景色設置為紅色
2.1、find() ：返回被選元素的后代元素，一路向下直到最后一個后代
<!DOCTYPE html> <html> <head> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("div").find("span").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (current element) <p>p (子) <span>span (孫)</span> </p> <p>p (child) <span>span (孫)</span> </p> </div> </body> </html>
3、創建節點：寫好html內容，直接用$()包裹
var $newDiv = $("<div id="newDiv"></div>");
4、clone()：生成被選元素的副本，包含子節點、文本和屬性
$("p:first").clone(true); // 復制每個 p 元素，事件處理器同樣被復制到p元素
5、append()：在被選元素的結尾（仍然在內部）插入指定內容
$("p").append(function(n){
return "<b>This p element has index " + n + "</b>";
}); // 在每個 p 元素的結尾添加內容
6、appendTo()：在被選元素的結尾（仍然在內部）插入指定內容（與append()不同之處在於：內容和選擇器的位置，以及 append() 能夠使用函數來附加內容。）
$("<b> Hello World!</b>").appendTo("p"); // 在每個 p 元素的結尾添加內容
7、prepend()：在被選元素的開頭（仍位於內部）插入指定內容
$("p").prepend("<b>Hello world!</b> "); // 在每個 p 元素的開頭插入內容
8、prependTo()：在被選元素的開頭（仍位於內部）插入指定內容（與prepend()差異在於語法：內容和選擇器的位置，以及 prepend() 能夠使用函數來插入內容。）
$("<b>Hello World!</b>").prependTo("p"); // 在每個 p 元素的開頭插入文本
9、before() ：在被選元素前插入指定的內容（被選元素外部）
$("p").before(function(n){
return "<p>The p element below has index " + n + "</p>";
}); // 在每個段落前面插入新的段落
10、after() ： 在被選元素后插入指定的內容（被選元素外部）
$("p").after(function(n){
return "<p>The p element above has index " + n + "</p>";
}); // 在每個 p 元素后插入內容
11、insertBefore()：在被選元素前插入 HTML 元素（被選元素外部）
$('<span>insertBefore content</span>').insertBefore('p'); // 在p元素前插入span元素
12、insertAfter() ：在被選元素后插入 HTML 元素（被選元素外部）
$('<span>insertAfter content</span>').insertAfter('p'); // 在p元素后面插入span元素
13、remove() ：移除被選元素，包括所有文本和子節點；除了這個元素本身得以保留之外，remove() 不會保留元素的 jQuery 數據
$('p').remove();
13.1、removeAttr() ：從被選元素中移除屬性
$("p").removeAttr("id"); // 從任何 p 元素中移除 id 屬性
13.2、removeClass() ：從被選元素移除一個或多個類（注釋：如果沒有規定參數，則該方法將從被選元素中刪除所有類）
$("p").removeClass("intro"); // 移除所有 <p> 的 "intro" 類
$("p").removeClass(); // 刪除<p>元素的所有類
14、detach() ：移除被選元素，包括所有文本和子節點；detach() 會保留所有綁定的事件、附加的數據
$('p').detach()
15、empty() ：從被選元素移除所有內容，包括所有文本和子節點
$('p').empty();
16、replaceWith() ：用指定的 HTML 內容或元素替換被選元素
$('p').replaceWith('<b>replaceWith content!</b>') // 用粗體文本替換所有段落
17、replaceAll() ：指定的 HTML 內容或元素替換被選元素 （與replaceWith差異在於語法：內容和選擇器的位置，以及 replaceWith() 能夠使用函數進行替換。）
$('p').replaceAll('<b>replaceAll content!</b>');
18、wrap() ：把每個被選元素放置在指定的 HTML 內容或元素中
$("p").wrap(function(){ return "<div></div>" }); // 用 div 包裹每個段落
18.1、unwrap() ：刪除被選元素的父元素
$("p").unwrap(); // 刪除所有 <p> 元素的父元素
19、wrapAll() ：在指定的 HTML 內容或元素中放置所有被選的元素
$("p").wrapAll("<div></div>"); // 用一個 div 包裹所有段落
20、warpInner()：使用指定的 HTML 內容或元素，來包裹每個被選元素中的所有內容 (inner HTML)
$("p").wrapInner("<b></b>"); // 加粗段落中的文本
21、each()：為每個匹配元素規定運行的函數（遍歷指定元素）
$("li").each(function(){
alert($(this).text())
}); // 輸出每個列表項的值
22、text()：設置或返回被選元素的文本內容
$("p").text("Hello world!"); // 改變所有 p 元素的文本內容
$("p").text(); // 獲取p元素的文本內容
23、html()：返回或設置被選元素的內容 (inner HTML)
$("p").html("Hello <b>world!</b>"); // 改變 p 元素的內容
$("p").html(); // 獲取p元素的內容
text()和HTML()的區別：
區別一：text()函數可用於xml 文檔 和 html 文檔，而 html() 只能用於html文檔。
區別二：html()函數不僅僅顯示文本，輸出的還包括標簽對和文本，而text()只有文本。
24、val()：返回或設置被選元素的值，元素的值是通過 value 屬性設置的。該方法大多用於 input 元素。如果該方法未設置參數，則返回被選元素的當前值
$(":text").val("Hello Kitty"); // 改變文本域的值
25、next()：獲得匹配元素集合中每個元素緊鄰的同胞元素。如果提供選擇器，則取回匹配該選擇器的下一個同胞元素
$("p").next(".selected").css("background", "yellow"); // 查找每個段落的下一個同胞元素，僅選中類名為 "selected" 的段落，設置背景色為黃色
25.1、siblings()：返回被選元素的所有同胞元素
$("h2").siblings().css({"color":"red","border":"2px solid red"}); // 為h2標簽同級的所有元素設置邊框樣式
$("h2").siblings("p").css({"color":"red","border":"2px solid red"}); // 為h2標簽同級的所有p元素設置邊框樣式
25.2、next() ：返回被選元素的下一個同胞元素，該方法只返回一個元素
$("h2").next().css({"color":"red","border":"2px solid red"}); // 為h2元素的下一個同胞元素設置邊框樣式
25.3、nextAll() ：返回被選元素的所有跟隨的同胞元素
$("h2").nextAll().css({"color":"red","border":"2px solid red"}); // 為h2元素的后面所有同胞元素設置邊框樣式
25.4、nextUntil() ：返回介於兩個給定參數之間的所有跟隨的同胞元素
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"}); // 為h2元素后的所有同胞元素，直到h6元素設置邊框樣式
25.5、prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿着同胞元素向后遍歷，而不是向前）。
26、attr() ：設置或返回被選元素的屬性值
（1）設置被選元素的屬性和值：
$("img").attr("width","180"); // 設置圖像的 width 屬
（2）返回被選元素的屬性值：
$("img").attr("width"); // 返回圖像的寬度
（3）使用函數來設置屬性/值：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("img").attr("width",function(n,v){ return v-50; }); }); }); </script> </head> <body> <img src="/i/eg_smile.gif" width="128" height="128" /> <br /> <button>減少圖像的寬度 50 像素</button> </body> </html>
（4）為被選元素設置一個以上的屬性和值：
$("img").attr({width:"50",height:"80"}); // 設置圖像的 width 和 height 屬性
27、獲取並設置 CSS 類：
- addClass()：向被選元素添加一個或多個類
- removeClass()：從被選元素刪除一個或多個類
- toggleClass()：對被選元素進行添加/刪除類的切換操作
- css()：設置或返回樣式屬性
- hasClass() ：檢查被選元素是否包含指定的 class
.important { font-weight:bold; font-size:xx-large; } .blue { color:blue; }
例子：
$("div").addClass(""important blue""); // 向 div 元素添加類 "important blue"
$("div").removeClass("blue"); // 從div元素上刪除類blue
$("div").toggleClass("blue"); // div元素切換 CSS 類blue
$("p").css("background-color"); // 返回 p 元素的背景色
$("p").css("background-color","yellow"); // 設置 p 元素的背景色
$("p").css({"background-color":"yellow","font-size":"20px"}); // 為 p 元素設置多個樣式
$("p").hasClass("intro"); // 檢查段落是否擁有類 "intro"
28、處理元素和瀏覽器窗口的尺寸：
- width()：設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
- height()：設置或返回元素的高度（不包括內邊距、邊框或外邊距）
- innerWidth()：返回元素的寬度（包括內邊距）
- innerHeight()：返回元素的高度（包括內邊距）
- outerWidth()：返回元素的寬度（包括內邊距和邊框）
- outerHeight()：返回元素的高度（包括內邊距和邊框）
- outerWidth(true)：返回元素的寬度（包括內邊距、邊框和外邊距）
- outerHeight(true)：返回元素的高度（包括內邊距、邊框和外邊距）
例子：
$("#div1").width(); // 返回id為div1元素的寬
$("#div1").height(); // 返回id為div1元素的高
$("#div1").innerWidth(); // 返回id為div1元素的寬度（包括內邊距）
$("#div1").innerHeight(); // 返回id為div1元素的高度（包括內邊距）
$("#div1").outerWidth(); // 返回id為div1元素的寬度（包括內邊距和邊框）
$("#div1").outerHeight(); // 返回id為div1元素的寬度（包括內邊距和邊框）
$("#div1").outerWidth(true); // 返回id為div1元素的寬度（包括內邊距、邊框和外邊距）
$("#div1").outerHeight(true); // 返回id為div1元素的寬度（包括內邊距、邊框和外邊距）
$(window).width(); // 顯示文檔和窗口的寬
$(window).height(); // 顯示文檔和窗口的高
$("#div1").width(320); // 調整 div 的寬
$("#div1").height(320); // 調整 div 的高
$("#div1").width(320).height(320); // 調整 div 的尺寸
29、元素的過濾：
- first() ：返回被選元素的首個元素
- last() ：返回被選元素的最后一個元素
- eq() ：返回被選元素中帶有指定索引號的元素
- gt()：選擇器選取 index 值高於指定數的元素（index 值從 0 開始）
- lt()：選取 index 值小於指定數的元素（index 值從 0 開始）
- filter() ：允許您規定一個標准。不匹配這個標准的元素會被從集合中刪除，匹配的元素會被返回
- not() ：返回不匹配標准的所有元素（提示：not() 方法與 filter() 相反）
例子：
$("div p").first(); // 返回首個 <div> 元素內部的第一個 <p> 元素
$("div p").last(); // 返回最后一個 <div> 元素中的最后一個 <p> 元素
$("p").eq(1); // 返回第二個 <p> 元素（索引號 等於1）
$("tr:gt(2)"); // 返回第3個<tr>元素后的所有<tr>元素（索引號大於2）
$("tr:lt(2)"); // 返回前3個<tr>元素（索引號小於2）
$("p").filter(".intro"); // 返回帶有類名 "intro" 的所有 <p> 元素
$("p").not(".intro"); // 返回不帶有類名 "intro" 的所有 <p> 元素