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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
JavaScript经典案例之简易计算器
Aug 24 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中文分词的简单实现代码分享
2011/07/17 PHP
PHP 图片水印类代码
2012/08/27 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP文件操作详解
2016/12/30 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Js的MessageBox
2006/12/03 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
react build 后打包发布总结
2018/08/24 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python中生成Epoch的方法
2017/04/26 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
linux面试题参考答案(9)
2015/01/07 面试题
材料物理专业个人求职信
2013/12/15 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏