码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-DOM操作之复制、替换、包裹节点

时间:2017-05-17 17:28:20      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:参数   替换   query   含义   blog   span   his   选择   div   

1、复制节点

clone()

$(function(){
            $(‘ul li‘).click(function() {
                $(this).clone().appendTo(‘ul‘);  //复制当前单击的节点,并将它追加到ul元素中
            });
});

复制节点后,被复制的新元素并不具有任何行为,如果需要新元素也具有复制功能,需要给clone()传递参数true,clone(true).true的含义是复元素并复制元素所绑定的事件

$(function(){
            $(‘ul li‘).click(function() {
                $(this).clone(true).appendTo(‘ul‘);  //复制当前单击的节点(绑定了clone()事件),并将它追加到ul元素中
            });
});

2、替换节点

replaceWith()

replaceAll()

$(function(){
            $(‘p‘).replaceWith(‘<span>你最不喜欢的水果是?</span>‘)  //span元素替换p元素
            $("<span>你最不喜欢的水果是?</span>").replaceAll(‘p‘) //span元素替换p元素
});

3、包裹节点

wrap()--有多个标签,每个标签都会被一个标签包裹

$(function(){
            $(‘p‘).wrap(‘<div></div>‘);  //用div标签把strong标签包裹起来
});

wrapAll()--有多个标签,所有的标签被一个标签包裹

wrapInner()

$(function(){
            $(‘p‘).wrapInner(‘<b></b>‘);//b标签包裹p标签里面的子内容,包括文本节点。<p title="选择你最喜欢的水果."><b>你最喜欢的水果是?</b></p>
});

 

jQuery-DOM操作之复制、替换、包裹节点

标签:参数   替换   query   含义   blog   span   his   选择   div   

原文地址:http://www.cnblogs.com/halai/p/6868027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!