Jquery append()总结（一）转载

转载自：http://dushanggaolou.iteye.com/blog/1173457

append(content)

/**
* 向每个匹配的元素内部追加内容。
* 这个操作与对指定的元素执行 appendChild 方法，将它们添加到文档中的情况类似。
*
* @content(String, Element, jQuery) 要追加到目标中的内容
* @return Object
* @owner jQuery Object
*/
function append(content);
// 例子：向所有段落中追加一些HTML标记。
I would like to say:
$("p").append("Hello") -> [ I would like to say: Hello ]

● appendTo(content)

/**
* 把所有匹配的元素追加到另一个、指定的元素元素集合中。
* 实际上，使用这个方法是颠倒了常规的 $(A).append(B) 的操作，即不是把 B 追加到 A 中，而是把 A
* 追加到 B 中。
*
* @content(String) 用于被追加的内容
* @return Object
* @owner jQuery Object
*/
function appendTo(content);
// 例子：把所有段落追加到 ID 值为 "foo" 的元素中。
I would like to say:
<div id="foo"></div>
$("p").appendTo("#foo") -> <div id="foo">I would like to say: </div>

● prepend(content)

/**
* 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
*
* @content(String, Element, jQuery) 要插入到目标元素内部前端的内容
* @return Object
* @owner jQuery Object
*/
function prepend(content);
// 例子一：向所有段落中前置一些 HTML 标记代码。
I would like to say:
$("p").prepend("Hello") -> [ HelloI would like to say: ]
// 例子二：将一个 DOM 元素前置入所有段落
I would like to say:
I would like to say:
Hello
Good Bye
$("p").prepend( $(".foo")[0] ) ->
HelloI would like to say:
HelloI would like to say:
Hello
Good Bye
// 例子三：向所有段落中前置一个 jQuery 对象(类似于一个 DOM 元素数组)。
I would like to say: Hello
$("p").prepend( $("b") ) -> HelloI would like to say:

● prependTo(content)

/**
* 把所有匹配的元素前置到另一个、指定的元素元素集合中。
* 实际上，使用这个方法是颠倒了常规的 $(A).prepend(B) 的操作，即不是把 B 前置到 A 中，而是把
* A 前置到 B 中。
*
* @content(String) 用于匹配元素的 jQuery 表达式
* @return Object
* @owner jQuery Object
*/
function prependTo(content);
// 例子一：把所有段落追加到 ID 值为 foo 的元素中。
I would like to say:
<div id="foo"></div>
$("p").prependTo("#foo") -> <div id="foo">I would like to say: </div>

● after(content)

/**
* 在每个匹配的元素之后插入内容。
*
* @content(String, Element, jQuery) 插入到每个目标后的内容
* @return Object
* @owner jQuery Object
*/
function after(content);
// 例子一：在所有段落之后插入一些 HTML 标记代码。
I would like to say:
$("p").after("Hello") -> I would like to say: Hello
// 例子二：在所有段落之后插入一个 DOM 元素。
HelloI would like to say:
$("p").after( $("#foo")[0] ) -> I would like to say: Hello
// 例子三：在所有段落中后插入一个 jQuery 对象(类似于一个DOM元素数组)。
HelloI would like to say:
$("p").after( $("b") ) -> I would like to say: Hello

● before(content)

/**
* 在每个匹配的元素之前插入内容。
*
* @content(String, Element, jQuery) 插入到每个目标前的内容
* @return Object
* @owner jQuery Object
*/
function before(content);
// 例子一：在所有段落之前插入一些 HTML 标记代码。
I would like to say:
$("p").before("Hello") -> [ HelloI would like to say: ]
// 例子二：在所有段落之前插入一个元素。
I would like to say:
Hello
$("p").before( $("#foo")[0] ) -> HelloI would like to say:
// 例子三：在所有段落中前插入一个 jQuery 对象(类似于一个DOM元素数组)。
I would like to say: Hello
$("p").before( $("b") ) -> HelloI would like to say:

● insertAfter(content)

/**
* 把所有匹配的元素插入到另一个，指定的元素元素集合的后面。
* 实际上，使用这个方法是颠倒了常规的 $(A).after(B) 的操作，即不是把 B 插入到 A 后面，而是把 A
* 插入到 B 后面。
*
* @content(String) 用于匹配元素的 jQuery 表达式
* @return Object
* @owner jQuery Object
*/
function insertAfter(content);
// 例子一：把所有段落插入到一个元素之后。与 $("#foo").after("p") 相同。
I would like to say:
<div id="foo">Hello</div>
$("p").insertAfter("#foo") -> <div id="foo">Hello</div>I would like to say:

● insertBefore(content)

/**
* 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
* 实际上，使用这个方法是颠倒了常规的 $(A).before(B) 的操作，即不是把 B 插入到 A 前面，而是把 A
* 插入到 B 前面。
*
* @content(String) 用于匹配元素的 jQuery 表达式
* @return Object
* @owner jQuery Object
*/
function insertBefore(content);
// 例子：把所有段落插入到一个元素之前。与 $("#foo").before("p") 相同。
<div id="foo">Hello</div>
I would like to say:
$("p").insertBefore("#foo") -> I would like to say: <div id="foo">Hello</div>

<span style="font-family: Simsun; font-style: normal; font-variant: normal; font-weight: normal; font-size: medium; line-height: normal; color: #000000; text-indent: 0px; white-space: normal; letter-spacing: normal; border-collapse: separate;" class="Apple-style-span">● wrap(elem)
<pre name="code" class="javascript">/**
* 把所有匹配的元素用其他元素的结构化标记包装起来。
*
* @elem(Element) 用于包装目标元素的 DOM 元素
* @return Object
* @owner jQuery Object
*/
function wrap(elem);
// 例子：用 ID 是 "content" 的 div 将每一个段落包裹起来。
Test Paragraph.
<div id="content"></div>
$("p").wrap(document.getElementById('content')) ->
<div id="content">Test Paragraph.</div><div id="content"></div>
</pre>
● wrapAll(elem)
<pre name="code" class="javascript">/**
* 将所有匹配的元素用单个元素包裹起来。这于 wrap(elem) 是不同的，wrap(elem) 为每一个匹配的元素都
* 包裹一次。
*
* @elem(Element) 用于包装目标元素的 DOM 元素
* @return Object
* @owner jQuery Object
*/
function wrapAll(elem);
// 例子：用一个生成的 div 将所有段落包裹起来。
Hello
cruel
World
$("p").wrapAll(document.createElement("div")) -> <div>HellocruelWorld</div>
</pre>
● wrapInner(elem)
<pre name="code" class="javascript">/**
* 将每一个匹配的元素的子内容(包括文本节点)用 DOM 元素包裹起来。
*
* @elem(Element) 用于包装目标元素的 DOM 元素
* @return Object
* @owner jQuery Object
*/
function wrapInner(elem);
// 例子：把所有段落内的每个子内容加粗。
Hello
cruel
World
$("p").wrapInner(document.createElement("b")) ->
HellocruelWorld
</pre>
● wrap(html)
<pre name="code" class="javascript">/**
* 把所有匹配的元素用其他元素的结构化标记包裹起来。
* 这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。
*
* 这个函数的原理是检查提供的 html(它是由所提供的 HTML 标记代码动态生成的)，并在它的代码结构中
* 找到最上层的祖先元素－这个祖先元素就是包裹元素。
*
* 当 HTML 标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。
*
* @html(String) HTML 标记代码字符串，用于动态生成元素并包裹目标元素
* @return Object
* @owner jQuery Object
*/
function wrap(html);
// 例子：把所有的段落用一个新创建的 div 包裹起来。
Test Paragraph.
$("p").wrap("<div class='wrap'></div>") -> <div class="wrap">Test Paragraph.</div>
</pre>
● wrapAll(html)
<pre name="code" class="javascript">/**
* 将所有匹配的元素用单个元素包裹起来。这于 wrap(html)是不同的，wrap(html) 为每一个匹配的元素都
* 包裹一次。
*
* 这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。
*
* 这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－这个祖先元素就
* 是包装元素。
*
* @html(String) HTML 标记代码字符串，用于动态生成元素并包装目标元素
* @return Object
* @owner jQuery Object
*/
function wrapAll(html);
// 例子：用一个生成的 div 将所有段落包裹起来。
Hello
cruel
World
$("p").wrapAll("<div></div>") -> <div>HellocruelWorld</div>
</pre>
● wrapInner(html)
<pre name="code" class="javascript">/**
* 将每一个匹配的元素的子内容(包括文本节点)用一个 HTML 结构包裹起来。
*
* 这个函数的原理是检查提供的第一个元素(它是由所提供的 HTML 标记代码动态生成的)，并在它的代码结构中
* 找到最上层的祖先元素 - 这个祖先元素就是包装元素。
*
* @html(String) HTML 标记代码字符串，用于动态生成元素并包装目标元素
* @return Object
* @owner jQuery Object
*/
function wrapInner(html);
// 例子：把所有段落内的每个子内容加粗。
Hello
cruel
World
$("p").wrapInner("") -> HellocruelWorld
</pre>
● replaceAll(selector)
<pre name="code" class="javascript">/**
* 用匹配的元素替换掉所有 selector 匹配到的元素。
*
* @selector(Selector) 用于查找所要被替换的元素
* @return Object
* @owner jQuery Object
*/
function replaceAll(selector);
// 例子：把所有的段落标记替换成加粗标记。
Hello
cruel
World
$("Paragraph. ").replaceAll("p") ->
Paragraph. Paragraph. Paragraph.
</pre>
● replaceWith(content)
<pre name="code" class="javascript">/**
* 将所有匹配的元素替换成指定的 HTML 或 DOM 元素。
*
* @content(String, Element, jQuery) 用于将匹配元素替换掉的内容
* @return Object
* @owner jQuery Object
*/
function replaceWith(content);
// 例子：把所有的段落标记替换成加粗的标记。
Hello
cruel
World
$("p").replaceWith("Paragraph. ") ->
Paragraph. Paragraph. Paragraph.
</pre>
● empty()
<pre name="code" class="javascript">/**
* 删除匹配的元素集合中所有的子节点。
*
* @return Object
* @owner jQuery Object
*/
function empty();
// 例子：把所有段落的子元素(包括文本节点)删除。
Hello, Person <a href="#">and person</a>
$("p").empty() ->
</pre>
● remove([expr])
<pre name="code" class="javascript">/**
* 从 DOM 中删除所有匹配的元素。这个方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用
* 这些匹配的元素。
*
* @expr(String) (可选) 用于筛选元素的 jQuery 表达式
* @return Object
* @owner jQuery Object
*/
function remove([expr]);
// 例子一：从 DOM 中把所有段落删除。
Hello how are you?
$("p").remove() -> how are
// 例子二：从 DOM 中把带有 hello 类的段落删除。
Hello how are you?
$("p").remove(".hello") -> how are you?
</pre>
● clone()
<pre name="code" class="javascript">/**
* 克隆匹配的 DOM 元素并且选中这些克隆的副本。
* 在想把 DOM 文档中元素的副本添加到其他位置时这个函数非常有用。
*
* @return Object
* @owner jQuery Object
*/
function clone();
// 例子：克隆所有 b 元素(并选中这些克隆的副本)，然后将它们前置到所有段落中。
Hello, how are you?
$("b").clone().prependTo("p") -> HelloHello, how are you?
</pre>
● clone(true)
<pre name="code" class="javascript">/**
* 元素以及其所有的事件处理并且选中这些克隆的副本。
* 在想把 DOM 文档中元素的副本添加到其他位置时这个函数非常有用。
*
* @true(Boolean) 设置为 true 以便复制元素的所有事件处理
* @return Object
* @owner jQuery Object
*/
function clone(true);
// 例子：创建一个按钮，它可以复制自己，并且它的副本也有同样功能。
<button>Clone Me!</button>
$("button").click(function() {
$(this).clone(true).insertAfter(this);
});</pre>

Jquery append()总结（一）转载的更多相关文章

[转]jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
jQuery append xmlNode 修改 xml 内容
jQuery append xmlNode 修改 xml 内容 http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/04/29/jqu ...
jquery append
将已经存在的一个dom对象A,通过jquery append插入另一个dom对象B,将会改变dom树结构--即A成为了B的子元素. 举个例子: js: $(".table-container ...
jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
jQuery验证控件(转载)
转自:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html 官网地址:http://bassistance.de/jquery ...
处理jQuery append加入的元素绑定事件无效的方法
通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(functi ...
jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
jquery append、prepend、before等等
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例复制代码代码如下: $("p").append("Some ...
所谓jQuery.append()、jQuery.html()存在的XSS漏洞
使用jQuery.append().jQuery.html()方法时,如果其中内容包含<script>脚本而没有经过任何处理的话,会执行它. 简单的示例代码如下: var xssStr = ...

随机推荐

微信小程序分包加载
分包加载某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主 ...
Python Json模块中dumps、loads、dump、load函数介绍哦
来自: https://www.jb51.net/article/139498.htm 1.json.dumps() json.dumps()用于将dict类型的数据转成str,因为如果直 ...
python之ProcessPoolExecutor
ProcessPoolExecutor使用上基本与ThreadPoolExecutor一致不过在windows上使用,有个问题需要注意.使用不当会出现如下错误 File "...\lib\m ...
Floyd 算法详解
Floyd-Warshall Floyd算法,是一种著名的多源最短路算法. 核心思想: 用邻接矩阵存储图,核心代码为三重循环,第一层枚举中间点k,二三层分别枚举起始点i与目标点j.然后判断经过中间点k ...
jdbc学习笔记02
数据库连接池 DBCP DataBase Conection Pool:数据库连接池如果没有数据库连接池,每一次业务都需要服务器和数据库服务器建立一次连接,业务处理完连接断开,如果有1万次业务处理, ...
Linux系统定时任务crond那些事
1 Linux系统定时任务 1.1 定时任务介绍 1.1.1 Crond是什么? Crond是linux系统中用来定期执行命令或指定程序任务的一种服务或软件.Centos5/ linux系统安装完操作 ...
汇编:采用址表的方法编写程序实现C程序的switch功能
//待实现的C程序 1 void main() { ; -) { : printf("excellence"); break; : printf("good") ...
jdbc最基础的mysql操作
1.基本的数据库操作这里连接数据库可以做成一个单独的utils类,我这里因为程序少就没有封装. 虽然现在jdbc被其他框架取代了,但这是框架的基础如下:第一个是插入数据操作 package Dat ...
re模块（详解正则）
re模块 imort re 1.\w \W print(re.findall('\w','ab 12\+- _*&')) #\w 匹配字母数字及下划线执行结果:['a', 'b', '1 ...
JAVA 泛型方法<T>
public static void main(String[] args) throws Exception { String[] arr = new String[]{"1", ...

Jquery append()总结（一） 转载

Jquery append()总结（一） 转载的更多相关文章

随机推荐

热门专题

Jquery append()总结（一）转载

Jquery append()总结（一）转载的更多相关文章