0

0

JQuery复制DOM节点的方法_jquery

php中文网

php中文网

发布时间:2016-05-16 15:55:56

|

1579人浏览过

|

来源于php中文网

原创

本文实例讲述了jquery复制dom节点的方法。分享给大家供大家参考。具体分析如下:

复制节点也是常用的DOM操作之一,例如很多购物网站的效果,用户不仅可以通过单击商品下方的“选择”按钮购买相应的产品,也可以通过鼠标拖动商品并将其放到购物车中。这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到购物效果。

HTML DOM结构如下:

欢迎访问本站

  • 简单易懂的PHP编程
  • 简单易懂的C编程
  • 简单易懂的JavaScript编程
  • 简单易懂的JQuery编程

如果单击

  • 元素后需要再复制一个
  • 元素,可以使用clone()方法来完成。

    JQuery代码如下:

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

    在页面中单击随便一项后,列表最下方出现该项的新节点。

    Morph Studio
    Morph Studio

    Morph Studio是一款领先的文字转视频AI平台,可以将用户输入的文字转化为精美视频。

    下载

    复制节点后,被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能(本例中是单击事件),可以使用如下JQuery代码:

    $("ul li").click(function(){ 
     $(this).clone(true).appendTo("ul"); // 注意参数true 
     //可以复制自己,并且他的副本也有同样功能。 
    })

    在clone()方法中传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能(本例中是单击事件)。

    希望本文所述对大家的jQuery程序设计有所帮助。

  • 相关专题

    更多
    c++主流开发框架汇总
    c++主流开发框架汇总

    本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

    26

    2026.01.09

    c++框架学习教程汇总
    c++框架学习教程汇总

    本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

    24

    2026.01.09

    学python好用的网站推荐
    学python好用的网站推荐

    本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

    72

    2026.01.09

    学python网站汇总
    学python网站汇总

    本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

    9

    2026.01.09

    python学习网站
    python学习网站

    本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

    10

    2026.01.09

    俄罗斯手机浏览器地址汇总
    俄罗斯手机浏览器地址汇总

    汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

    52

    2026.01.09

    漫蛙稳定版地址大全
    漫蛙稳定版地址大全

    漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

    183

    2026.01.09

    php学习网站大全
    php学习网站大全

    精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

    12

    2026.01.09

    php网站搭建教程大全
    php网站搭建教程大全

    本合集专为零基础用户打造,涵盖PHP网站搭建全流程,从环境配置到实战开发,免费、易懂、系统化,助你快速入门建站!

    8

    2026.01.09

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    jQuery 教程
    jQuery 教程

    共42课时 | 4万人学习

    HTML+CSS基础与实战
    HTML+CSS基础与实战

    共132课时 | 9.4万人学习

    tp6+adminlte搭建通用后台
    tp6+adminlte搭建通用后台

    共39课时 | 5.7万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号