0

0

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

php中文网

php中文网

发布时间:2016-05-16 18:10:59

|

1184人浏览过

|

来源于php中文网

原创

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 代码:

test paragraph.


jQuery 代码:

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

test paragraph.


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

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

Wrap all matched elements with a structure of other elements.
返回值
jQuery

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

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

HTML 代码:

test paragraph.


jQuery 代码:

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

test paragraph.


-------------------------------------------------------------------------------------------------------------------------------------------------
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 代码:

Hello

cruel

World


jQuery 代码:

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

Hello

cruel

World


-------------------------------------------------------------------------------------------------------------------------------------------------
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 代码:

Hello

cruel

World


jQuery 代码:

$("p").wrapAll(document.createElement("div"));
结果:

Hello

cruel

World


-------------------------------------------------------------------------------------------------------------------------------------------------
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 代码:

Hello

cruel

World


jQuery 代码:

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

Hello

cruel

World

豆包手机助手
豆包手机助手

豆包推出的手机系统服务级AI助手

下载

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

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

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
返回值
jQuery

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

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

HTML 代码:

Hello

cruel

World


jQuery 代码:

$("p").wrapInner(document.createElement("b"));
结果:

Hello

cruel

World


-------------------------------------------------------------------------------------------------------------------------------------------------
replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素。

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

Replaces all matched elements with the specified HTML or DOM elements.
返回值
jQuery

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

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

HTML 代码:

Hello

cruel

World


jQuery 代码:

$("p").replaceWith("Paragraph. ");
结果:

Paragraph. Paragraph. Paragraph.
-------------------------------------------------------------------------------------------------------------------------------------------------
replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。

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

Replaces the elements matched by the specified selector with the matched elements.
返回值
jQuery

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

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

HTML 代码:

Hello

cruel

World


jQuery 代码:

$("Paragraph. ").replaceAll("p");
结果:

Paragraph. Paragraph. Paragraph.
-------------------------------------------------------------------------------------------------------------------------------------------------
empty()
删除匹配的元素集合中所有的子节点。

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

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

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

HTML 代码:

Hello, Person and person


jQuery 代码:

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


-------------------------------------------------------------------------------------------------------------------------------------------------
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 代码:

Hello

how are

you?


jQuery 代码:

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

how are

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

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

HTML 代码:

Hello

how are

you?


jQuery 代码:

$("p").remove(".hello");
结果:

how are

you?


-------------------------------------------------------------------------------------------------------------------------------------------------
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 代码:

Hello

, how are you?


jQuery 代码:

$("b").clone().prependTo("p");
结果:

Hello

Hello, how are you?


-------------------------------------------------------------------------------------------------------------------------------------------------
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 代码:


jQuery 代码:

$("button").click(function(){
$(this).clone(true).insertAfter(this);
});

相关专题

更多
Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

44

2026.01.15

公务员调剂条件 2026调剂公告时间
公务员调剂条件 2026调剂公告时间

(一)符合拟调剂职位所要求的资格条件。 (二)公共科目笔试成绩同时达到拟调剂职位和原报考职位的合格分数线,且考试类别相同。 拟调剂职位设置了专业科目笔试条件的,专业科目笔试成绩还须同时达到合格分数线,且考试类别相同。 (三)未进入原报考职位面试人员名单。

58

2026.01.15

国考成绩查询入口 国考分数公布时间2026
国考成绩查询入口 国考分数公布时间2026

笔试成绩查询入口已开通,考生可登录国家公务员局中央机关及其直属机构2026年度考试录用公务员专题网站http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/examResult/written_result.html,查询笔试成绩和合格分数线,点击“笔试成绩查询”按钮,凭借身份证及准考证进行查询。

11

2026.01.15

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

65

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

36

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

75

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

35

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.6万人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.2万人学习

NumPy 教程
NumPy 教程

共44课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号