JQuery是一個流行的JavaScript庫，它提供了許多強大的功能來簡化JavaScript編程。其中之一是通過jQuery div互換，它允許您動態地移動和重新排列頁面中的HTML元素。下面是一個簡單的例子，演示如何使用jQuery的div互換功能。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Div互換</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
background-color: #ddd;
border: 1px solid #777;
float: left;
text-align: center;
cursor: pointer;
user-select: none;
}
#container {
margin-top: 50px;
clear: both;
}
</style>
</head>
<body>
<h1>jQuery Div互換</h1>
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<script>
$(document).ready(function() {
// 點擊盒子時執行
$(".box").click(function() {
// 切換選擇狀態
$(this).toggleClass("selected");
// 如果有兩個已選擇，則交換它們
if ($(".selected").length == 2) {
var box1 = $(".selected").eq(0);
var box2 = $(".selected").eq(1);
var temp = box1.html();
box1.html(box2.html());
box2.html(temp);
$(".selected").removeClass("selected");
}
});
});
</script>
</body>
</html>在上面的示例代碼中，我們創建了一個包含多個具有“box”類的div的容器。每個盒子都是可選的，并且可以通過單擊其自身來選擇。如果選擇兩個盒子，則它們將交換其內容。
對于實現此目的，我們使用了 jQuery的toggleClass()函數來切換所選盒子的 class 屬性。一旦選擇兩個盒子，我們使用jQuery的 eq()函數和 html()函數來獲取它們的內容，并將它們交換。最后，清除已選擇的盒子，使它們回到默認狀態。
在這里，我們只介紹了簡單的互換，但您可以使用jQuery的類似 append()和prepend()等函數來在頁面中動態地重新排列元素。使用這些強大的功能，您可以輕松地設計出交互性更高的Web頁面。
下一篇代做css3和htm5