深入學習jQuery節點關系 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　DOM可以將任何HTML描繪成一個由多層節點構成的結構。節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點為根節點的樹形結構。下圖表示了DOM間的節點關系，而jQuery也存在類似的方法來描述節點關系

后代元素

【children()】

　　jQuery是一個集合對象，如果想快速查找合集里面的第一級子元素，此時可以用children()方法

　　children()方法允許通過在DOM樹中對這些元素的直接子元素進行搜索，并且構造一個新的匹配元素的jQuery對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('div').children().css('border','1px solid red');    
})
</script>

children([selector])

　　children()方法可以接受一個用于匹配元素的選擇器字符串作為參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('div').children('i').css('border','1px solid red');    
})
</script>

　　[注意]children()方法只能找出第一級子元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
    <div>
        <i>1</i>
        <b>2</b>
        <i>3</i>
    </div>    
</div>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('#box').children().css('border','1px solid red');    
})
</script>

【find()】

　　find()方法通過一個選擇器，jQuery對象，或元素過濾，得到當前匹配的元素集合中每個元素的后代，匹配的元素將構造一個新的jQuery對象

　　find()和children()方法是相似的，只是children()方法查找子元素，而find()方法查找后代元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
    <div>
        <i>1</i>
        <b>2</b>
        <div>3</div>
    </div>    
</div>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('#box').find('div').css('border','1px solid red');    
})
</script>

　　[注意]find()方法必須有參數才有效。如果想要查找所有后代元素，需要傳遞參數為'*'

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
    <div>
        <i>1</i>
        <b>2</b>
        <i>3</i>
    </div>    
</div>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('#box').find('*').css('border','1px solid red');    
})
</script>

【contents()】

　　contents()方法獲得匹配元素集合中每個元素的子元素，包括文字和注釋節點，這個方法不接受任何參數

　　contents()和children()方法類似，只不過前者包括文本節點以及jQuery對象中產生的HTML元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  <br /><br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
</div>
<script>

　　console.log($('div').children())//[br, br, prevObject: init[1], context: document]
　　console.log($('div').contents())//[text, br, br, text, prevObject: init[1], context: document]

</script>

【contains()】

　　contains(container, contained)是一個工具方法，用來檢查一個DOM元素是否是另一個DOM元素的后代

　　如果第二個參數所提供的DOM元素是第一個參數DOM元素的后裔，那么$.contains()方法返回true，無論是直接的子元素或者是后代元素。否則，返回false

　　[注意]該方法只支持元素節點，如果第二個參數是一個文本或注釋節點，$.contains()將返回 false

console.log($.contains( document.documentElement, document.body ));//true
console.log($.contains( document.body, document.documentElement ));//false

祖先元素

【parent()】

　　parent()方法能夠在DOM樹中搜索到這些元素的父級元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>    
<p>
    <i>1</i>
    <b>2</b>
    <i>3</i>    
</p>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('i').parent().css('border','1px solid red');    
})
</script>

parent([selector])

　　parent()方法可以接受一個用于匹配元素的選擇器表達式字符串作為參數進行篩選

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b>2</b>
    <i>3</i>
</div>    
<p>
    <i>1</i>
    <b>2</b>
    <i>3</i>    
</p>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('i').parent('div').css('border','1px solid red');    
})
</script>

【parents()】

　　與parent()方法不同，parents()方法獲取的是祖先元素，而parent()方法獲取的是父級元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('b').parents().css('border','1px solid red');    
})
</script>

parents([selector])

　　parents()方法可以接受一個用于匹配元素的選擇器表達式字符串作為參數進行篩選

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('b').parents('div').css('border','1px solid red');    
})
</script>

【parentsUntil()】

　　parent()方法匹配父元素，parents()方法匹配祖先元素，而parentsUntil()方法則在parents()方法的基礎上，確定匹配到哪個祖先元素時停止匹配

parentsUntil([selector][,filter])

　　parentsUntil()方法接受兩個參數。第一個參數是一個選擇器字符串、DOM節點或jQuery對象，用于確定到哪個祖先元素時停止匹配，不包括參數中的元素。第二個參數是一個篩選字符串，用于匹配元素的選擇器字符串

　　當parentsUntil()方法沒有參數時，和parents()方法作用相同

【1】沒有參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('b').parentsUntil().css('border','1px solid red');    
})
</script>

【2】存在一個參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('b').parentsUntil('div').css('border','1px solid red');    
})
</script>

【3】存在兩個參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('b').parentsUntil('body','div').css('border','1px solid red');    
})
</script>

【closest(selector)】

　　closest()方法從自身元素開始(包括自身元素)，在DOM樹中向上遍歷，直到找到了與提供的選擇器相匹配的元素，返回包含零個或一個元素的jQuery對象

　　closest()方法的參數是一個用于匹配元素的選擇器字符串、jQuery對象或DOM元素。若匹配，則返回該元素的jQuery對象，否則，返回包含0個元素的jQuery對象

　　[注意]closest()方法必須接受參數，否則無效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <i><b>2</b></i>
    <i>3</i>
</div>    
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>
<script>
$('#btn1').click(function(){
    $('b').closest('p').css('border','1px solid red');
})
$('#btn2').click(function(){
    $('b').closest('b').css('border','1px solid red');
})
$('#btn3').click(function(){
    $('b').closest('body').css('border','1px solid red');
})
</script>

兄弟元素

【siblings([selector])】

　　siblings()方法可以獲得匹配元素集合中每個元素的兄弟元素　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').siblings().css('border','1px solid red');    
})
</script>

　　siblings()方法可以接受一個用于匹配元素的選擇器字符串作為參數來篩選元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').siblings(':contains("1")').css('border','1px solid red');    
})
</script>

【next([selector])】

　　next()方法返回匹配的元素集合中每一個元素緊鄰的后面兄弟元素的元素集合

　　next()方法接受一個選擇器字符串作為參數，只有緊跟著的兄弟元素滿足選擇器時，才會返回此元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b><i>2</i></b>
    <i>3</i>
</div>    
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>
<script>
$('#btn1').click(function(){
    $('b').next().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('i:contains("2")').next().css('border','1px solid red');    
})
$('#btn3').click(function(){
    $('b').next('b').css('border','1px solid red');    
})
</script>

【nextAll()】

　　next()方法表示當前元素的后一個兄弟元素，而nextAll()方法表示當前元素后面的所有兄弟元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextAll().css('border','1px solid red');    
})
</script>

　　nextAll()方法可以接受一個選擇器字符串用于篩選元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextAll(':contains("4")').css('border','1px solid red');    
})
</script>

【nextUntil()】

　　nextUntil()方法接受兩個參數。第一個參數是一個選擇器字符串、DOM節點或jQuery對象，用于確定到哪個兄弟元素時停止匹配，不包括參數中的元素。第二個參數是一個篩選字符串，用于匹配元素的選擇器表達式字符串

　　當nextUntil()方法沒有參數時，和nextAll()方法作用相同

【1】沒有參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextUntil().css('border','1px solid red');    
})
</script>

【2】有一個參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextUntil('li:last').css('border','1px solid red');    
})
</script>

【3】有兩個參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').nextUntil('li:last',':contains("4")').css('border','1px solid red');    
})
</script>

【prev([selector])】

　　prev()方法返回匹配的元素集合中每一個元素緊鄰的前面兄弟元素的元素集合

　　prev()方法接受一個選擇器字符串作為參數，只有前面緊跟著的兄弟元素滿足選擇器時，才會返回此元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
    <i>1</i>
    <b><i>2</i></b>
    <i>3</i>
</div>    
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>
<script>
$('#btn1').click(function(){
    $('b').prev().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('i:contains("2")').prev().css('border','1px solid red');    
})
$('#btn3').click(function(){
    $('b').prev('b').css('border','1px solid red');    
})
</script>

【prevAll()】

　　prev()方法表示當前元素的前一個兄弟元素，而prevAll()方法表示當前元素前面的所有兄弟元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevAll().css('border','1px solid red');    
})
</script>

　　prevAll()方法可以接受一個選擇器字符串用于篩選元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevAll(':contains("2")').css('border','1px solid red');    
})
</script>

【prevUntil()】

　　prevUntil()方法接受兩個參數。第一個參數是一個選擇器字符串、DOM節點或jQuery對象，用于確定到哪個兄弟元素時停止匹配，不包括參數中的元素。第二個參數是一個篩選字符串，用于匹配元素的選擇器表達式字符串

　　當prevUntil()方法沒有參數時，和prevAll()方法作用相同

【1】沒有參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevUntil().css('border','1px solid red');    
})
</script>

【2】有一個參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevUntil('li:first').css('border','1px solid red');    
})
</script>

【3】有兩個參數時

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('.third-item').prevUntil('li:first',':contains("2")').css('border','1px solid red');    
})
</script>