jQuery节点操作方法大全

1.append()

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

HTML代码：

<p>我想说:</p>

jQuery代码:

$('p').append('<b>你好</b>');

结果：

<p>我想说：<b>你好</b></p>

 

2.appendTo()

将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规$(A).append(B)的操作，既不是将B追加到A中，而是将A追加到B中

HTML代码：

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').appendTo('p');

结果：

<p>我想说：<b>你好</b></p>

 

3.prepend()

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

HTML代码：

<p>我想说:</p>

jQuery代码:

$('p').prepend('<b>你好</b>');

结果：

<p><b>你好</b>我想说：</p>

 

4.prependTo()

将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规$(A).prepend(B)的操作，既不是将B前置到A中，而是将A前置到B中

HTML代码：

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').prependTo('p');

结果：

<p><b>你好</b>我想说：</p>

 

5.after()

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

HTML代码：

<p>我想说:</p>

jQuery代码:

$('p').after('<b>你好</b>');

结果：

<p>我想说：<b>你好</b></p>

 

6.insertAfter

将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规$(A).after(B)的操作，既不是将B插入到A后面，而是将A插入到B后面

HTML代码：

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').insertAfter('p');

结果：

<p>我想说：<b>你好</b></p>

 

7.before

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

HTML代码：

<p>我想说:</p>

jQuery代码:

$('p').before('<b>你好</b>');

结果：

<p><b>你好</b>我想说：</p>

 

8.insertBefore

将所有匹配的元素插入到指定元素的前面。实际上，使用该方法是颠倒了常规$(A).after(B)的操作，既不是将B插入到A前面，而是将A插入到B前面

HTML代码：

<p>我想说:</p>

jQuery代码:

$('<b>你好</b>').insertBefore('p');

结果：

<p><b>你好</b>我想说：</p>

 

9.remove()

作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素

 

注意！     当某个节点用remove()方法删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

实例：

var $li=$('ul li:eq(1)').remove();//获取第二个<li>元素节点后，将它从网页中删除

$li.appendTo('ul');//把刚才删除的节点又重新添加到<ul>元素里

 

另外remove()方法也可以通过传递参数来选择性的删除元素

实例：

$('ul li').remove('li[title!=菠萝]');//将<li>元素中属性title不等于‘菠萝’的<li>元素删除

 

10.empty()

严格来讲，empty()方法不是删除节点，而是清空节点，他能清空元素中的所有后代节点

实例：

$('ul li:eq(1)').empty();//获得第二个<li>元素节点后，清空此元素里的内容，注意是元素里！

当代码运行后，第二个<li>元素的内容被清空了，只剩下了<li>标签默认符号‘·’

 

11.clone()

实例:

$('ul li').click(function(){

　　$(this).clone().appendTo('ul');//复制当前节点，并将它追加到<ul>元素中

})

注意！      复制节点后，被复制的新元素并不具备任何行为。如果需要新元素也具有行为，使用clone时传递参数true。

实例：

$(this).clone(true).appendTo('ul');

 

12.replaceWith()和replaceAll()

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

实例:

$('p').replaceWith('<strong>你最不喜欢的方法是？</strong>');

同样上述功能也能使用relaceAll()来实现，该方法与relaceWith()方法的作用相同，只是颠倒了relaceWith()操作。

实例：

$('<strong>你最不喜欢的方法是？</strong>').replaceAll('p');

注意！    如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在元素上重新绑定事件。

 

13.wrap()

将某个节点用其他标记包裹起来。该方法对于需要在文档中插入额外标记的结构化标记非常有用，而且她不会破坏原始文档的语义。

jQuery代码：

$('strong').wrap('<b></b>');//用<b>标签把<strong>元素包裹起来

结果：

<b><strong title='你最不喜欢的方法是'>你最喜欢的方法是?</strong></b>

 

14.wrapAll()

将所有匹配的元素用一个元素来包裹。它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。

HTML代码：

<strong title='方法'>方法</strong>

<strong title='方法'>方法</strong>

<ul>

　　<li title='方法一'>方法一</li>

　　<li title='方法二'>方法二</li>

　　<li title='方法三'>方法三</li>

</ul>

如果使用wrap()方法包裹<strong>元素

jQuery代码：

$('strong').wrap('<b></b>');

结果:

<b><strong title='方法'>方法</strong></b>

<b><strong title='方法'>方法</strong></b>

如果使用wrapAll()方法包裹<strong>元素

jQuery代码：

$('strong').wrapAll('<b></b>');

结果：

<b>

　　<strong title='方法'>方法</strong>

　　<strong title='方法'>方法</strong>

</b>

 

15.wrapInner()

将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

jQuery代码：

$('strong').wrapInner('<b></b>');

结果：

<strong title='喜欢的方法'><b>喜欢的方法</b></strong>

转载于:https://www.cnblogs.com/kuangxin/p/4243873.html