您的当前位置:首页正文

jQuery 文档处理

2022-11-03 来源:步旅网
1 append(content|fn)

概述

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

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

参数

contentString, Element, jQueryV1.0 要追加到目标中的内容

function(index, html)FunctionV1.4

返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。

示例

描述:

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

HTML 代码:

I would like to say:

jQuery 代码:

$(\"p\").append(\"Hello\");

结果:

[

I would like to say: Hello

]

2 appendTo(content)

V1.0概述

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

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

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

参数

contentString 用于被追加的内容

示例

描述:

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

HTML 代码:

I would like to say:

jQuery 代码:

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

结果:

I would like to say:

I would like to say:

描述:

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

HTML 代码:

jQuery 代码:

$(\"

\")

.appendTo(\"div\") .addClass(\"test\") .end()

.addClass(\"test2\");

结果:

3 prepend(content)

概述

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

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

参数

contentString, Element, jQueryV1.0 要插入到目标元素内部前端的内容 function(index, html)FunctionV1.4

返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。

示例

描述:

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

HTML 代码:

I would like to say:

jQuery 代码:

$(\"p\").prepend(\"Hello\");

结果:

[

HelloI would like to say:

] 描述:

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

HTML 代码:

I would like to say:

I would like to say:

Hello Good Bye

jQuery 代码:

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

结果:

HelloI would like to say:

HelloI would like to say:

Good Bye 描述:

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

HTML 代码:

I would like to say:

Hello

jQuery 代码:

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

结果:

HelloI would like to say:

4 prependTo(content)

概述

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

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

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

参数

contentString

用于匹配元素的jQuery表达式

示例

描述:

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

HTML 代码:

I would like to say:

jQuery 代码:

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

结果:

I would like to say:

5 after(content|fn)

概述

在每个匹配的元素之后插入内容。

参数

contentString, Element, jQueryV1.0 插入到每个目标后的内容 functionFunctionV1.4

函数必须返回一个html字符串。

示例

描述:

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

HTML 代码:

I would like to say:

jQuery 代码:

$(\"p\").after(\"Hello\");

结果:

I would like to say:

Hello 描述:

在所有段落之后插入一个DOM元素。

HTML 代码:

Hello

I would like to say:

jQuery 代码:

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

结果:

I would like to say:

Hello 描述:

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

HTML 代码:

Hello

I would like to say:

jQuery 代码:

$(\"p\").after( $(\"b\") );

结果:

I would like to say:

Hello

6 before(content|fn)

概述

在每个匹配的元素之前插入内容。

参数

contentString, Element, jQueryV1.0 插入到每个目标后的内容 functionFunctionV1.4

函数必须返回一个html字符串。

示例

描述:

在所有段落之前插入一些HTML标记代码。

HTML 代码:

I would like to say:

jQuery 代码:

$(\"p\").before(\"Hello\");

结果:

[ Hello

I would like to say:

] 描述:

在所有段落之前插入一个元素。

HTML 代码:

I would like to say:

Hello

jQuery 代码:

$(\"p\").before( $(\"#foo\")[0] );

结果:

Hello

I would like to say:

描述:

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

HTML 代码:

I would like to say:

Hello

jQuery 代码:

$(\"p\").before( $(\"b\") );

结果:

Hello

I would like to say:

9insertAfter(content)

概述

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。

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

参数

contentStringV1.0

用于匹配元素的jQuery表达式

示例

描述:

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

HTML 代码:

I would like to say:

Hello

jQuery 代码:

$(\"p\").insertAfter(\"#foo\");

结果:

Hello

I would like to say:

10 insertBefore(content)

概述

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

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

参数

contentStringV1.0

用于匹配元素的jQuery表达式

示例

描述:

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

HTML 代码:

Hello

I would like to say:

jQuery 代码:

$(\"p\").insertBefore(\"#foo\");

结果:

I would like to say:

Hello

11 wrap(html|ele|fn)

概述

把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖

先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。

参数

htmlStringV1.0

HTML标记代码字符串,用于动态生成元素并包裹目标元素 elemElementV1.0

用于包装目标元素的DOM元素 fnFunctionV1.4 生成包裹结构的一个函数

示例

html参数描述:

把所有的段落用一个新创建的div包裹起来

jQuery 代码:

$(\"p\").wrap(\"

\"); elem参数描述:

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

jQuery 代码:

$(\"p\").wrap(document.getElementById('content')); 回调函数 描述:

用原先div的内容作为新div的class,并将每一个元素包裹起来

HTML 代码:

Hello
Goodbye

jQuery 代码:

$('.inner').wrap(function() {

return '

'; });

结果:

Hello

Goodbye

12 unwrap()

概述

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

示例

描述:

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

HTML 代码:

Hello

cruel

World

jQuery 代码:

$(\"p\").unwrap()

结果:

Hello

cruel

World

13 wrapAll(html|ele)

概述

将所有匹配的元素用单个元素包裹起来

这于 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

参数

htmlStringV1.2

TML标记代码字符串,用于动态生成元素并包装目标元素 elemElementV1.2

用于包装目标元素的DOM元素

示例

html描述:

用一个生成的div将所有段落包裹起来

jQuery 代码:

$(\"p\").wrapAll(\"

\"); elem描述:

用一个生成的div将所有段落包裹起来

jQuery 代码:

$(\"p\").wrapAll(document.createElement(\"div\"));

14 wrapInner(htm|ele|fnl)

概述

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

参数

htmlStringV1.2

HTML标记代码字符串,用于动态生成元素并包装目标元素 elemElementV1.2

用于包装目标元素的DOM元素 fnFunctionV1.4 生成包裹结构的一个函数

示例

参数html描述:

把所有段落内的每个子内容加粗

jQuery 代码:

$(\"p\").wrapInner(\"\"); 参数elem描述:

把所有段落内的每个子内容加粗

jQuery 代码:

$(\"p\").wrapInner(document.createElement(\"b\")); 回调函数 描述:

用原先div的内容作为新div的class,并将每一个元素包裹起来

HTML 代码:

Hello
Goodbye

jQuery 代码:

$('.inner').wrapInner(function() {

return '

'; });

结果:

Hello

Goodbye

15 replaceWith(content|fn)

概述

将所有匹配的元素替换成指定的HTML或DOM元素。

参数

contentString, Element, jQuery, FunctionV1.2

用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话,函数返回值必须是HTML字符串。 fnFunctionV1.4

返回THML字符串,用来替换的内容。

示例

描述:

把所有的段落标记替换成加粗的标记。

HTML 代码:

Hello

cruel

World

jQuery 代码:

$(\"p\").replaceWith(\"Paragraph. \");

结果:

Paragraph. Paragraph. Paragraph. 描述:

用第一段替换第三段,你可以发现他是移动到目标位置来替换,而不是复制一份来替换。

HTML 代码:

Hello
And
Goodbye

jQuery 代码:

$('.third').replaceWith($('.first'));

结果:

And
Hello

16 replaceAll(selector)

概述

用匹配的元素替换掉所有 selector匹配到的元素。

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

参数

selector选择器V1.2 用于查找所要被替换的元素

示例

描述:

把所有的段落标记替换成加粗标记

HTML 代码:

Hello

cruel

World

jQuery 代码:

$(\"Paragraph. \").replaceAll(\"p\");

结果:

Paragraph. Paragraph. Paragraph.

17 empty()

V1.0概述

删除匹配的元素集合中所有的子节点。

示例

描述:

把所有段落的子元素(包括文本节点)删除

HTML 代码:

Hello, Person and person

jQuery 代码:

$(\"p\").empty();

结果:

18 remove([expr])

概述

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

参数

exprStringV1.0

用于筛选元素的jQuery表达式

示例

描述:

从DOM中把所有段落删除

HTML 代码:

Hello

how are

you?

jQuery 代码:

$(\"p\").remove();

结果:

how are 描述:

从DOM中把带有hello类的段落删除

HTML 代码:

Hello

how are

you?

jQuery 代码:

$(\"p\").remove(\".hello\");

结果:

how are

you?

19 detach([expr])

概述

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

参数

exprStringV1.0

用于筛选元素的jQuery表达式

示例

描述:

从DOM中把所有段落删除

HTML 代码:

Hello

how are

you?

jQuery 代码:

$(\"p\").detach();

结果:

how are 描述:

从DOM中把带有hello类的段落删除

HTML 代码:

Hello

how are

you?

jQuery 代码:

$(\"p\").detach(\".hello\");

结果:

how are

you?

20 clone([Even[,deepEven]])

概述

克隆匹配的DOM元素并且选中这些克隆的副本。

在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

参数

EventsBooleanV1.0

一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false

Events[,deepEvents]Boolean,BooleanV1.5

1:一个布尔值(true 或者 false)指示事件处理函数是否会被复制。 2:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

示例

描述:

克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。

HTML 代码:

Hello

, how are you?

jQuery 代码:

$(\"b\").clone().prependTo(\"p\");

结果:

Hello

Hello, how are you?

描述:

创建一个按钮,他可以复制自己,并且他的副本也有同样功能。

HTML 代码:

jQuery 代码:

$(\"button\").click(function(){

$(this).clone(true).insertAfter(this); });

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- 版权所有