jQuery的dom操作转

Posted 2020-07-27 人艰不拆_zmc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的dom操作转相关的知识，希望对你有一定的参考价值。

addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配的元素内部追加内容。
appendTo()	向匹配的元素内部追加内容。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 html 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向每个匹配的元素内部前置内容。
prependTo()	向每个匹配的元素内部前置内容。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

获取dom获取表单

document.getElementsByTagName（"from"）;

使用dom获取某元素src属性的方法

element.getAttribute("src");

利用jquery操作dom

1. 利用jquery进行文档处理

2.1：外部插入

after(content)

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

返回值

jQuery

参数

content (String, dom, jQuery) : 插入到每个目标后的内容

示例

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

HTML 代码:

I would like to say:

jQuery 代码:

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

结果:

I would like to say: Hello

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

HTML 代码:

HelloI would like to say:

jQuery 代码:

$("p").after( $("#foo")[0] );//将jquery对象转换为dom对象$("#foo")[0]

结果:

I would like to say: Hello

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

HTML 代码:

HelloI would like to say:

jQuery 代码:

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

结果:

I would like to say: Hello

before(content)在每个匹配的元素之前插入内容。

返回值

jQuery

参数

content (String, Element, jQuery) : 插入到每个目标前的内容

示例

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

HTML 代码:

I would like to say:

jQuery 代码:

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

结果: [ HelloI would like to say: ]

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

HTML 代码:

I would like to say: Hello

jQuery 代码:

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

结果:

HelloI would like to say:

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

HTML 代码:

I would like to say: Hello

jQuery 代码:

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

结果:

HelloI would like to say:

insertAfter(content)

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

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

返回值jQuery

参数 content (String) : 用于匹配元素的jQuery表达式

示例

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

HTML 代码:

I would like to say: <div id="foo">Hello</div>

jQuery 代码:

$("p").insertAfter($("#foo“)); 在$("#foo“)在它后面插入段落P

结果:

<div id="foo">Hello</div>I would like to say:

insertBefore(content)

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

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

返回值jQuery

参数 content (String) : 用于匹配元素的jQuery表达式

示例

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

HTML 代码:

<div id="foo">Hello</div>I would like to say:

jQuery 代码:

$("p").insertBefore($("#foo“)); 在$("#foo“)前面插入段落p

结果:

I would like to say: <div id="foo">Hello</div>

2.2: 内部插入

append(content)

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

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

返回值jQuery

参数 content (String, Element, jQuery) : 要追加到目标中的内容

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

HTML 代码:

I would like to say:

jQuery 代码:

$("p").append("Hello"); 在p元素之间插入 b元素

结果:

[ I would like to say: Hello ]

appendTo(content)

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

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

返回值jQuery

参数content (String) :用于被追加的内容

示例

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

HTML 代码:

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

jQuery 代码:

$("p").appendTo($("#foo“)); P元素被添加到div元素#foo之中

结果:

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

prepend(content)

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

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

返回值jQuery

参数content (String, Element, jQuery) : 要插入到目标元素内部前端的内容

示例

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

HTML 代码:

I would like to say:

jQuery 代码:

$("p").prepend("Hello"); //将Hello添加到p标签内容前

结果:

[ 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: 
Hello
Good Bye

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

HTML 代码:

I would like to say: Hello

jQuery 代码:

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

结果:

HelloI would like to say:

prependTo(content)

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

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

返回值jQuery

参数content (String) :用于匹配元素的jQuery表达式

示例

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

HTML 代码:

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

jQuery 代码:

$("p").prependTo($("#foo“)); 把所有段落插入到div foo中

结果:

<div id="foo">I would like to say: </div> 2.3:

包裹

} wrap(html)

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

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

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

返回值jQuery

参数

html (String) : HTML标记代码字符串，用于动态生成元素并包裹目标元素

示例

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

HTML 代码:

Test Paragraph.

jQuery 代码:

$("p").wrap("<div class=‘wrap‘></div>"); 段落P用div class=‘wrap‘包裹起来

结果:

<div class="wrap">Test Paragraph.</div>

wrap(elem)

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

返回值jQuery

参数elem (Element) : 用于包装目标元素的DOM元素

} 示例

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

} HTML 代码:

} Test Paragraph.<div id="content"></div>

} jQuery 代码:

} $("p").wrap(document.getElementById(‘content‘));

} 结果:

} <div id="content">Test Paragraph.</div><div id="content"></div>

wrapAll(html)

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

这于 ‘.wrap()‘ 是不同的，‘.wrap()‘为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。

这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

返回值jQuery

参数html (String) : TML标记代码字符串，用于动态生成元素并包装目标元素

示例

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

} HTML 代码:

} HellocruelWorld

} jQuery 代码:

} $("p").wrapAll("<div></div>"); //如果是wrap 则每个段落P都被div包裹

} 结果:

} <div>HellocruelWorld</div>

wrapAll(elem)

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

这于 ‘.wrap()‘ 是不同的，‘.wrap()‘为每一个匹配的元素都包裹一次。

返回值jQuery

参数elem (Element) : 用于包装目标元素的DOM元素

示例

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

HTML 代码:

HellocruelWorld

jQuery 代码:

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

结果:

<div>HellocruelWorld</div>

wrapInner(html)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

返回值jQuery

参数html (String) : HTML标记代码字符串，用于动态生成元素并包装目标元素

示例

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

HTML 代码:

HellocruelWorld

jQuery 代码:

$("p").wrapInner("");

结果:

HellocruelWorld

wrapInner(elem)

将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来

返回值jQuery

参数elem (Element) : 用于包装目标元素的DOM元素

示例

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

HTML 代码:

HellocruelWorld

jQuery 代码:

$("p").wrapInner(document.createElement("b"));

结果:

HellocruelWorld

2.4: 替换

replaceWith(content)

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

返回值

jQuery

参数

content (String, Element, jQuery) : 用于将匹配元素替换掉的内容

示例

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

HTML 代码:

HellocruelWorld

jQuery 代码:

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

结果:

Paragraph. Paragraph. Paragraph.

replaceAll(selector) 去替换

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

返回值jQuery

参数selector (选择器) : 用于查找所要被替换的元素

示例

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

HTML 代码:

HellocruelWorld

jQuery 代码:

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

结果:

Paragraph. Paragraph. Paragraph.

2.5: 删除

} empty()

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

返回值jQuery

示例把所有段落的子元素（包括文本节点）删除

HTML 代码:

Hello, Person <a href="#">and person</a>

jQuery 代码:

$("p").empty(); 删除p中所有内容

结果:

remove([expr])

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

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。

返回值jQuery

参数expr (String) : (可选) 用于筛选元素的jQuery表达式

示例从DOM中把所有段落删除

HTML 代码:

Hello how are you?

jQuery 代码:

$("p").remove(); //移除p标签

结果:

how are

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

} HTML 代码:

} Hello how are you?

} jQuery 代码:

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

} 结果:

} how are you?

2.6: 复制

clone()

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

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

返回值jQuery

示例克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

HTML 代码:

Hello, how are you?

jQuery 代码:

$("b").clone().prependTo("p"); 将b标签赋值到p标签中,没有clone 就会直接插入到p

结果:

HelloHello, how are you?

clone(true)

元素以及其所有的事件处理并且选中这些克隆的副本

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

返回值jQuery

参数true (Boolean) : 设置为true以便复制元素的所有事件处理

示例

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

HTML 代码:

<button>Clone Me!</button>

jQuery 代码:

$("button").click(function(){
$(this).clone(true).insertAfter(this);

//复制 当前元素包含他的事件

以上是关于jQuery的dom操作转的主要内容，如果未能解决你的问题，请参考以下文章

JQuery的Dom操作

Jquery 在 DOM .append .after 之后获取更新的表格元素

jquery学习记录四（操作DOM元素）

jQuery基础（DOM篇，append()，after()，prepend()，insertAfter()，节点删除，遍历方法each()）

原生JS和jQuery操作DOM的区别小结

总结：《jQuery基础教程》 5-完结