jQuery.contents() 函数用法实例详解_365体育备用网址官网资讯

jQuery.contents() 函数用法实例详解

文章来源:365jz.com     点击数:149    更新时间:2018-01-08 11:53   参与评论
找到段落中的一切文本节点,并用粗体标签包装它们。

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


定义和用法
contents() 方法获得匹配元素集合中每个元素的子节点,包括文本和注释节点。
语法

.contents()

详细说明
如果给定表示 DOM 元素集合的 jQuery 对象,.contents() 方法同意我们检索 DOM 树中的这些元素的直接子节点,并用匹配元素构造新的 jQuery 对象。.contents() 和 .children() 方法类似,不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。
.contents() 方法也能够用于获得 iframe 的内容文档,前提是该 iframe 与主页面在同一个域。
请思索下面这个带有一些文本节点的 <div>,每个节点被两个折行元素 (<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() 方法来把文本块转换为形式良好的段落:

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


这段代码首先会接收 <div class="container"> 的内容,然后滤过其文本节点,将文本节点封装入段落标签中。这是通过测验元素的 .nodeType 属性实现的。该属性存有指示节点类型的数字代码;文本节点使用代码 3。内容会被再次过滤,这次针对 <br /> 元素,这些元素会被移除。

以下面这段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()函数的具体用法:

//返回jQuery对象一切匹配元素的标识信息数组
//每个元素形如:[文本内容]、[--注释内容--]或#id
function getTagsInfo($doms){
    return $doms.map(function(){
        if(this.nodeType == 3){ // 文本节点
            return "[" + this.nodeValue + "]";
        }else if(this.nodeType == 8){ // 注释节点
            return "[--" + this.nodeValue + "--]";
        }else{
            return "#" + this.id;
        }
    }).get();
}
// 匹配n1元素一切的子节点(包括文本节点、注释节点等,下同)
var $n1_contents = $("#n1").contents();
document.writeln( getTagsInfo( $n1_contents ) ); // [ Hello ],#n2,[ ],[-- 注释内容 --],[ ],#n4,[ ]
//匹配span元素一切的子节点
var $span_contents = $("span").contents();
document.writeln( getTagsInfo( $span_contents ) ); // [ CodePlayer ],#n3,[ ],[A],[ B ],#n5,[ ]
// 匹配span元素一切子节点中的非Element节点
var $span_text = $span_contents.filter( function(){
    return this.nodeType != 1;
} );
document.writeln( getTagsInfo( $span_text ) ); // [ CodePlayer ],[ ],[A],[ B ],[ ]
//匹配n5元素一切的子节点,n5标签中没有任何内容,因此返回空的jQuery对象,匹配0个元素
var $n5_contents = $("#n5").contents();
document.writeln( $n5_contents.length ); // 0

 

语法结构:

$(selector).contents()

实例代码:

<!DOCTYPE html>  

<html>  

<head>  

<meta charset=" utf-8">  

<meta name="author" content="/" /> 

<title>contents()函数-365体育备用网址</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专区</li> 

    <li>DIV+CSS专区</li> 

    <li>Javascript专区</li> 

    <li>Jquery专区</li> 

  </ul> 

</div> 

</body> 

</html>

以上代码能够将ul元素下的文本节点的颜色设置为红色。


jquery的contents()访求能够猎取iframe里面的元素,如

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

$("#test").contents().find("#testI");这句话的作用就是能够得到test.jsp里面的id为testI的节点


如对本文有疑问,请提交到交流澳门赌博娱乐网站国际,广大热心网友会为你解答!! 点击进入澳门赌博娱乐网站国际


公布评论 (149人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换亚细亚娱乐城
最新评论
------分隔线----------------------------
条评论
Sitemap