jquery基础篇--文档操作

包裹节点相关

 

     -------- 对文档中插入额外的结构化标记有用，不会破坏原始文档的语义。

 

 

1、wrap()

 

$(selector).wrap(wrapper);

 

参数wrapper：

 

      把所有匹配的元素用其他元素的结构化标记包裹起来

• 必需，规定包裹被选元素的内容。
• 可能的值：

1. HTML 代码

<p>测试文本</p>

执行：

 

$('p').wrap('<div class="wrap"></div>');

 

结果：

<div class="wrap"><p>测试文本</p></div>

 

     2. 其他的元素（已经存在的和新创建的）

执行：

 

$('p').wrap('document.getElementById('wrap')');

 

结果：

<div id="wrap"><p>测试文本</p></div>

     

2、unwrap()

 

 

     这个方法将移出元素的父元素。这能快速取消.wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

 

 

3、wrapAll()

 

    将所有匹配的元素用单个元素包裹起来。

 

 

<p>测试数据1</p><p>测试数据2</p><p>测试数据3</p>

 

 

• 参数是html

执行：

 

$('p').wrapAll('<div class="wrap"></div>');

 

结果：

<div class="wrap"><p>测试数据1</p><p>测试数据2</p><p>测试数据3</p></div>

 

 

 

 

4、wrapInner()

 

     ----- 将每一个匹配的元素的子内容（包括文本节点）用一个HTML结构包裹起来

 

  测试用例：

 

  将所有段落的每一个子内容加粗。

 

 

<p>测试文本1</p><p>测试文本2</p><p>测试文本3</p>

 

 

 

执行：

 

$('p').wrapInner('<b></b>');

 

结果：

<p><b>测试文本1</b><b>测试文本2</b><b>测试文本3</b></p>