使用jQuery实现两个div中按钮互换位置的实例代码


Posted in jQuery onSeptember 21, 2017

效果如下

使用jQuery实现两个div中按钮互换位置的实例代码 

代码如下:

<head>
 <meta charset="utf-8" />
 <title></title>
 <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
 <script type="text/javascript">
  $(function() {
   //定义一个变量等于所有button按钮
   var btns = $("button");
   //for循环进行遍历 
   for(var i = 0; i < btns.length; i++) {
    //i控制他的下标确定的是那个按钮的点击事件
    btns[i].onclick = function() {
     //判断如果此按钮的父控件是div1
     if($(this).parent().is("#div1")) {
      //移除此按钮
      $(this).remove();
      //转移到div2
      $(this).appendTo("#div2")
     } else {
      //否则他的父控件是div2 那么就把他移动到div1
      $(this).appendTo("#div1")
     }
    }
   }
  });
 </script>
</head>
<style>
 div {
  width: 500px;
  height: 200px;
  border: 1px;
  background-color: beige;
 }
 button {
  width: 50px;
  height: 30px;
 }
</style>
<body>
 <div id="div1">
  <p>我选择的:</p>
 </div>
 <div id="div2">
  <p>还可以选:</p>
  <button>数学</button>
  <button>英语</button>
  <button>体育</button>
  <button>美术</button>
  <button>物理</button>
  <button>啦啦</button>
  <button>化学</button>
  <button>历史</button>
  <button>地理</button>
  <button>生物</button>
 </div>
</body>

总结

以上所述是小编给大家介绍的使用jQuery实现两个div中按钮互换位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 #jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
jquery 一键复制到剪切板的实例
Sep 20 #jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
You might like
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
安装docker-compose的两种最简方法
2019/07/30 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
如何保障Web服务器安全
2014/05/05 面试题
自荐信结尾
2013/10/27 职场文书
计算机相关的自我评价
2014/01/15 职场文书
会计岗位职责范本
2015/04/02 职场文书
中秋节随笔
2015/08/15 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS