jQuery学习笔记：文档处理

一、内部插入
1、append(content)
向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
返回值 jQuery
参数
content (String, Element, jQuery) : 要追加到目标中的内容
示例：

//向所有段落中追加一些HTML标记
$("p").append("Hello,world.");

2、appendTo(content)
把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
返回值 jQuery
参数
content (String) :用于被追加的内容
示例：

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

3、prepend(content)
向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。。
返回值 jQuery
参数
content (String, Element, jQuery) : 要插入到目标元素内部前端的内容
示例：

Code
//1 向所有段落中前置一些HTML标记代码
$("p").prepend("Hello");

//2 将一个DOM元素前置入所有段落
/*
文档片段：
I would like to say: 
I would like to say: 
Hello
Good Bye
返回结果：
HelloI would like to say: 
HelloI would like to say: 
Hello
Good Bye
*/
$("p").prepend($(".foo")[0]);

//3 向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)
/*
文档片段:
I would like to say: Hello
返回结果:
HelloI would like to say: 
*/
$("p").prepend($("b"));

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

Code
/*
//把所有段落追加到ID值为foo的元素中
文档片段：I would like to say: <div id="foo"></div>
返回结果：<div id="foo">I would like to say: </div>
*/
$("p").prependTo("#foo"); //这不就等价于：$("p").appendTo("#foo");

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

Code
/*
//1 在所有段落之后插入一些HTML标记代码

文档片段：I would like to say:

返回结果：I would like to say: Hello

*/
$("p").after("Hello");

/*
//2 在所有段落之后插入一个DOM元素

文档片段：HelloI would like to say:

返回结果：I would like to say: Hello

*/
$("p").after($("#foo")[0]);

/*
//3 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)

文档片段：HelloI would like to say:

返回结果：I would like to say: Hello
*/
$("p").after($("b"));

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

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

文档片段：I would like to say:

返回结果： HelloI would like to say:

*/
$("p").before("Hello");

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

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

文档片段：I would like to say: <div id="foo">Hello</div>

返回结果： <div id="foo">Hello</div>I would like to say:

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

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

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

文档片段：<div id="foo">Hello</div>I would like to say:

返回结果： I would like to say: <div id="foo">Hello</div>
*/
$("p").insertBefore("#foo");

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

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

文档片段：Test Paragraph.

返回结果：<div class="wrap">Test Paragraph.</div>
*/
$("p").wrap("<div class='wrap'></div>");

ps：看完示例才发现定义说明实在太狗血了，囧。
2、wrap(elem)
把所有匹配的元素用其他元素的结构化标记包装起来。
返回值 jQuery
参数
elem (Element) : 用于包装目标元素的DOM元素
示例：

Code
/*
//用ID是"content"的div将每一个段落包裹起来

文档片段：Test Paragraph.<div id="content"></div>

返回结果：<div id="content">Test Paragraph.</div><div id="content"></div>
*/
$("p").wrap(document.getElementById('content')); //kao，最终返回会造成两个id为content的div，有实用价值吗？

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

/*
//用一个生成的div将所有段落包裹起来

文档片段：HellocruelWorld

返回结果：<div>HellocruelWorld</div>
*/
$("p").wrapAll("<div></div>");

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

/*
//用一个生成的div将所有段落包裹起来

文档片段：HellocruelWorld

返回结果：<div>HellocruelWorld</div>
*/
$("p").wrapAll(document.createElement("div"));

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

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

文档片段：HellocruelWorld

返回结果：HellocruelWorld
*/
$("p").wrapInner("");

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

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

文档片段：HellocruelWorld

返回结果：HellocruelWorld
*/
$("p").wrapInner(document.createElement("b"));

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

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

文档片段：HellocruelWorld

返回结果： Paragraph. Paragraph. Paragraph.

*/
$("p").replaceWith("Paragraph. ");

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

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

文档片段：HellocruelWorld

返回结果：Paragraph. Paragraph. Paragraph.

*/
$("Paragraph. ").replaceAll("p");

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

/*
//把所有段落的子元素（包括文本节点）删除

文档片段：Hello, Person <a href="#">and person</a>

返回结果：

*/
$("p").empty();

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

/*
//从DOM中把所有段落删除

文档片段：Hello how are you?

返回结果： how are you?

*/
$("p").remove(".hello");

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

/*
//克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中

文档片段：Hello, how are you?

返回结果：HelloHello, how are you?

*/
$("b").clone().prependTo("p");

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

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

文档片段：<button>Clone Me!</button>

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

转载于:https://www.cnblogs.com/jeffwongishandsome/archive/2009/09/09/1549467.html

jQuery学习笔记：文档处理相关推荐

jQuery学习之八---文档处理
Hi~ o(￣▽￣)ブ,大家好,好久不见啊,萍子近两个星期专心做了一个前后台合作的电商网站的项目,好累啊,但是又有点想念CSDN上的你们了,所以萍子马上马立刻立的就过来了,嘿嘿~有没有一点小感动啊. ...
sql 学习笔记文档
以下内容来自 3c school 1:Sql 分为两个部分: 6 2:查询 7 3:插入: 9 4:数据库更新 UPDATE 9 5:删除 DELETE 10 6:Sql TOP 子句: 10 7 ...
node.js服务端笔记文档学会写接口，学习分类：path、包、模块化、fs、express、中间件、jwt、开发模式、cors。
node.js 学习笔记 node.js服务端笔记文档学会写接口,path.包.模块化.fs.express.中间件.JWT.开发模式.cors. gitee:代码接口笔记 1什么是node.js n ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...

jQuery学习笔记：文档处理

jQuery学习笔记：文档处理相关推荐

最新文章

热门文章