Jquery基础学习笔记(2)-文档处理-阿里云开发者社区

开发者社区> 灵动生活> 正文

Jquery基础学习笔记(2)-文档处理

简介: 上一节《Jquery基础学习笔记(1)》说的是一些基础知识, http://www.cnblogs.com/ywqu/archive/2009/05/26/1490403.html 本节让我们继续Jquery知识的了解:文档处理。
+关注继续查看

上一节《Jquery基础学习笔记(1)》说的是一些基础知识,

http://www.cnblogs.com/ywqu/archive/2009/05/26/1490403.html

本节让我们继续Jquery知识的了解:文档处理。文档处理主要是对HTML元素进行一些增操作,删除操作,复制操作,替换操作。主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值。那我们就开始详细地看一下。

1、内部插入:向一些元素的内部插入内容

(1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如

描述:

向所有段落中追加一些HTML标记。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").append("<b>Hello</b>");

结果:

[ <p>I would like to say: <b>Hello</b></p> ]

 

2appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:

<p>I would like to say: </p>

<div></div><div></div>

jQuery 代码:

$("p").appendTo("div");

结果:

<div><p>I would like to say: </p></div>

<div><p>I would like to say: </p></div>

 

(3)       prepend(content) 向每个匹配的元素内部前置内容

描述:

向所有段落中前置一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").prepend("<b>Hello</b>");

结果:

[ <p><b>Hello</b>I would like to say: </p> ]

 

(4) prepend() 把所有匹配的元素前置到另一个、指定的元素元素集合中。

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代码:

$("p").prependTo("#foo");

结果:

<div id="foo"><p>I would like to say: </p></div>

 

2、内部插入:向一些元素的外部插入内容

1aftercontent)在每个匹配的元素之后插入内容。

描述:

在所有段落之后插入一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").after("<b>Hello</b>");

结果:

<p>I would like to say: </p><b>Hello</b>

 

2before() 在每个匹配的元素之前插入内容

描述:

在所有段落之前插入一些HTML标记代码。

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").before("<b>Hello</b>");

结果:

[ <b>Hello</b><p>I would like to say: </p> ]

(3)insertafter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

描述:

把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

HTML 代码:

<p>I would like to say: </p><div id="foo">Hello</div>

jQuery 代码:

$("p").insertAfter("#foo");

结果:

<div id="foo">Hello</div><p>I would like to say: </p>

 

(4)insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面

描述:

把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

HTML 代码:

<div id="foo">Hello</div><p>I would like to say: </p>

jQuery 代码:

$("p").insertBefore("#foo");

结果:

<p>I would like to say: </p><div id="foo">Hello</div>

 

 

 

3、包裹:把一些元素包裹起来

(1)wrap(html) 把所有匹配的元素用其他元素的结构化标记包裹起来

描述:

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

HTML 代码:

<p>Test Paragraph.</p>

jQuery 代码:

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

结果:

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

 

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

描述:

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>

 

(3)wrapAll(html) 将所有匹配的元素用单个元素包裹起来

描述:

用一个生成的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>

 

(4) wrapAll(elem)将所有匹配的元素用单个元素包裹起来

描述:

用一个生成的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>

(5) wrapInner(html)将每一个匹配的元素的子内容(包括文本节点)用一个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>

(6) wrapInner(elem)

描述:

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

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>

4、替换:用制定的元素替换一些HMTL或者DOM元素

1replaceWith(content) 将所有匹配的元素替换成指定的HTMLDOM元素

描述:

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

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>

(2) repalceAll(selector) 用匹配的元素替换掉所有 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>

 

5、删除:删除制定的元素

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

描述:

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

HTML 代码:

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

jQuery 代码:

$("p").empty();

结果:

<p></p>

(2)remove([expr]) DOM中删除所有匹配的元素

描述:

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>

5、复制:克隆匹配的元素

(1)Clone() 克隆匹配的DOM元素并且选中这些克隆的副本。

描述:

克隆所有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>

 

(2) clone(true) 元素以及其所有的事件处理并且选中这些克隆的副本

 

描述:

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

HTML 代码:

<button>Clone Me!</button>

jQuery 代码:

$("button").click(function(){

  $(this).clone(true).insertAfter(this);

});

终于整理完毕。以上内容参考与Jquery1.3中文参考。

希望此篇对初学者有益。

 

版权

作者:灵动生活 郝宪玮

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python零基础学习笔记(四)——数据类型
python数据类型:Number(数字):包括整数/浮点数(小数)/复数String(字符串)Boolean(布尔值)None(空值)list(列表)tuple(元组)dict(字典)set(集合)
1235 0
Python零基础学习笔记(六)—— 变量和常量
变量: 程序可操作的存储空间的名称 程序运行期间可改变的数据 每个变量都有特定的类型 作用:将不同类型的数据存储到内存 定义变量:变量名 = 初始值(为了确定变量的类型,python里面可以直接识别数据类型 例如:age = 10) 数据的存储:变量名 = 数据值 特别注意:变...
1387 0
Python零基础学习笔记(三)——注释、输入和输出
单行注释# """多行注释多行注释......""" '''多行注释多行注释......'''print 打印到屏幕上一些信息,内容就是“”之间的print("这是第一个关于注释的文件") 2 .打印多个字符转,用逗号隔开,但遇到逗号会输出一个空格print("我","是","谁") 可以运算pr...
1472 0
Apache Flink 零基础入门(五):流处理核心组件 Time&Window 深度解析
为什么要有 Window; Window 中的三个核心组件:WindowAssigner、Trigger 和 Evictor;Window 中怎么处理乱序数据,乱序数据是否允许延迟,以及怎么处理迟到的数据;最后我们梳理了整个 Window 的数据流程,以及 Window 中怎么保证 Exactly
3311 0
jQuery EasyUI API 中文文档 - 日期框(DateBox)
DateBox 日期框 扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。 依赖 combo calendar 用法 1. 1. $('#dd').datebox({   2.     required:true 3. });  特性 其特性扩展自 combo,下列是为 datebox 增加的特性。
836 0
jQuery EasyUI API 中文文档 - 数字框(NumberBox)
NumberBox 数字框 扩展自 $.fn.validatebox.defaults,用 $.fn.numberbox.defaults 重写了 defaults 。 依赖 validatebox 用法 1. 1. $('#nn').numberbox({   2.     min:0,   3.     precision:2   4. });  特性 其特性扩展自 validatebox,下列是为 numberbox 增加的特性。
887 0
jQuery EasyUI API 中文文档 - 树表格(TreeGrid)
TreeGrid 树形表格 扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 1.
1016 0
jQuery EasyUI API 中文文档 - 对话框(Dialog)
Dialog 对话框 扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults。 依赖 window linkbutton 用法 1. 2.     Dialog Content.   3. 1. $('#dd').dialog({   2.     modal:true 3. });  特性 其特性扩展自 window,下列是为 dialog 重写的特性。
755 0
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
860 0
jQuery EasyUI API 中文文档 - 消息框(Messager)
Messager 消息框 用 $.messager.defaults 重写了 defaults。 依赖 window linkbutton progressbar 用法 1.
784 0
+关注
灵动生活
12年电商经验,8年IT项目管理经验,曾就职于中国第一家上市的B2C电商公司麦考林,擅长电商业务模式规划以及大型电商系统架构。创立闪酷&amp;酷客多小程序
203
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载