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 相关文章推荐
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
javascript生成随机数的方法
May 16 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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
php转换颜色为其反色的方法
2015/04/27 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP attributes()函数讲解
2019/02/03 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
jquery easyui使用心得
2014/07/07 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
python练习程序批量修改文件名
2014/01/16 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python逆序打印各位数字的方法
2018/06/25 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
小学趣味运动会加油稿
2014/09/25 职场文书
学生会主席任命书
2015/09/21 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Mysql文件存储图文详解
2021/06/01 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技