021_遍历后代
1. children()方法
1.1. children()方法返回被選元素的所有直接子元素, 該方法只會向下一級對DOM樹進行遍歷。
1.2. children()方法接受一個選擇器表達式作為可選參數, 與我們傳遞到$()的參數的類型是相同的。如果應用該選擇器, 將測試元素是否匹配該表達式, 以此篩選這些元素。
1.3. 請注意, 與大多數jQuery方法一樣, children()不返回文本節點; 如果需要獲得包含文本和注釋節點在內的所有子節點, 請使用contents()。
1.4. 語法
$(selector).children() $(selector).children(selector)1.5. 參數
2. contents()方法
2.1. contents()方法獲得匹配元素集合中每個元素的子節點, 包括文本和注釋節點。
2.2. 語法
$(selector).contents()2.3. 例子
2.3.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>children()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("div").children().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("div").children('.myUl').css({"color":"red","border":"2px solid red"});});$('#btn3').click(function(){var c = $("div").contents();var ch = $("div").children();c = c.filter(function() {return this.nodeType == 3 && (this.nodeValue.trim().length > 0);});c.wrap('<span style="color:red;"></span>')});});</script><style type="text/css">.ancestors div{width: 500px; float: left;}.ancestors div, .ancestors div ul, .ancestors div li, .ancestors div b{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <span style="display: block;">body(曾曾祖父)</span><div>div(曾祖父)<ul class="myUl">ul(祖父) <li>li(直接父)<b>b元素</b></li></ul> </div><div>div(曾祖父)<ul>ul(祖父) <li>li(直接父)<b>b元素</b></li></ul> </div><span style="display: block; clear: left;"><button id="btn1">直接子元素</button> <button id="btn2">過濾的直接子元素</button><button id="btn3">獲得匹配元素集合中每個元素的子節點,包括文本和注釋節點</button></span></body> </html>2.3.2. 效果圖
3. find()方法
3.1. find()方法獲得當前元素集合中每個元素的后代, 不包含自身, 通過選擇器、DOM節點或jQuery對象來篩選。
3.2. find()方法第一個明顯特征是, 其接受的選擇器表達式、DOM節點或jQuery對象參數, 將通過測試這些元素是否匹配該參數來對元素進行過濾。而且這個參數是必需的, 如果我們需要實現對所有后代元素的取回, 可以傳遞通配選擇器'*'。
3.3. 語法?1
$(selector).find(selector)3.4. 參數
3.5. 語法?2
$(selector).find(element)3.6. 參數
3.7. 例子
3.7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>find()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("div").find('li').css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("div").find('.myUl').css({"color":"red","border":"2px solid red"});});$('#btn3').click(function(){$("div").find($('li')).css({"color":"red","border":"2px solid red"});});$('#btn4').click(function(){$("div").find('*').css({"color":"red","border":"2px solid red"});});$('#btn5').click(function(){$("div").find(document.getElementsByTagName('li')).css({"color":"red","border":"2px solid red"});});$('#btn6').click(function(){$("div").find(document.getElementsByClassName('myUl')).css({"color":"red","border":"2px solid red"});});});</script><style type="text/css">.ancestors div{width: 500px; float: left;}.ancestors div, .ancestors div *{ display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style></head><body class="ancestors"> <span style="display: block;">body(曾曾祖父)</span><div>div(曾祖父)<ul class="myUl">ul(祖父) <li>li(直接父)<b>b元素</b></li></ul> </div><div>div(曾祖父)<ul>ul(祖父) <li>li(直接父)<b>b元素</b></li></ul> </div><span style="display: block; clear: left;"><button id="btn1">后代元素(選擇器表達式-標簽名)</button> <button id="btn2">后代元素(選擇器表達式-類名)</button><button id="btn3">后代元素(jQuery對象)</button> <button id="btn4">后代元素(通配符)</button><button id="btn5">后代元素(DOM對象-標簽名)</button> <button id="btn6">后代元素(DOM對象-類名)</button></span></body> </html>3.7.2. 效果圖
?
總結
