使用jQuery實現(xiàn)兩個div中按鈕互換位置的實例代碼
更新時間：2017年09月21日 14:05:59 作者：Y豆
這篇文章主要介紹了使用jQuery實現(xiàn)兩個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循環(huán)進行遍歷
for(var i = 0; i < btns.length; i++) {
//i控制他的下標(biāo)確定的是那個按鈕的點擊事件
btns[i].onclick = function() {
//判斷如果此按鈕的父控件是div1
if($(this).parent().is("#div1")) {
//移除此按鈕
$(this).remove();
//轉(zhuǎn)移到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>數(shù)學(xué)</button>
<button>英語</button>
<button>體育</button>
<button>美術(shù)</button>
<button>物理</button>
<button>啦啦</button>
<button>化學(xué)</button>
<button>歷史</button>
<button>地理</button>
<button>生物</button>
</div>
</body>
總結(jié)
以上所述是小編給大家介紹的使用jQuery實現(xiàn)兩個div中按鈕互換位置的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)漸變下拉菜單的簡單方法,涉及jQuery鏈?zhǔn)讲僮骷癱ss樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery動態(tài)生成bootstrap表格的相關(guān)資料,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
使用jQuery獲取所有標(biāo)簽的實現(xiàn)代碼
在前端開發(fā)中,使用jQuery能夠方便地操作DOM元素,有時候我們需要獲取頁面上所有的HTML標(biāo)簽,可以通過jQuery來實現(xiàn),本文將介紹如何使用jQuery獲取所有的標(biāo)簽,并展示一個簡單的示例代碼,需要的朋友可以參考下2024-09-09
jquery-mobile表單的創(chuàng)建方法詳解
這篇文章主要介紹了jquery-mobile表單的創(chuàng)建方法,結(jié)合實例形式分析了jquery-mobile插件創(chuàng)建表單的具體操作步驟與各種常見表單元素的創(chuàng)建技巧,需要的朋友可以參考下2016-11-11
Jquery + Ajax調(diào)用webService實例代碼(asp.net)
Jquery + Ajax調(diào)用webService實例代碼,需要的朋友可以參考下。2010-08-08
jquery插件之信息彈出框showInfoDialog(成功/錯誤/警告/通知/背景遮罩)
某某同學(xué)最近寫了個基于jquery的信息彈出插件showInfoDialog，該插件對背景進行遮罩，然后彈出信息顯示框，信息顯示種類包括(操作成功/錯誤信息/警告信息/通知信息)感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了jQuery實現(xiàn)的簡單獲取索引功能,涉及jQuery事件響應(yīng)及元素索引獲取相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
剛開始接觸jquery，很多東西不熟悉，對于表單的一些操作收集整理。2010-04-04
本文主要介紹了獲取jqGrid中選擇的行的數(shù)據(jù)的語法和獲取簡例，需要的朋友可以看下2016-11-11
jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
這篇文章主要介紹了jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值的具體實現(xiàn),需要的朋友可以參考下2014-08-08