jQuery中contents()方法用法实例

1. 方法介绍

jQuery中的contents()方法用于获取匹配元素集合的所有子节点，包括文本节点和注释。

2. 方法语法

$(selector).contents()

3. 方法示例

3.1 父元素的所有子节点

以下示例将演示如何使用contents()方法来获取父元素的所有子节点：

HTML代码：

<div id="parent">
  <p>段落元素</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <span class="child">带class属性的子元素</span>
</div>

JavaScript代码：

// 获取父元素的所有子节点
var contents = $('#parent').contents();

// 将节点插入到每个段落前面
contents.each(function() {
  if (this.nodeType == 1) { // 判断节点类型
    $('p').before(this); // 插入到每个段落前面
  }
});

解释：

以上代码将获取id为parent的父元素的所有子节点，并将其插入到所有段落元素p前面。

3.2 筛选节点类型

以下示例将演示如何使用contents()方法来筛选获取元素集合中的文本节点和注释节点：

HTML代码：

<div id="parent2">
  <p>这里是段落元素</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <span class="child">带class属性的子元素</span>
  <!-- 这是一条注释 -->
  文本内容
</div>

JavaScript代码：

// 获取id为parent2的父元素的所有子节点
var contents = $('#parent2').contents();

// 筛选文本节点和注释节点，并将其添加到div元素中
$(contents).filter(function() {
  return this.nodeType == 3 || this.nodeType == 8; // 筛选文本节点和注释节点
}).appendTo($('#parent2'));

解释：

以上代码将获取id为parent2的父元素的所有子节点，并使用filter()方法筛选出其中的文本节点和注释节点，并将其添加到相同的父元素中。

4. 总结

以上就是jQuery中contents()方法的用法实例，通过灵活运用该方法，可以轻松地获取父元素的所有子节点并对其进行处理。该方法还能够筛选出指定类型的节点，非常实用。