learning jQuery 学习笔记十一（+jQuery 1.4.1 API）-- DOM操作-基于命令改变页面 ----移动元素

注：本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

jQuery 1.4.1 API

appendTo()

appendTo(content)                           返回值:jQuery

概述

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

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

在jQuery 1.3.2中，appendTo, prependTo, insertBefore,insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。

参数

content   String

用于被追加的内容

示例

描述:

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

HTML 代码:

<p>Iwould like to say: </p>

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

jQuery 代码:

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

结果:

<div><p>Iwould like to say: </p></div>

<div><p>Iwould like to say: </p></div>

描述:

新建段落追加div中并加上一个class

HTML 代码:

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

jQuery 代码:

 $("<p/>")

   .appendTo("div")

   .addClass("test")

   .end()

   .addClass("test2");

结果:

<div><pclass="test test2"></p></div>

<div><pclass="test"></p></div>

 

append()

append(content)                返回值:jQuery

概述

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

参数

content    String, Element, jQuery

要追加到目标中的内容

示例

描述:

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

HTML 代码:

<p>Iwould like to say: </p>

jQuery 代码:

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

结果:

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

 

prependTo()

prependTo(content)                  返回值:jQuery

概述

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

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore,insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数

content    String

用于匹配元素的jQuery表达式

示例

描述:

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

HTML 代码:

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

jQuery 代码:

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

结果:

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

 

prepend()  

prepend(content)                                    返回值:jQuery

概述

向每个匹配的元素内部前置内容。

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

参数

content    String, Element, jQuery

要插入到目标元素内部前端的内容

示例

描述:

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

HTML 代码:

<p>Iwould like to say: </p>

jQuery 代码:

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

结果:

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

描述:

将一个DOM元素前置入所有段落

HTML 代码:

<p>Iwould like to say: </p>

<p>Iwould like to say: </p>

<bclass="foo">Hello</b>

<bclass="foo">Good Bye</b>

jQuery 代码:

$("p").prepend($(".foo")[0] );

结果:

<p><bclass="foo">Hello</b>I would like to say: </p>

<p><bclass="foo">Hello</b>I would like to say: </p>

<bclass="foo">Hello</b>

<bclass="foo">Good Bye</b>

描述:

向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

<p>Iwould like to say: </p><b>Hello</b>

jQuery 代码:

$("p").prepend($("b") );

结果:

<p><b>Hello</b>Iwould like to say: </p>