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


Posted in Javascript onSeptember 08, 2016

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("ul li").click(function(){
    $(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素
  })
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("ul li").click(function(){
    $(this).clone(true).appendTo("ul"); // 注意参数true
    //可以复制自己,并且他的副本也有同样功能。
  })
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图如下:

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

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

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
js电信网通双线自动选择技巧
Nov 18 Javascript
jquery 笔记 事件
Nov 02 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 #Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 #Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 #Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 #Javascript
js发送短信倒计时的简单实现方法
Sep 08 #Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 #Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 #Javascript
You might like
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
Python实现的下载网页源码功能示例
2017/06/13 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
幼儿园课题实施方案
2014/05/14 职场文书
财务管理专业求职信
2014/06/11 职场文书
2014年教务工作总结
2014/12/03 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
python多线程方法详解
2022/01/18 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript