博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery append()总结(一)
阅读量:6535 次
发布时间:2019-06-24

本文共 7451 字,大约阅读时间需要 24 分钟。

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:

$("p").appendTo("#foo") ->

I would like to say:

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:

HelloGood 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:

$("p").prependTo("#foo") ->

I would like to say:

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 元素。Hello

I would like to say:

$("p").after( $("#foo")[0] ) ->

I would like to say:

Hello// 例子三:在所有段落中后插入一个 jQuery 对象(类似于一个DOM元素数组)。Hello

I 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") -> [ Hello

I would like to say:

]// 例子二:在所有段落之前插入一个元素。

I would like to say:

Hello$("p").before( $("#foo")[0] ) -> Hello

I would like to say:

// 例子三:在所有段落中前插入一个 jQuery 对象(类似于一个DOM元素数组)。

I would like to say:

Hello$("p").before( $("b") ) -> Hello

I 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:

Hello
$("p").insertAfter("#foo") ->
Hello

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") 相同。
Hello

I would like to say:

$("p").insertBefore("#foo") ->

I would like to say:

Hello

Javascript代码   

●  wrap(elem) 
/** * 把所有匹配的元素用其他元素的结构化标记包装起来。 * * @elem(Element) 用于包装目标元素的 DOM 元素 * @return Object * @owner jQuery Object */function wrap(elem);// 例子:用 ID 是 "content" 的 div 将每一个段落包裹起来。

Test Paragraph.

$("p").wrap(document.getElementById('content')) ->

Test Paragraph.

    ●  wrapAll(elem) 
/** * 将所有匹配的元素用单个元素包裹起来。这于 wrap(elem) 是不同的,wrap(elem) 为每一个匹配的元素都 * 包裹一次。 * * @elem(Element) 用于包装目标元素的 DOM 元素 * @return Object * @owner jQuery Object */function wrapAll(elem);// 例子:用一个生成的 div 将所有段落包裹起来。

Hello

cruel

World

$("p").wrapAll(document.createElement("div")) ->

Hello

cruel

World

    ●  wrapInner(elem) 
/** * 将每一个匹配的元素的子内容(包括文本节点)用 DOM 元素包裹起来。 * * @elem(Element) 用于包装目标元素的 DOM 元素 * @return Object * @owner jQuery Object */function wrapInner(elem);// 例子:把所有段落内的每个子内容加粗。

Hello

cruel

World

$("p").wrapInner(document.createElement("b")) ->

Hello

cruel

World

    ●  wrap(html) 
/** * 把所有匹配的元素用其他元素的结构化标记包裹起来。 * 这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 *  * 这个函数的原理是检查提供的 html(它是由所提供的 HTML 标记代码动态生成的),并在它的代码结构中 * 找到最上层的祖先元素 - 这个祖先元素就是包裹元素。 *  * 当 HTML 标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。 * * @html(String) HTML 标记代码字符串,用于动态生成元素并包裹目标元素 * @return Object * @owner jQuery Object */function wrap(html);// 例子:把所有的段落用一个新创建的 div 包裹起来。

Test Paragraph.

$("p").wrap("
") ->

Test Paragraph.

    ●  wrapAll(html) 
/** * 将所有匹配的元素用单个元素包裹起来。这于 wrap(html)是不同的,wrap(html) 为每一个匹配的元素都 * 包裹一次。 * * 这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 * * 这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素 - 这个祖先元素就 * 是包装元素。 * * @html(String) HTML 标记代码字符串,用于动态生成元素并包装目标元素 * @return Object * @owner jQuery Object */function wrapAll(html);// 例子:用一个生成的 div 将所有段落包裹起来。

Hello

cruel

World

$("p").wrapAll("
") ->

Hello

cruel

World

    ●  wrapInner(html) 
/** * 将每一个匹配的元素的子内容(包括文本节点)用一个 HTML 结构包裹起来。 * * 这个函数的原理是检查提供的第一个元素(它是由所提供的 HTML 标记代码动态生成的),并在它的代码结构中 * 找到最上层的祖先元素 - 这个祖先元素就是包装元素。 * * @html(String) HTML 标记代码字符串,用于动态生成元素并包装目标元素 * @return Object * @owner jQuery Object */function wrapInner(html);// 例子:把所有段落内的每个子内容加粗。

Hello

cruel

World

$("p").wrapInner("") ->

Hello

cruel

World

    ●  replaceAll(selector) 
/** * 用匹配的元素替换掉所有 selector 匹配到的元素。 * * @selector(Selector) 用于查找所要被替换的元素 * @return Object * @owner jQuery Object */function replaceAll(selector);// 例子:把所有的段落标记替换成加粗标记。

Hello

cruel

World

$("Paragraph. ").replaceAll("p") -> Paragraph. Paragraph. Paragraph.
    ●  replaceWith(content) 
/** * 将所有匹配的元素替换成指定的 HTML 或 DOM 元素。 * * @content(String, Element, jQuery) 用于将匹配元素替换掉的内容 * @return Object * @owner jQuery Object */function replaceWith(content);// 例子:把所有的段落标记替换成加粗的标记。

Hello

cruel

World

$("p").replaceWith("Paragraph. ") -> Paragraph. Paragraph. Paragraph.
    ●  empty() 
/** * 删除匹配的元素集合中所有的子节点。 * * @return Object * @owner jQuery Object */function empty();// 例子:把所有段落的子元素(包括文本节点)删除。

Hello, Person and person

$("p").empty() ->

    ●  remove([expr]) 
/** * 从 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?

    ●  clone() 
/** * 克隆匹配的 DOM 元素并且选中这些克隆的副本。 * 在想把 DOM 文档中元素的副本添加到其他位置时这个函数非常有用。 * * @return Object * @owner jQuery Object */function clone();// 例子:克隆所有 b 元素(并选中这些克隆的副本),然后将它们前置到所有段落中。Hello

, how are you?

$("b").clone().prependTo("p") -> Hello

Hello, how are you?

    ●  clone(true) 
/** * 元素以及其所有的事件处理并且选中这些克隆的副本。 * 在想把 DOM 文档中元素的副本添加到其他位置时这个函数非常有用。 * * @true(Boolean) 设置为 true 以便复制元素的所有事件处理 * @return Object * @owner jQuery Object */function clone(true);// 例子:创建一个按钮,它可以复制自己,并且它的副本也有同样功能。$("button").click(function() {  $(this).clone(true).insertAfter(this);});

转载于:https://my.oschina.net/xinger/blog/209289

你可能感兴趣的文章
手机WAP前端开发标准
查看>>
熟悉常用的HDFS操作
查看>>
vue-cli脚手架一些插件安装elementui和axios
查看>>
[Gradle] 在 Eclipse 下利用 gradle 构建系统
查看>>
JAVAWEB 一一 Hibernate(框架)
查看>>
与、或、异或、取反、左移和右移
查看>>
wordpress模板文件及函数调用
查看>>
jQuery根据元素值删除数组元素的方法
查看>>
Linux基础学习(14)--日志管理
查看>>
vue常用的指令
查看>>
.NET 反射的使用
查看>>
加密算法与安全认证
查看>>
6月21日云栖精选夜读:国内首位!Node.js社区将阿里云工程师张秋怡吸纳为CTC成员...
查看>>
在项目中导入import javax.servlet 出错解决办法
查看>>
js数据类型判断和数组判断
查看>>
关于安排
查看>>
矩阵快速幂
查看>>
tarjan进阶
查看>>
第一季度绩效填写
查看>>
【LeetCode每天一题】Construct Binary Tree from Preorder and Inorder Traversal(使用前序和中序遍历构建二叉树)...
查看>>