020_遍历祖先
1. parent()方法
1.1. parent()方法獲得當前匹配元素集合中每個元素的父元素, 沿DOM樹向上遍歷單一層級。
1.2. parent()方法接受可選的選擇器表達式, 與我們向$()函數中傳遞的參數類型相同。如果應用這個選擇器, 則將通過檢測元素是否匹配該選擇器對元素進行篩選。
1.3. 語法
$(selector).parent() $(selector).parent(selector)1.4. 參數
1.5. 例子
1.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>parent()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("span").parent().css('background-color', 'blue');});$('#btn2').click(function(){$("span").parent('.myP').css('background-color', 'green');});});</script><style type="text/css">#myDiv {background-color: yellow; width: 600px; height: 300px;}#myDiv div {background-color: pink; width: 500px; height: 100px; margin: 0 auto;}#myDiv p {background-color: red; padding: 10px;}</style></head><body><div id="myDiv"><div><p><span>parent()方法獲得當前匹配元素集合中每個元素的父元素, 沿DOM樹向上遍歷單一層級。</span></p></div><div><p class="myP"><span>parent()方法接受可選的選擇器表達式, 與我們向$()函數中傳遞的參數類型相同。如果應用這個選擇器, 則將通過檢測元素是否匹配該選擇器對元素進行篩選。</span></p></div></div><br /><button id="btn1">父元素</button> <button id="btn2">過濾的父元素</button></body> </html>1.5.2. 效果圖
2. parents()方法
2.1. parents()方法獲得當前匹配元素集合中每個元素的祖先元素, 它一路向上直到文檔的根元素(<html>)。
2.2. parents()方法接受可選的選擇器表達式, 與我們向$()函數中傳遞的參數類型相同。如果應用這個選擇器, 則將通過檢測元素是否匹配該選擇器對元素進行篩選。
2.3. 語法
$(selector).parents() $(selector).parents(selector)2.4. 參數
2.5. 例子
2.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>parents()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("b").parents().css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("b").parents('.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 class="myUl">ul(祖父) <li>li(直接父)<b>b元素</b></li></ul> </div><span style="display: block; clear: left;"><button id="btn1">祖先元素</button> <button id="btn2">過濾的祖先元素</button></span></body> </html>2.5.2. 效果圖
3. parentsUntil()方法
3.1. parentsUntil()方法返回當前匹配元素集合中每個元素的祖先元素, 是介于兩個給定元素之間的元素, 直到(但不包括)被選擇器、DOM節點或jQuery對象匹配的元素。
3.2. 語法 1
$(selector).parentsUntil(selector,filter)3.3. 參數
3.4. 語法 2
$(selector).parentsUntil(element,filter)3.5. 參數
3.6. 如果不匹配或未應用選擇器或對象(selector或element), 則將選區所有祖先元素; 在這種情況下, 該方法選取的元素與未提供選擇器時的parents()方法相同。
3.7. 該方法接受可選的選擇器表達式作為其第二參數。如果應用這個參數, 則將通過檢測元素是否匹配該選擇器對元素進行篩選。
3.8. 例子
3.8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>parentsUntil()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("b").parentsUntil('div').css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("b").parentsUntil('div', '.myUl').css({"color":"red","border":"2px solid red"});});$('#btn3').click(function(){$("b").parentsUntil($('div')).css({"color":"red","border":"2px solid red"});});$('#btn4').click(function(){$("b").parentsUntil($('div'), '.myUl').css({"color":"red","border":"2px solid red"});});$('#btn5').click(function(){$("b").parentsUntil(document.getElementsByTagName('div')).css({"color":"red","border":"2px solid red"});});$('#btn6').click(function(){$("b").parentsUntil(document.getElementsByTagName('div'), '.myUl').css({"color":"red","border":"2px solid red"});});$('#btn7').click(function(){$("b").parents().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 class="myUl">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">過濾的祖先元素(jQuery對象)</button><button id="btn5">祖先父元素(DOM對象)</button> <button id="btn6">過濾的祖先元素(DOM對象)</button><button id="btn7">未應用選擇器</button></span></body> </html>3.8.2. 效果圖
4. offsetParent()方法
4.1. offsetParent()方法返回最近的祖先定位元素。
4.2. 定位元素指的是元素的CSS position屬性被設置為relative、absolute或fixed的元素。
4.3. 語法
$(selector).offsetParent()4.4. 例子
4.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>offsetParent()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){var x = $("span").offsetParent();alert("span最近的祖先定位元素名稱: " + x[0].tagName);});});</script><style type="text/css">* {margin: 0; padding: 0;}div {width: 600px;height: 200px;background: red;/*同時注釋掉p和div的定位, 運行返回HTML*/position: relative;}p {background: pink;width: 300px;height: 100px;/*可以嘗試注釋掉p的定位, 運行返回DIV*/position: absolute;top: 30px;left: 50px;}</style></head><body><div><p><span>offsetParent()方法返回最近的祖先定位元素。</span></p> </div><br /><button id="btn1">最近的祖先定位元素</button></body> </html>4.4.2. 效果圖
5. closest()方法
closest()方法獲得匹配選擇器的第一個祖先元素, 從當前元素開始沿DOM樹向上。
5.1. 語法
$(selector).closest(selector)5.2. 參數
5.3. 詳細說明
5.3.1. 如果給定表示DOM元素集合的jQuery對象, .closest()方法允許我們檢索DOM樹中的這些元素以及它們的祖先元素, 并用匹配元素構造新的jQuery對象。.parents()和.closest()方法類似, 它們都沿DOM樹向上遍歷。兩者之間的差異盡管微妙, 卻很重要:
5.4. 例子
5.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>closest()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("b").closest('li b').css({"color":"red","border":"2px solid red"});});$('#btn2').click(function(){$("b").closest('.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 class="myLi">li(直接父)<b>b元素</b></li></ul> </div><div>div(曾祖父)<ul class="myUl">ul(祖父) <li>li(直接父)<b>b元素</b></li></ul> </div><span style="display: block; clear: left;"><button id="btn1">祖先元素(包含自身)</button> <button id="btn2">過濾的祖先元素</button></span></body> </html>5.4.2. 效果圖
總結
