parent,parents,children,prev,prevAll,next,nextAll,siblings,find
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Javascript/jquery-1.12.3.min.js" type="text/javascript"></script> <style type="text/css"> #d1{ width:500px; height:300px; background-color:Gray;} #d1_1,#d1_2,#d1_3{ width:300px; height:50px; background-color:Green;} #d1_1_1{ width:150px; height:15px; background-color:Lime;} #d1_1_2{ width:150px; height:15px; background-color:Lime;} #s_1{ display:block; width:150px; height:10px; background-color:Red; padding:2px;} </style> </head> <body> <table> <tr id="t1"><td id="td1"><span id="qq">!</span>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> <div id="d1"> <div id="d1_1"> <div id="d1_1_1">d1_1_1</div> <span id="s_1"><div style=" width:50px; height:5px; background-color:Lime; ">in</div></span> <div id="d1_1_2">d1_1_2</div> </div> <div id="d1_2"></div> <div id="d1_3"></div> </div> <input type="button" id="btn" value="123456" /> <script type="text/javascript"> $("#btn").click(function () { //parent(selector):查找父元素，可傳入selector進行過濾 $("#qq").parent().css("background-color", "black"); $("#qq").parent().parent().remove(); $("#qq").parent("td").css("background-color", "black"); //parents(selector): 查找所有的祖先節點 $("#qq").parents("tr").css("background-color", "black"); //children(selector):返回所有的子節點，不過該方法只會返回直接的子節點，不會返回所有的子孫節點 $("#t1").children().css("background-color", "black"); //prev():返回該節點的上一個兄弟節點,就是前面一個元素 (同級的子節點--同胞) $("#d1_1_2").prev().css("background-color", "black"); //prevAll():返回該節點之前所有的節點 (同級的子節點--同胞) $("#d1_1_2").prevAll().css("background-color", "black"); //next():返回該節點的下一個兄弟節點 $("#d1_1_1").next().css("background-color", "black"); //nextAll():返回該節點之后所有的節點 $("#d1_1_1").nextAll().css("background-color", "black"); //siblings():返回該節點所有的兄弟節點，不分前后 $("#s_1").siblings().css("background-color", "black"); //find(selector):返回該節點所有的子孫節點 $("#d1_1").find("div").css("background-color", "black"); $("#d1_1").find("div").each(function () { alert($(this).html()); }) }) </script> </body> </html>
find選擇器：采用的是深度搜索優先的策略進行檢索
從上面的圖中我們可以看到，find()先找到第一個.item元素，然后開始檢索.item里的子元素.s；.item里的子元素檢索完成以后，開始尋找第二個.item元素，然后接着檢索第二個.item里的子元素；第二個.item檢索完成后，開始進行第三個。深度優先的策略就是：先悶頭一直往下找，下一個沒有元素時再確認是否有next()兄弟元素，如果沒有兄弟元素，那么再往上返回一級，確認這個元素有沒有兄弟元素，直到第一級的子元素；如果當前元素有兄弟元素，那么就從這個兄弟元素開始往下執行深度搜索。待所有的子元素檢索完畢后，find()方法結束。
from:https://www.cnblogs.com/xumengxuan/p/4217866.html