`

jQuery Dom操作 之 移动和复制dom节点

阅读更多
http://www.jquerycn.cn/content/20131015/5237.html

本文章简单的介绍了关于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
//可以复制自己,并且他的副本也有同样功能。
})
分享到:
评论

相关推荐

    jQuery DOM节点操作源码

    在"jQuery DOM节点操作源码"中,我们可以深入理解jQuery是如何优雅地处理DOM(Document Object Model)节点的。以下是关于jQuery DOM操作的一些关键知识点: 1. **选择器**:jQuery 的核心功能之一就是强大的选择器...

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

    在实际开发中,页面上的元素移动和复制操作经常被用来增强用户体验,例如实现拖放功能。在实现拖放功能时,可能需要将被拖动的元素在移动过程中复制一份跟随鼠标移动,从而达到拖动的效果。当用户释放鼠标时,复制的...

    14jQueryDOM节点操作.docx

    jQuery库简化了对DOM节点的操作,使得开发者能够更加高效地处理页面元素。 在Visual Studio环境下,我们可以利用jQuery进行DOM节点的创建、插入等操作。下面我们将详细探讨这些知识点: 1. **创建DOM节点** - ...

    JS/jQuery判断DOM节点是否存在的简单方法

    JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样...

    Jquery基础教程之DOM操作

    利用jQuery的DOM操作能力,可以很方便地对DOM树进行各种操作,如新建(创建节点)、增加(添加节点)、删除(移除节点)、修改(更新节点内容)和查找(定位节点)。 ### 查找节点 在DOM树中查找节点是基于节点的...

    Jquery节点插入、复制和替换方法

    在JQuery中,提供了多种方式来插入新的DOM节点,这些方法可以帮助开发者更灵活地操作网页结构。 ##### 内部插入节点 内部插入指的是在目标元素内部进行新节点的添加。主要有两种方法: - **prepend(content)**:...

    jQuery常见面试题之DOM操作详析

    关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了。 面试题一:JQ中html()、text()和val()区别? 面试题二:JQ中find()、has()和filter()区别? 面试...

    第06章 DOM节点操作(上)

    在本章“第06章 DOM节点操作(上)”中,我们将深入探讨Document Object Model(DOM)在JavaScript中的应用,以及如何通过DOM接口来操纵HTML或XML文档的结构、内容和样式。DOM是一种标准,它允许编程语言与网页内容...

    JQuery查找DOM节点的方法

    本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作,首先...

    JQuery 选择器、DOM节点操作练习实例

    根据所提供的文件内容,我们可以提炼出关于JQuery选择器、DOM节点操作练习实例的相关知识点,下面详细说明: 一、JQuery选择器基本概念和操作 JQuery选择器是JQuery的核心功能之一,它允许开发者通过特定的表达式...

    JQuery复制DOM节点的方法

    总结来说,使用jQuery进行DOM节点复制主要涉及到两个方法:clone()和appendTo()。clone()方法用来复制节点,而appendTo()方法用来将复制的节点追加到目标位置。通过合理使用这两个方法,可以轻松实现页面上的动态...

    详解jQuery中的DOM操作

    这篇关于“详解jQuery中的DOM操作”的文章深入介绍了jQuery如何帮助我们查找、创建、修改、插入、删除、复制、替换和包裹DOM节点,以及处理元素的属性。 首先,jQuery提供了强大的选择器系统来查找DOM节点。例如,...

    关于dom和jquery对象理解

    2. **属性操作**:jQuery同样提供了一些便捷的方式来读取和修改元素的属性。例如,`$("#id").attr("checked")`用来获取ID为`id`的元素的`checked`属性值。 3. **事件处理**:jQuery简化了事件绑定的过程,例如`$(...

    JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM...

    JQuery插入DOM节点的方法

    JQuery作为一种广泛使用的JavaScript库,提供了大量用于DOM操作的工具函数,其中插入DOM节点的方法尤其重要,因为它让动态地向页面中添加内容变得更加简单和直观。在JQuery中,有多种方法可以实现DOM节点的插入,每...

    jquery插入节点.

    总之,jQuery的节点插入功能极大地简化了JavaScript中的DOM操作,使得开发者能够更加专注于业务逻辑,而不是被繁琐的DOM操作所困扰。通过熟练掌握这些方法,你可以更高效地构建动态和交互性强的Web应用。在实践中...

    jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip

    总之,jQuery的节点操作、特殊属性操作和事件机制构成了其强大的功能基础,使开发者能高效地实现网页交互。结合Swiper这样的插件,可以构建出更加动态和吸引人的Web界面。学习和掌握这些知识点,对于提升Web开发技能...

    js和jquery对dom节点的操作(创建/追加)

    本文将详细介绍JavaScript和jQuery在DOM节点操作方面的一些技巧和实践,重点放在节点的创建和追加操作上。 ### JavaScript和jQuery的介绍 - **JavaScript**:是一种直译式脚本语言,广泛用于客户端的网页中。它...

    DOM操作和jQuery实现选项移动操作的简单实例

    ### DOM操作和jQuery实现选项移动操作的简单实例 #### HTML基础与结构 1. **HTML文档结构**:HTML文档由`&lt;!DOCTYPEhtml&gt;`声明开始,这表示文档类型为HTML5。`&lt;html&gt;`是根元素,`lang="en"`指定了文档的语言为英语...

Global site tag (gtag.js) - Google Analytics