您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > jQuery.contents() 函數(shù)用法實(shí)例詳解

jQuery.contents() 函數(shù)用法實(shí)例詳解

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：360 更新時(shí)間：2018-01-08 11:53 參與評(píng)論

找到段落中的所有文本節(jié)點(diǎn)，并用粗體標(biāo)簽包裝它們。

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

定義和用法
contents() 方法獲得匹配元素集合中每個(gè)元素的子節(jié)點(diǎn)，包括文本和注釋節(jié)點(diǎn)。
語(yǔ)法

.contents()

詳細(xì)說(shuō)明
如果給定表示 DOM 元素集合的 jQuery 對(duì)象，.contents() 方法允許我們檢索 DOM 樹中的這些元素的直接子節(jié)點(diǎn)，并用匹配元素構(gòu)造新的 jQuery 對(duì)象。.contents() 和 .children() 方法類似，不同的是前者在結(jié)果 jQuery 對(duì)象中包含了文本節(jié)點(diǎn)以及 HTML 元素。
.contents() 方法也可以用于獲得 iframe 的內(nèi)容文檔，前提是該 iframe 與主頁(yè)面在同一個(gè)域。
請(qǐng)思考下面這個(gè)帶有一些文本節(jié)點(diǎn)的 <div>，每個(gè)節(jié)點(diǎn)被兩個(gè)折行元素 (<br />) 分隔：

<div class="container">
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.
<br /> <br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</div>

我們可以使用 .contents() 方法來(lái)把文本塊轉(zhuǎn)換為形式良好的段落：

$('.container').contents().filter(function() {
return this.nodeType == 3;
})
.wrap('<p></p>')
.end()
.filter('br')
.remove();

這段代碼首先會(huì)接收 <div class="container"> 的內(nèi)容，然后濾過(guò)其文本節(jié)點(diǎn)，將文本節(jié)點(diǎn)封裝入段落標(biāo)簽中。這是通過(guò)測(cè)試元素的 .nodeType 屬性實(shí)現(xiàn)的。該屬性存有指示節(jié)點(diǎn)類型的數(shù)字代碼；文本節(jié)點(diǎn)使用代碼 3。內(nèi)容會(huì)被再次過(guò)濾，這次針對(duì) <br /> 元素，這些元素會(huì)被移除。

以下面這段HTML代碼為例：

<p id="n1">
    Hello
    <span id="n2">
        CodePlayer
        <span id="n3">A</span>
    </span>
    
    <span id="n4">
        B
        <label id="n5"></label>
    </span>
</p>

以下jQuery示例代碼用于演示contents()函數(shù)的具體用法：

//返回jQuery對(duì)象所有匹配元素的標(biāo)識(shí)信息數(shù)組
//每個(gè)元素形如：[文本內(nèi)容]、[--注釋內(nèi)容--]或#id
function getTagsInfo($doms){
    return $doms.map(function(){
        if(this.nodeType == 3){ // 文本節(jié)點(diǎn)
            return "[" + this.nodeValue + "]";
        }else if(this.nodeType == 8){ // 注釋節(jié)點(diǎn)
            return "[--" + this.nodeValue + "--]";
        }else{
            return "#" + this.id;
        }
    }).get();
}
// 匹配n1元素所有的子節(jié)點(diǎn)(包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)等，下同)
var $n1_contents = $("#n1").contents();
document.writeln( getTagsInfo( $n1_contents ) ); // [ Hello ],#n2,[ ],[-- 注釋內(nèi)容 --],[ ],#n4,[ ]
//匹配span元素所有的子節(jié)點(diǎn)
var $span_contents = $("span").contents();
document.writeln( getTagsInfo( $span_contents ) ); // [ CodePlayer ],#n3,[ ],[A],[ B ],#n5,[ ]
// 匹配span元素所有子節(jié)點(diǎn)中的非Element節(jié)點(diǎn)
var $span_text = $span_contents.filter( function(){
    return this.nodeType != 1;
} );
document.writeln( getTagsInfo( $span_text ) ); // [ CodePlayer ],[ ],[A],[ B ],[ ]
//匹配n5元素所有的子節(jié)點(diǎn)，n5標(biāo)簽中沒(méi)有任何內(nèi)容，因此返回空的jQuery對(duì)象，匹配0個(gè)元素
var $n5_contents = $("#n5").contents();
document.writeln( $n5_contents.length ); // 0

語(yǔ)法結(jié)構(gòu):

$(selector).contents()

實(shí)例代碼:

<!DOCTYPE html>  

<html>  

<head>  

<meta charset=" utf-8">  

<meta name="author" content="http://theartemis.cn/" /> 

<title>contents()函數(shù)-365建站網(wǎng)</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("ul").contents().not("[nodeType==1]").css("color","red"); 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li>html專區(qū)</li> 

    <li>DIV+CSS專區(qū)</li> 

    <li>Javascript專區(qū)</li> 

    <li>Jquery專區(qū)</li> 

  </ul> 

</div> 

</body> 

</html>

以上代碼可以將ul元素下的文本節(jié)點(diǎn)的顏色設(shè)置為紅色。

jquery的contents()訪求可以獲取iframe里面的元素，如

<iframe id="test" src="test.jsp"></iframe>

$("#test").contents().find("#testI");這句話的作用就是能夠得到test.jsp里面的id為testI的節(jié)點(diǎn)