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


Posted in Javascript onFebruary 11, 2011

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);
});

Javascript 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
Exjs 入门篇
Apr 07 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
juqery 学习之五 文档处理 插入
Feb 11 #Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 #Javascript
Javascript面向对象之四 继承
Feb 08 #Javascript
javascript面向对象之二 命名空间
Feb 08 #Javascript
javascript中的对象创建 实例附注释
Feb 08 #Javascript
kmock javascript 单元测试代码
Feb 06 #Javascript
一次失败的jQuery优化尝试小结
Feb 06 #Javascript
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
基于php编程规范(详解)
2017/08/17 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JS重要知识点小结
2011/11/06 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
postman和python mock测试过程图解
2020/02/22 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
初任培训自我鉴定
2013/10/07 职场文书
内容编辑个人求职信
2013/12/10 职场文书
实习老师离校感言
2014/02/03 职场文书
校园文化标语
2014/06/18 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技