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