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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
JavaScript异步操作中串行和并行
Nov 20 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
多php服务器实现多session并发运行
2006/10/09 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
初识Node.js
2014/09/03 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
shell程序中如何注释
2012/02/17 面试题
Why we need EJB
2016/10/20 面试题
Ajax的工作原理
2015/12/04 面试题
英语专业应届生求职信范文
2013/11/15 职场文书
安全标语大全
2014/06/10 职场文书
转让协议书范本
2014/09/13 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android