jQuery contents() 方法

jQuery 中的 contents() 方法用于检索匹配元素集中每个元素的子节点，包括文本节点和注释节点。

与 children() 方法不同，contents() 包括文本节点和注释节点。

语法

以下是 jQuery 中 contents() 方法的语法：

$(selector).contents()

参数

此方法不接受任何参数。

示例

在以下示例中，我们使用 contents() 方法选择 <div> 元素内部的所有文本节点，并用背景颜色为黄色的 span 元素将其包裹：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").contents().filter(function() {
                    return this.nodeType === 3; // Filter for text nodes
                }).wrap("<span style='background-color: yellow;'/>");
            });
        });
    </script>
</head>
<body>

<div>Hello world! This is a beautiful day!</div>
<br>
<button>Click me</button><br>
</body>
</html>

单击按钮后，<div> 元素内部的内容将用背景颜色为黄色的 span 元素包裹。

jquery_ref_traversing.htm

打印页面