【转】 jQuery学习笔记：文档处理

【转】 jQuery学习笔记：文档处理
一、内部插入
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) : 要插入到目标元素内部前端的内容
示例：

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


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


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

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

/*
//把所有段落追加到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").prependTo("#foo");  //这不就等价于：$("p").appendTo("#foo"); 

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

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

文档片段：<p>I would like to say: </p> 

返回结果：<p>I would like to say: </p><b>Hello</b> 

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

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

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

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

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

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

文档片段：<b>Hello</b><p>I would like to say: </p> 

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

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表达式
示例：

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

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

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

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

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

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

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

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

三、包裹
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元素
示例：

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

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

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

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);
});