jQuery API contents()

最新推荐文章于 2021-08-06 03:26:28 发布

依然那么楞

最新推荐文章于 2021-08-06 03:26:28 发布

阅读量939

点赞数

CC 4.0 BY-SA版权

文章标签： jquery api contents

本文链接：https://blog.youkuaiyun.com/ling811/article/details/17553793

本文介绍了jQuery中.contents()方法的使用，该方法用于获取匹配元素的所有子节点，包括文本节点。文中通过两个实例展示了如何利用.contents()选择并操作文本节点及如何修改iframe中的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.contents()

描述:孩子的每个元素在匹配的元素集合,包括文本和注释节点。

这个方法不接受任何参数。

给定一个jQuery对象,该对象表示一组DOM元素,在.contents()方法允许我们搜索通过这些元素的直接子DOM树和构造一个新的jQuery对象匹配元素。.contents()和.children()方法是类似的,只不过前者包括文本节点以及HTML元素在生成的jQuery对象。　　　

　.contents()方法也可以使用iframe的内容文档,如果iframe是在同一领域的主要页面。

实验代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
</head>

<body>
<p>你好！<a href="http://blog.youkuaiyun.com/ling811">ling811</a>,这是我的博客</p>
<script>
	$("p").contents().filter(function(index) {
        return this.nodeType !== 1;
    })
	.wrap("<b></b>");
</script>
</body>
</html>

效果图：

这是通过测试来完成.nodeType属性的元素。此DOM属性拥有数字代码表示节点的类型,文本节点使用代码1。

实验代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
</head>

<body>
<iframe src="http://blog.youkuaiyun.com/ling811" width="80%" height="600" id="frameDemo"></iframe>
<script>
	$("#frameDemo").contents().find("a").css("background","#BADA55");
</script>
</body>
</html>

效果图：