应用jquery节点操作

来源:互联网 发布:虚拟位置软件 编辑:程序博客网 时间:2024/05/24 01:42
1.包裹节点操作
2.节点的代替、克隆、删除的操作
//添加包裹标签


//没有内容的包裹标签
/**
$(function(){
$('div').wrap('<strong></strong>');//将标签用strong包裹起来,添加的标签内没有内容,如果有多个div标签,则逐一包裹
})
*/
/**
$(function(){
$('div').wrapAll('<strong></strong>');//如果有多个div标签,则放到一起统一包裹
})
*/


/**
$(function(){
//$('div').wrap('<strong>');//没有内容的标签可以简写
$('div').wrap('<strong/>');
})
*/
//标签内包含内容
/**
$(function(){
$('div').wrap('<strong>添加标签内包含的内容</strong>');//"添加标签内包含的内容"将被添加到div标签的前面
})
*/


//包裹多个标签
/**
$(function(){
$("div").wrap('<strong><em></em></strong>');//div将被包裹到strong和em内部
})
*/


//移除外层的包裹
/**
$(function(){
$('div').wrap('<strong></strong>');//添加上的标签
$('div').unwrap();//移除添加上的标签,如果有多层标签,移除div最近的一层标签,如果要移除多层添加的标签,需要调用多次unwrap方法,从内到外移除
})
*/


//在内部进行包裹
/**
$(function(){
$('div').wrapInner('<strong></strong>');//在所div内部加上strong标签
})
*/


//节点内容的拷贝
/**
$(function(){
$('div').click(function(){
alert('拷贝');
})


$('div').clone(true).appendTo('body');//true后,div的所用事件将被一同拷贝;
})
*/


//删除节点
/**
$(function(){
$('div').remove();//删除所有div标签
})
*/
/**
$(function(){
$('div').remove('.box');//定位删除类为.box的div标签
})
*/
/**
$(function(){
$('div').click(function(){
alert('拷贝');
})


$('div').remove().appendTo('body');//这样删除后有将其添加,div添加上去,但是其绑定的事件丢失
})
*/
/**
$(function(){
$('div').click(function(){
alert('拷贝');
})
$('div').detach().appendTo('body');//删除后有添加,div的绑定的事件没有丢失
})
*/


//删除节点内容
/**
$(function(){
$('div').empty();//删除div节点内的内容
})
*/


//替换标签
/**
$(function(){
$('div').replaceWith('<strong>strong内容</strong>');//div的内容以及标签事件被替换
})
*/
原创粉丝点击