jquery操作DOM元素

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

.detach()

从DOM 中去掉所匹配的元素。

.detach([selector])

selector 一个选择表达式将需要移除的从匹配的元素中过滤出来。

$("p").detach();

.empty()

从DOM中移除集合中匹配元素的所有子节点。

.empty() 这个方法不接受任何参数。

结构:

<div class="container">

<div class="hello">Hello</div>

<div class="goodbye">Goodbye</div>

</div>

$('.hello').empty();

效果:

<div class="container">

<div class="hello"></div>

<div class="goodbye">Goodbye</div>

</div>

.remove()

将匹配元素从DOM 中删除,同时删除元素上的事件。

.remove([selector])

selector 一个选择器表达式用来过滤将被移除的匹配元素集合。

结构:

<div class="container">

<div class="hello">Hello</div>

<div class="goodbye">Goodbye</div>

</div>

$('.hello').remove();

效果:

<div class="container">

<div class="goodbye">Goodbye</div>

</div>

.unwrap()

将匹配元素集合的父级元素删除,保留自身,(和兄弟元素,如果存在)再原来的位置。

.unwrap()

这个方法不接受任何参数。

结构:

<div class="container">

<div class="hello">Hello</div>

<div class="goodbye">Goodbye</div>

</div>

$('.hello').empty();

效果:

<div class="hello">Hello</div>

<div class="goodbye">Goodbye</div>

.replaceAll()

用集合的匹配元素替换每个目标元素。

.replaceAll(target)

target 一个选择器字符串,对象,DOM元素,或者元素数组,包含哪个元素被替换。

结构:<div class="container">

<div class="inner first">Hello</div>

<div class="inner second">And</div>

<div class="inner third">Goodbye</div>

</div>

$('<h2>New heading</h2>').replaceAll('.inner');

效果:

<div class="container">

<h2>New heading</h2>

<h2>New heading</h2>

<h2>New heading</h2>

</div>

.replaceWith()

用提供的内容替换集合中所匹配的元素并返回删除元素的集合。

.replaceWith(newContent)

newContent 用来插入的内容,可能是HTML字符串,DOM元素,或者对象。

.replaceWith(function)

function 一个函数,返回的内容会替换匹配的元素集合。

结构:<div class="container">

<div class="inner first">Hello</div>

<div class="inner second">And</div>

<div class="inner third">Goodbye</div>

</div>

$('div.second').replaceWith('<h2>New heading</h2>');

效果:<div class="container">

<div class="inner first">Hello</div>

<h2>New heading</h2>

<div class="inner third">Goodbye</div>

</div>

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

效果:<div class="container">

<div class="inner second">And</div>

<div class="inner first">Hello</div>

</div>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航