博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery学习笔记:文档处理
阅读量:6703 次
发布时间:2019-06-25

本文共 5083 字,大约阅读时间需要 16 分钟。

一、
内部插入

1、
append(content)

向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

返回值 
jQuery

参数 

content (String, Element, jQuery) : 要追加到目标中的内容

示例:

//
向所有段落中追加一些HTML标记
$(
"
p
"
).append(
"
<b>Hello,world.</b>
"
); 
2、
appendTo(content)

把所有匹配的元素追加到另一个、指定的元素元素集合中。

实际上,使用这个方法是
颠倒
了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

返回值 
jQuery

参数 

content (String) :用于被追加的内容

示例:

//
把所有段落追加到ID值为foo的元素中
/*
示例文档片段:<p>I would like to say: </p><div id="foo"></div> 
结果:<div id="foo"><p>I would like to say: </p></div> 
*/
$(
"
p
"
).appendTo(
"
#foo
"
); 
3、
prepend(content)

向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。。

返回值 
jQuery

参数 

content (String, Element, jQuery) : 要插入到目标元素内部前端的内容

示例:

ContractedBlock.gif
Code

4、prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
返回值 jQuery
参数 
content (String) :用于匹配元素的jQuery表达式
示例:

ContractedBlock.gif
Code

二、外部插入

1、after(content)
在每个匹配的元素之后插入内容。
返回值 jQuery
参数 
content (String, Element, jQuery) : 插入到每个目标后的内容
示例:

ContractedBlock.gif
Code

2、before(content)

在每个匹配的元素之前插入内容。
返回值 jQuery
参数 
content (String, Element, jQuery) : 插入到每个目标前的内容
示例:

/*
//在所有段落之前插入一些HTML标记代码 
文档片段:<p>I would like to say: </p> 
返回结果: <b>Hello</b><p>I would like to say: </p> 
*/
$(
"
p
"
).before(
"
<b>Hello</b>
"
);

3、insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。
返回值 jQuery
参数 
content (String) : 用于匹配元素的jQuery表达式
示例:

ContractedBlock.gif
Code

4、insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
返回值 jQuery
参数 
content (String) : 用于匹配元素的jQuery表达式
示例:

ContractedBlock.gif
Code

三、包裹

1、wrap(html)
把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。
返回值 jQuery
参数 
html (String) : HTML标记代码字符串,用于动态生成元素并包裹目标元素
示例:

/*
//把所有的段落用一个新创建的div包裹起来 
文档片段:<p>Test Paragraph.</p> 
返回结果:<div class="wrap"><p>Test Paragraph.</p></div> 
*/
$(
"
p
"
).wrap(
"
<div class='wrap'></div>
"
); 

ps:看完示例才发现定义说明实在太狗血了,囧。

2、wrap(elem)
把所有匹配的元素用其他元素的结构化标记包装起来。
返回值 jQuery
参数 
elem (Element) : 用于包装目标元素的DOM元素
示例:

ContractedBlock.gif
Code

3、wrapAll(html)

将所有匹配的元素用单个元素包裹起来
这和 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
返回值 jQuery
参数 
html (String) : HTML标记代码字符串,用于动态生成元素并包装目标元素
示例:

/*
//用一个生成的div将所有段落包裹起来 
文档片段:<p>Hello</p><p>cruel</p><p>World</p> 
返回结果:<div><p>Hello</p><p>cruel</p><p>World</p></div> 
*/
$(
"
p
"
).wrapAll(
"
<div></div>
"
); 

4、wrapAll(elem)

将所有匹配的元素用单个元素包裹起来
这和 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。
返回值 jQuery
参数 
elem (Element) : 用于包装目标元素的DOM元素
示例:

/*
//用一个生成的div将所有段落包裹起来 
文档片段:<p>Hello</p><p>cruel</p><p>World</p> 
返回结果:<div><p>Hello</p><p>cruel</p><p>World</p></div> 
*/
$(
"
p
"
).wrapAll(document.createElement(
"
div
"
)); 

5、wrapInner(html)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
返回值 jQuery
参数 
html (String) : HTML标记代码字符串,用于动态生成元素并包装目标元素
示例:

/*
//把所有段落内的每个子内容加粗 
文档片段:<p>Hello</p><p>cruel</p><p>World</p> 
返回结果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p> 
*/
$(
"
p
"
).wrapInner(
"
<b></b>
"
); 

6、wrapInner(elem)

将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来。
返回值 jQuery
参数 
elem (Element) : 用于包装目标元素的DOM元素
示例:

/*
//把所有段落内的每个子内容加粗 
文档片段:<p>Hello</p><p>cruel</p><p>World</p> 
返回结果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p> 
*/
$(
"
p
"
).wrapInner(document.createElement(
"
b
"
)); 

四、替换

1、replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素。
返回值 jQuery
参数 
content (String, Element, jQuery) : 用于将匹配元素替换掉的内容
示例:

/*
//把所有的段落标记替换成加粗的标记 
文档片段:<p>Hello</p><p>cruel</p><p>World</p> 
返回结果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> 
*/
$(
"
p
"
).replaceWith(
"
<b>Paragraph. </b>
"
); 

2、replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。
返回值 jQuery
参数 
selector (选择器) : 用于查找所要被替换的元素
示例:

/*
//把所有的段落标记替换成加粗的标记 
文档片段:<p>Hello</p><p>cruel</p><p>World</p> 
返回结果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> 
*/
$(
"
<b>Paragraph. </b>
"
).replaceAll(
"
p
"
); 

五、删除

1、empty()
删除匹配的元素集合中所有的子节点。
返回值 jQuery
示例:

/*
//把所有段落的子元素(包括文本节点)删除 
文档片段:<p>Hello, <span>Person</span> <a href="#">and person</a></p> 
返回结果:<p></p> 
*/
$(
"
p
"
).empty(); 

2、remove([expr])

从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
返回值 jQuery
参数 
expr (String) : (可选) 用于筛选元素的jQuery表达式
示例:

/*
//从DOM中把所有段落删除 
文档片段:<p class="hello">Hello</p> how are <p>you?</p> 
返回结果: how are <p>you?</p> 
*/
$(
"
p
"
).remove(
"
.hello
"
); 

六、复制

1、clone()
克隆匹配的DOM元素并且选中这些克隆的副本。在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
返回值 jQuery
示例:

/*
//克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中
文档片段:<b>Hello</b><p>, how are you?</p> 
返回结果:<b>Hello</b><p><b>Hello</b>, how are you?</p>  
*/
$(
"
b
"
).clone().prependTo(
"
p
"
); 

2、clone(true)

元素以及其所有的事件处理并且选中这些克隆的副本。在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
返回值 jQuery
参数 
true (Boolean) : 设置为true以便复制元素的所有事件处理
示例:

/*
//创建一个按钮,他可以复制自己,并且他的副本也有同样功能
文档片段:<button>Clone Me!</button> 
*/
$(
"
button
"
).click(
function
() {
    $(
this
).clone(
true
).insertAfter(
this
);
}); 

 

本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/09/09/1549467.html,如需转载请自行联系原作者

你可能感兴趣的文章
log4cplus配置文件使用
查看>>
java web 学习 --第一天(Java三级考试)
查看>>
SoapUI Pro Project Solution Collection –Easy develop Groovy Script to improve SoapUI ability
查看>>
[Leetcode] Course Schedule
查看>>
[收藏]String formatting in C# :玩转string.format
查看>>
扯扯所学的编程语言
查看>>
数据库设计准则(第一、第二、第三范式说明)
查看>>
[转]SharePoint 2013配置开发环境,需安装VS2012插件
查看>>
TcxDBTreeList导出EXCEL
查看>>
12/22从东京到布里斯班
查看>>
逻辑思维简易入门
查看>>
POJ 3358 Period of an Infinite Binary Expansion
查看>>
PHP——上传头像(2)
查看>>
01-Java基础知识:数据类型与变量、标识符、运算符、表达式
查看>>
连接SQLServer时,因启用连接池导致孤立事务的原因分析和解决办法
查看>>
【转】iOS开发笔记--识别单击还是双击
查看>>
手工创建非singleton 的TopComponent
查看>>
分享一个自己写的table表格排序js插件(高效简洁)
查看>>
三十二、Android上传文件至服务器
查看>>
Silverlight企业应用框架设计【六】自定义系统菜单(使用自己的DataForm)
查看>>