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变量作用域更轻松
Oct 25 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
iframe实用操作锦集
Apr 22 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 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
Yii2中关联查询简单用法示例
2016/08/10 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
python3爬取各类天气信息
2018/02/24 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python实现udp聊天窗口
2020/03/31 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
事业单位请假制度
2014/01/13 职场文书
机关单位动员会主持词
2014/03/20 职场文书
市场开发计划书
2014/05/07 职场文书
2014年党委工作总结
2014/11/22 职场文书
尊师重教主题班会
2015/08/14 职场文书
四年级语文教学反思
2016/03/03 职场文书