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

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

时间: 2024-08-27 09:17:48

jQuery移动和复制dom节点实用DOM操作案例_jquery的相关文章

DOM节点长度 DOM Node List Length

DOM节点长度名单 长度财产的定义长度的一个节点列表(人数节点) . 您可以通过环路节点使用名单的长度财产 x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />"); } 为例解释说: 获取所有<p>元素节点对于每个<p>元,产出的价值,其文

有关jquery与DOM节点操作方法和属性记录_jquery

网上找了份jquery的操作节点方法清单.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B)       B       A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A) A.before(B) B.in

JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结_jquery

一: DropDownList ------------------------------------------------------------------------------------------- 在使用 JQuery 进行遍历操作时, $("input").each(function(i) { ...... } 当操作对象的类型为 dropdownlist时:(备注:在firefox下DropDownList的类型为"select-one") 获

JavaScript中对DOM节点的访问、创建、修改、删除_基础知识

DOMDOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x

JS访问DOM节点方法详解_javascript技巧

本文实例讲述了JS访问DOM节点方法.分享给大家供大家参考,具体如下: 查找并访问节点 你可通过若干种方法来查找您希望操作的元素: 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode.firstChild 以及 lastChild 属性 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName()

javascript将DOM节点添加到文档的方法实例分析_javascript技巧

本文实例讲述了javascript将DOM节点添加到文档的方法.分享给大家供大家参考.具体如下: 这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长:第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种! 运行效果如下图所示: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

JavaScript利用HTML DOM进行文档操作的方法_javascript技巧

HTML DOM 树 一.DOM简介 DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准. W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口 核心DOM:用于任何结构化文档的标准模型 XML DOM:用于XML文档的标准模型.是用于获取.更改.添加或删除XML元素的标准. HTML DOM: 用于HTML文档的标准模型.定义了所有HTML元素的对象和属性,以及访问它们的方法(接口). 二.DOM节点 根据DOM规

JQuery复制DOM节点的方法_jquery

本文实例讲述了JQuery复制DOM节点的方法.分享给大家供大家参考.具体分析如下: 复制节点也是常用的DOM操作之一,例如很多购物网站的效果,用户不仅可以通过单击商品下方的"选择"按钮购买相应的产品,也可以通过鼠标拖动商品并将其放到购物车中.这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到购物效果. HTML DOM结构如下: <p class="nm_p" title="欢迎访问"

jQuery移动和复制dom节点实现程序

在做一个项目时,需要dom节点移动,如以下代码:  代码如下 复制代码 <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便:  代码如下 复制代码 $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样:  代码如下 复制代码 $('div').append( $('p').html() ) 这样只是把p标签里的内容复制到div标签里. 如