juqery 学习之五 文档处理<包裹、替换、删除、复制>

wrap(html)

把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。

这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。

当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。

返回值

jQuery

参数

html (String) : HTML标记代码字符串,用于动态生成元素并包裹目标元素

示例

把所有的段落用一个新创建的div包裹起来

HTML 代码:

<p>Test Paragraph.</p>

jQuery 代码:

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

结果:

<div class="wrap"><p>Test Paragraph.</p></div>
-------------------------------------------------------------------------------------------------------------------------------------------------

wrap(elem)

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

返回值

jQuery

参数

elem (Element) : 用于包装目标元素的DOM元素

示例

用ID是"content"的div将每一个段落包裹起来

HTML 代码:

<p>Test Paragraph.</p><div id="content"></div>

jQuery 代码:

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

结果:

<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
-------------------------------------------------------------------------------------------------------------------------------------------------

wrapAll(html)

将所有匹配的元素用单个元素包裹起来
这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。

这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。

这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

返回值

jQuery

参数

html (String) : TML标记代码字符串,用于动态生成元素并包装目标元素

示例

用一个生成的div将所有段落包裹起来

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").wrapAll("<div></div>");

结果:

<div><p>Hello</p><p>cruel</p><p>World</p></div>
-------------------------------------------------------------------------------------------------------------------------------------------------

wrapAll(elem)

将所有匹配的元素用单个元素包裹起来
这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。

返回值

jQuery

参数

elem (Element) : 用于包装目标元素的DOM元素

示例

用一个生成的div将所有段落包裹起来

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").wrapAll(document.createElement("div"));

结果:

<div><p>Hello</p><p>cruel</p><p>World</p></div>
-------------------------------------------------------------------------------------------------------------------------------------------------

wrapInner(html)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

返回值

jQuery

参数

html (String) : HTML标记代码字符串,用于动态生成元素并包装目标元素

示例

把所有段落内的每个子内容加粗

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

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

结果:

<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
-------------------------------------------------------------------------------------------------------------------------------------------------

wrapInner(elem)

将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来

返回值

jQuery

参数

elem (Element) : 用于包装目标元素的DOM元素

示例

把所有段落内的每个子内容加粗

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").wrapInner(document.createElement("b"));

结果:

<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
-------------------------------------------------------------------------------------------------------------------------------------------------

replaceWith(content)

将所有匹配的元素替换成指定的HTML或DOM元素。

返回值

jQuery

参数

content (String, Element, jQuery) : 用于将匹配元素替换掉的内容

示例

把所有的段落标记替换成加粗的标记。

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").replaceWith("<b>Paragraph. </b>");

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
-------------------------------------------------------------------------------------------------------------------------------------------------

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

返回值

jQuery

参数

selector (选择器) : 用于查找所要被替换的元素

示例

把所有的段落标记替换成加粗标记

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("<b>Paragraph. </b>").replaceAll("p");

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
-------------------------------------------------------------------------------------------------------------------------------------------------

empty()

删除匹配的元素集合中所有的子节点。

返回值

jQuery

示例

把所有段落的子元素(包括文本节点)删除

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();

结果:

<p></p>
-------------------------------------------------------------------------------------------------------------------------------------------------

remove([expr])

从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。

返回值

jQuery

参数

expr (String) : (可选) 用于筛选元素的jQuery表达式

示例

从DOM中把所有段落删除

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

结果:

how are

从DOM中把带有hello类的段落删除

HTML 代码:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove(".hello");

结果:

how are <p>you?</p>
-------------------------------------------------------------------------------------------------------------------------------------------------

clone()

克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

返回值

jQuery

示例

克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。

HTML 代码:

<b>Hello</b><p>, how are you?</p>

jQuery 代码:

$("b").clone().prependTo("p");

结果:

<b>Hello</b><p><b>Hello</b>, how are you?</p>
-------------------------------------------------------------------------------------------------------------------------------------------------

clone(true)

元素以及其所有的事件处理并且选中这些克隆的副本
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

返回值

jQuery

参数

true (Boolean) : 设置为true以便复制元素的所有事件处理

示例

创建一个按钮,他可以复制自己,并且他的副本也有同样功能。

HTML 代码:

<button>Clone Me!</button>

jQuery 代码:

$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});
原文地址:https://www.cnblogs.com/EWall/p/1950799.html