集团站切换校区

验证码已发送,请查收短信

图标

学习文章

当前位置:首页 > >学习文章 > >

{HTML5}DOM节点操作-第三节

发布时间: 2019-01-18 16:28:54

​除了创建、插入和包裹节点,jQuery 还提供了一些常规的节点操作方法:复制、替换和删除节点。

$(‘#box’).click(function(){

 alert(‘123’);

});

$('body').append($('div').clone(true));     //复制一个节点添加到 HTML 中

$(‘div’).clone().appendTo(‘body’);


//同上, .clone(),里面没有参数或是false的情况下,它的事件处理是复制不到的


注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true 参数的话,这个元素附带的事件处理行为也复制出来。


$('div').remove();      //直接删除 div 元素

注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的,比如:$('div').remove('#box');                    //只删除

id=box 的 div。

$('div').remove('#box').appendTo(‘body’);  //移除掉再重新appendTo加回时,没有事件操作

$('div').

detach().appendTo(‘body’);         //保留事件行为的删除

注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。


$('div').empty();                         //删除掉节点里的内容

$('div').replaceWith('<span>节点</span>');   //将 div 替换成 span 元素内容

$('<span>节点</span>').replaceAll('div');     //同上

注意:节点被替换后,所包含的事件行为就全部消失了。

上一篇: {SpringBoot}springboot引入模版引擎

下一篇: {SpringBoot}web开发

十年老品牌
QQ咨询:450959328 微信咨询:togogozhong 咨询电话:020-38289118 咨询网站客服:在线客服

相关课程推荐

在线咨询 ×

您好,请问有什么可以帮您?我们将竭诚提供最优质服务!