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