使用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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 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
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
js单词形式的运算符
2014/05/06 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Vue与React的区别和优势对比
2020/12/18 Vue.js
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python类及获取对象属性方法解析
2020/06/15 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
董事长致辞
2015/07/29 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL