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 = ...

随机推荐

js关于密码框强弱度的提示
三种密码强度的正则表达式: 较弱:全是数字或全是字母 6-16个字符:/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; 中级:数字.26个英文字母 6-16个字符: /^[A-Za- ...
react（三）：容器组件和傻瓜组件
让一个组件只专注于一件事,如果发现让一个组件做的事情太多,就可以把这个组件拆分成多个组件让每一个组件只专注于一件事 <深入浅出react和redux> ---程墨一个react组件最基本 ...
Openresty最佳案例 | 第7篇：模块开发、OpenResty连接Redis
转载请标明出处: http://blog.csdn.net/forezp/article/details/78616714 本文出自方志朋的博客 Lua模块开发在实际的开发过程中,不可能把所有的lu ...
Unity 游戏框架搭建 (十一) 简易AssetBundle打包工具(一)
最近在看Unity官方的AssetBundle(以下简称AB)的教程,也照着做了一遍,不过做出来的AssetBundleManager的API设计得有些不太习惯.目前想到了一个可行的解决方案.AB相关 ...
Spring-Day02-依赖注入-作业
配置beans约束自动提示 spring-framework-4.2.4.RELEASE\docs\spring-framework-reference\html中打开xsd-configuratio ...
oracle行长度大小和页行数修改
行长度展示长度: /*查询长度*/ SQL> show linesize; /*查询行长度大小*/linesize 100SQL> set linesize200; /*修改行长 ...
Java程序如何生成Jar 执行文件(2)
一.用Eclipse生产Jar文件注意:此方法可以打包含有第三方jar包的项目 1. 首先,右键你的Java工程,选择Export,在Java文件夹下选择Runnable JAR file,如下图所 ...
HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛--D-psd面试
链接:https://www.nowcoder.com/acm/contest/90/D 来源:牛客网 1.题目描述掌握未来命运的女神 psd 师兄在拿了朝田诗乃的 buff 后决定去实习. 埃森哲 ...
重装系统后激活win10和office2016
激活win10: 重装的版本和电脑刚买来是的系统一样的话直接联网,过一段时间就会自动激活.如果不一样可以下载Kms工具激活. 激活office2016: 在开始菜单里双击“我的Office”,登录账号 ...

Jquery append()总结（一） 转载

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

随机推荐

热门专题

Jquery append()总结（一）转载

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