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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。