`

jQuery clone复制功能

阅读更多

    在使用多个不固定同类型的页面元素时,采用复制、删除页面样式是一个不错的选择。

    实现多个复制,一般可以自己用javascript 写标签来实现,但是这样操作比较繁琐,创建了div Table等后还得自己去写事件驱动。通过了解jQuery有类是相当强大功能函数clone

    1、$("").clone();

     这样可以完整的复制一个元素,并且可以通过prependTo("");等实现元素位置控制,但是这样写不能完整的复制事件驱动过来

    2、$("").clone(true);

      这样可以完整发复制一个元素,且还可以复制所有事件驱动。而且也可以通过insertAfter("");等实现位置控制



在复制后会存在改变id等操作,可以采用find来处理。find只能识别父本中存在的页面元素:

class元素查找修改id值


div_new.find("span.zhen_xh").attr("id","zhen_xh"+zhen_id_new);
  div_new 为新创建的复制对象,"zhen_xh"+zhen_id_new 为id处理


span等类似元素更改显示值

div_new.find("span.zhen_xh").html(zhen_id_new);
 

 zhen_id_new为要显示的数值


input、select等标签查找更改

div_new.find("input[name=file]").attr("id","file"+zhen_id_new);
div_new.find("select[name=level]").attr("id","level"+zhen_id_new);
 

 name=file为 input标签中name="file"属性值,此处注意写法【 标签类型[属性=属性值] 】我这是这样写成功的,网上其它人

有【 input.属性 】的写法,但是不知为什么我这不行



 

分享到:
评论

相关推荐

    JQuery中clone方法复制节点

    JQuery库中的clone方法是其强大的功能之一,它允许开发者复制文档中的元素节点,进而可以将这些副本插入到DOM的其他位置或进行其他操作。在本知识点中,我们将详细介绍JQuery中clone方法复制节点的使用方法,重点...

    jquery单击功能按钮复制相同表单内容特效代码下载.zip

    这个"jquery单击功能按钮复制相同表单内容特效代码下载"的资源显然是一个利用jQuery实现的特定功能,即当用户单击一个按钮时,能够复制表单内的所有内容并显示为一个新的相同表单。 首先,我们需要了解jQuery的核心...

    jquery动态复制或者删除input表单特效代码下载.zip

    本资源“jquery动态复制或者删除input表单特效代码下载.zip”提供了利用jQuery实现的一种实用功能,即动态地在网页上复制或删除input表单元素,这对于创建动态、交互性强的用户界面非常有用。 首先,jQuery的选择器...

    jquery-clone-tableheader table 头部固定

    "jquery-clone-tableheader" 是一个基于 jQuery 的插件,它的主要功能是复制表格的头部,在表格内容区域出现滚动条时,将复制的表头固定在屏幕顶端,确保用户在滚动查看数据时始终能看到列名。这种方法特别适用于大...

    jquery的clone方法应用于textarea和select的bug修复

    通过这种方式,开发者在使用clone方法复制包含textarea和select的元素时,就可以避免值丢失的问题,确保用户在新页面上看到的界面与原页面上的一致,无论是在功能上还是在内容上。这不仅提高了代码的可用性,还增强...

    jQuery复制移除表单元素代码.zip

    "jQuery复制移除表单元素代码.zip"这个资源包含了一个使用jQuery 1.7.2版本实现的功能,即动态复制和删除表单元素。以下是关于这个主题的详细知识点: 1. **jQuery基本概念**: - jQuery是John Resig于2006年创建...

    jQuery中clone()方法用法实例

    总结来说,jQuery的clone()方法是处理DOM元素复制的一个重要功能,它简化了元素的复制流程,并保留了元素的事件处理器,使得开发者可以更加高效地操作DOM元素,增强页面的交互性和动态效果。通过上述实例代码和说明...

    jquery复制节点

    首先,jQuery提供了`.clone()`方法来复制DOM节点。这个方法可以用于复制一个或多个元素,并保留其所有的属性和事件绑定。例如,如果你有一个DOM元素`$("#myElement")`,你可以这样复制它: ```javascript var ...

    巧妙使用JQuery Clone 添加多行数据,并更新到数据库的实现代码

    之后,页面使用JQuery的Clone方法复制第一行(id为"tRow0"的行)并将其追加到表格中。在追加到表格之后,会对新复制的行中所有的输入框进行清空,并且根据新的行索引更新input元素的id和name属性。 通过克隆和属性...

    jQuery实现html table行Tr的复制、删除、计算功能

    本文实例讲述了jQuery实现html table行Tr的复制、删除、计算功能。分享给大家供大家参考,具体如下: 添加行: function addtr(){ var tr = $(#tb tr).eq(0).clone(); tr.appendTo(#tb); //tr.insertBefore(#tb ...

    jQuery复制表单元素代码.zip

    本资源“jQuery复制表单元素代码.zip”聚焦于如何使用jQuery实现表单元素的复制功能,这对于动态创建表单、批量添加输入项或构建可配置界面非常有用。下面将详细介绍jQuery在处理表单元素复制时的关键知识点。 首先...

    使用Jquery实现table中行的复制.zip

    本教程将深入探讨如何使用jQuery实现表格(table)中行的复制功能。这个功能在很多场合都非常实用,例如在数据录入或者表格编辑场景中,用户可能需要快速创建新的相似行。 首先,我们需要理解HTML表格的基本结构。...

    Jquery网页图片动态复制拖拽,并用ajax实现与后台struts2的交互

    // 添加复制功能 $('.copyButton').click(function() { var $clone = $image.clone(); $clone.appendTo('body'); // 将复制的图片添加到页面 }); }); ``` 这里,`.imageClass`是图片的CSS选择器,`.copyButton`...

    jquery拖动复制效果

    5. **btn_delete.png**:可能是一个删除按钮的图片,可能在拖动复制功能中用于清除已添加的元素。 6. **php中文网免费下载站.txt / php中文网下载站.url**:这两个文件可能是与教程或资源下载相关的链接,但它们与...

    jQuery复制节点用法示例(clone方法)

    在jQuery中,复制节点是一个常见的操作,通过使用jQuery提供的`.clone()`方法,开发者可以方便地复制DOM元素。该方法允许开发者复制匹配的元素集合中的所有元素,包括元素本身、其文本内容以及子元素。此外,`.clone...

    jquery ui拖拽 克隆

    在本教程中,我们将深入探讨如何使用jQuery UI实现拖拽(dragging)和克隆(cloning)功能,尤其是如何在拖拽过程中实现元素的复制。 首先,要使用jQuery UI的拖拽功能,你需要在你的HTML页面中引入jQuery库和...

    jQuery-CloneIt:JQuery插件,可让您生成div中的多个元素,从而使您可以根据需要多次复制这些元素。 cloneIt是一个jquery插件,可用于将div中的元素克隆n次

    jQuery.cloneIt 功能-> jQuery插件,允许生成div中多个元素的重复项。 这个插件是一个个人实验,目的是学习在jQuery中制作插件,我还没有看到这种类型的插件简单而又没有复杂的Grids插件。 此代码已包含在GPL许可中...

    jquery层拖动复制,层的自动增加,层的回收实例

    在本实例中,我们将深入探讨如何使用jQuery UI库来实现层(div)的拖动、复制以及自动增加和回收功能。jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery库,提供了丰富的用户界面组件,包括拖放、对话框、...

Global site tag (gtag.js) - Google Analytics