jQuery實作兩個div中按鈕互換位置詳解-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作兩個div中按鈕互換位置詳解

小云云

Dec 27, 2017 am 11:12 AM

jquery 互換按鈕

本文主要介紹了使用jQuery實現兩個p中按鈕互換位置的實例代碼,需要的朋友可以參考下，希望能幫助到大家。

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() {
     //判断如果此按钮的父控件是p1
     if($(this).parent().is("#p1")) {
      //移除此按钮
      $(this).remove();
      //转移到p2
      $(this).appendTo("#p2")
     } else {
      //否则他的父控件是p2 那么就把他移动到p1
      $(this).appendTo("#p1")
     }
    }
   }
  });
 </script>
</head>
<style>
 p {
  width: 500px;
  height: 200px;
  border: 1px;
  background-color: beige;
 }
 button {
  width: 50px;
  height: 30px;
 }
</style>
<body>
 <p id="p1">
  <p>我选择的：</p>
 </p>
 <p id="p2">
  <p>还可以选：</p>
  <button>数学</button>
  <button>英语</button>
  <button>体育</button>
  <button>美术</button>
  <button>物理</button>
  <button>啦啦</button>
  <button>化学</button>
  <button>历史</button>
  <button>地理</button>
  <button>生物</button>
 </p>
</body>

登入後複製

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1273

C# 教程

1252

Related knowledge

為什麼我的筆記型電腦在按下電源按鈕後無法啟動？ Mar 10, 2024 am 09:31 AM

您的Windows筆記型電腦無法啟動的原因可能有很多。記憶體故障、電池耗盡、電源按鈕故障或硬體問題都是常見原因。下面提供了一些解決方案，幫助您解決這個問題。按下電源按鈕後筆記型電腦無法啟動如果您的Windows筆記型電腦在按下電源按鈕後仍無法啟動，您可以採取以下步驟來解決問題：你的筆記本充滿電了嗎？執行硬重置清理你的筆記型電腦重新拔插內存透明的CMOS型電池帶上你的筆記型電腦去修理。 1]您的筆記型電腦充滿電了嗎？首先要做的事情是檢查您的筆記型電腦是否已經完全充電。如果電池耗盡，筆記型電腦將無法啟動

iPhone 16長什麼樣子？ iPhone 16有哪些變化？ Apr 07, 2024 pm 05:10 PM

iPhone15系列發表後，有關蘋果新品iPhone16的外觀和配置相關爆料就沒斷過。 iPhone16長什麼樣？ iPhone16有改進嗎？近日，有海外部落客展示了iPhone16系列機型的設計，整體設計和iPhone15系列基本上相同。從圖片中可以看到，iPhone16系列全系標配了一個全新的「拍攝」按鈕，讓使用者更方便地進行拍照。此外，其它設計細節暫時還不得而知。訊息顯示，這顆新增的按鈕將用於拍攝視頻，位於電源按鈕下方。以往的消息曾提到其可能是一顆電容式固態按鈕，但最近的說法顯示這應該還是一顆

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

使用jQuery為表格新增一行的方法介紹 Feb 29, 2024 am 08:12 AM

jQuery是一個受歡迎的JavaScript函式庫，廣泛用於網頁開發。在網頁開發過程中，經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行，並提供具體的程式碼範例。首先，我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫：

See all articles

jQuery實作兩個div中按鈕互換位置詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題