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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
js实现无缝轮播图
Mar 09 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
第四章 php数学运算
2011/12/30 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python 进程的几种创建方式详解
2019/08/29 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
会计自我鉴定范文
2013/10/06 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
MySQL三种方式实现递归查询
2022/04/18 MySQL
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL