jQuery移动和复制dom节点实用DOM操作案例


Posted in Javascript onDecember 17, 2012

本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考。

在做一个项目时,需要dom节点移动,如以下代码:

<div></div> 
<p></p>

需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便:
$('div').append($('p'))

这样即可把p标签移动到div标签里,千万不要写成这样:
$('div').append( $('p').html() )

这样只是把p标签里的内容复制到div标签里。

如果只是复制一份到div标签里,原来的标签还保留着,那么可以这么写:

$('div').append( $('p').clone(true))


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

而且当clone参数设置为true时还可以将按钮上绑定的事件一起复制到新按钮上

在clone()方法中传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。如果不希望事件也被复制,则可以这么写:

$('div').append( $('p').clone())

移动节点
将页面上的一个节点移动到另外一个地方可以用jq的内部和外部插入方法(append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore),直接将选中的节点传递进去就可以实现移动
<button>Move Me!</button> 
<div id="box"></div> 
实例 
$("button").click(function(){ 
$(this).appendTo($("#box")); 
//或者用append 
$("#box").append(this); 
});

复制节点也是常用的DOM操作之一,例如很多购物网站的效果,用户不仅可以通过单击商品下方的“选择”按钮购买相应的产品,也可以通过鼠标拖动商品并将其放到购物车中。这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到购物效果。
HTML DOM结构如下:
<p class="nm_p" title="欢迎访问三水点靠木图书馆" >欢迎访问三水点靠木图书馆</p> 
<ul class="nm_ul"> 
<li title='PHP魔法'>简单易懂的PHP魔法</li> 
<li title='C魔法'>简单易懂的C魔法</li> 
<li title='JavaScript魔法'>简单易懂的JavaScript魔法</li> 
<li title='JQuery'>简单易懂的JQuery魔法</li> 
</ul>

如果单击<li>元素后需要再复制一个<li>元素,可以使用clone()方法来完成,先来看看效果:
效果演示
欢迎访问三水点靠木图书馆
简单易懂的PHP魔法
简单易懂的C魔法
简单易懂的JavaScript魔法
简单易懂的JQuery魔法
JQuery代码如下:
$(function(){ 
$(".nm_ul li").click(function(){ 
$(this).clone(true).appendTo(".nm_ul"); // 复制当前点击的节点,并将它追加到<ul>元素 
}) 
});

在页面中单击随便一项后,列表最下方出现该项的新节点。
复制节点后,被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能(本例中是单击事件),可以使用如下JQuery代码:
$("ul li").click(function(){ 
$(this).clone(true).appendTo("ul"); // 注意参数true 
//可以复制自己,并且他的副本也有同样功能。 
})
Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 #Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 #Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 #Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 #Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 #Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 #Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python如何实现代码检查
2019/06/28 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
团日活动总结报告
2014/06/25 职场文书
楚门的世界观后感
2015/06/03 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript