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焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
厨师岗位职责
2013/11/12 职场文书
求职信范文英文版
2014/01/05 职场文书
党支部换届选举方案
2014/05/08 职场文书
个人欠款担保书
2014/05/20 职场文书
初中团支书竞选稿
2015/11/21 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis