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

所属分类: 网络编程 / JavaScript 阅读数: 1046
收藏 0 赞 0 分享
wrap(html)
把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。

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

--------------------------------------------------------------------------------

Wrap all matched elements with a structure of other elements.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.
This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.
返回值
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)
把所有匹配的元素用其他元素的结构化标记包装起来。

--------------------------------------------------------------------------------

Wrap all matched elements with a structure of other elements.
返回值
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()'为每一个匹配的元素都包裹一次。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。

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

--------------------------------------------------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '.wrap()' where each element in the matched set would get wrapped with an element.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
返回值
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()'为每一个匹配的元素都包裹一次。

--------------------------------------------------------------------------------

Wrap all the elements in the matched set into a single wrapper element.
This is different from '.wrap()' where each element in the matched set would get wrapped with an element.
返回值
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标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

--------------------------------------------------------------------------------

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
返回值
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元素包裹起来

--------------------------------------------------------------------------------

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
返回值
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元素。

--------------------------------------------------------------------------------

Replaces all matched elements with the specified HTML or DOM elements.
返回值
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匹配到的元素。

--------------------------------------------------------------------------------

Replaces the elements matched by the specified selector with the matched elements.
返回值
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()
删除匹配的元素集合中所有的子节点。

--------------------------------------------------------------------------------

Remove all child nodes from the set of matched elements.
返回值
jQuery

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

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:

$("p").empty();
结果:

<p></p>
-------------------------------------------------------------------------------------------------------------------------------------------------
remove([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。

--------------------------------------------------------------------------------

Removes all matched elements from the DOM.
This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Can be filtered with an optional expression.
返回值
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文档中元素的副本添加到其他位置时这个函数非常有用。

--------------------------------------------------------------------------------

Clone matched DOM Elements and select the clones.
This is useful for moving copies of the elements to another location in the 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文档中元素的副本添加到其他位置时这个函数非常有用。

--------------------------------------------------------------------------------

Clone matched DOM Elements, and all their event handlers, and select the clones.
This is useful for moving copies of the elements, and their events, to another location in the DOM.
返回值
jQuery

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

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

HTML 代码:

<button>Clone Me!</button>
jQuery 代码:

$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多