如何使用jQuery改變多個元素的樣式？

在現代web開發中，jQuery已經成為了一個非常流行的JavaScript庫。它不僅可以簡化JavaScript代碼，還可以輕松地操作HTML和CSS。本文將介紹如何使用jQuery來實現點擊按鈕改

在現代web開發中，jQuery已經成為了一個非常流行的JavaScript庫。它不僅可以簡化JavaScript代碼，還可以輕松地操作HTML和CSS。本文將介紹如何使用jQuery來實現點擊按鈕改變多個元素的樣式。

1. 新建HTML文件

首先，我們需要新建一個HTML文件。可以使用任何文本編輯器打開，并在其中添加以下內容：

```html

Change Style

```

這個HTML文件包含四個帶有類名“box”的div元素和一個id為“btn”的按鈕元素。每個盒子元素都有一個共同的類名，我們將使用該類名來更改所有元素的樣式。

2. 引入jQuery.min.js文件

要使用jQuery，我們需要從官方網站下載或引入jQuery.min.js文件。幸運的是，我們可以使用CDN（內容分發網絡）來獲取它。在我們上面的HTML文件中，我們已經通過以下代碼引入了jQuery.min.js文件：

```html

```

3. 創建HTML內容

上面的HTML文件創建了四個盒子元素和一個按鈕元素。每個盒子元素都帶有類名“box”，用于在后續步驟中更改其樣式。

4. 預覽效果如圖

如果你在瀏覽器中打開該HTML文件，你會看到四個灰色的盒子和一個標記為“Change Style”的按鈕。我們將在下一步中為此按鈕添加點擊事件。

5. 用jQuery創建點擊事件

接下來，我們將使用jQuery來創建一個點擊事件，當用戶單擊按鈕時，該事件將更改所有帶有類名“box”的元素的樣式。以下是我們將使用的jQuery代碼：

```javascript

$(document).ready(function() {

$("btn").click(function() {

$(".box").addClass("selected");

});

});

```

首先，我們使用jQuery的$(document).ready()方法來確保DOM已經加載并準備好進行操作。然后，我們選擇id為“btn”的按鈕元素，并使用.click()方法為其添加單擊事件。當按鈕被單擊時，我們將調用一個函數，該函數將選擇所有帶有類名“box”的元素，并使用.addClass()方法向其添加一個名為“selected”的類。這個類的樣式稍后將在第7步中定義。

6. 當點擊按鈕時元素添加對應樣式

現在，當我們單擊按鈕時，所有帶有類名“box”的元素都將添加名為“selected”的類。但是，我們目前還沒有為此類定義任何樣式，因此我們需要在下一步中完成此操作。

7. 創建class樣式

為了讓添加了“selected”類的元素看起來與其他元素不同，我們將為此類定義一些CSS樣式。以下是我們將在樣式標簽中添加的CSS代碼：

```css

.selected {

background-color: f00;

color: fff;

}

```

我們使用“.selected”類選擇器來選擇所有具有“selected”類的元素，并將背景顏色設置為紅色，顏色設置為白色。

8. 點擊按鈕預覽效果如圖

最后，我們可以再次在瀏覽器中打開HTML文件，點擊“Change Style”按鈕，預覽效果如下圖所示：

![alt text]( "jQuery Change Element Style Preview")

現在，所有帶有類名“box”的元素都將變成紅色背景和白色文本。重要的是，我們只需單擊一個按鈕，就可以同時更改多個元素的樣式！

結論

在本文中，我們學習了如何使用jQuery來更改多個元素的樣式。我們創建了一個包含四個帶有類名“box”的元素和一個標記為“Change Style”的按鈕的HTML文件，并使用jQuery為該按鈕創建了一個單擊事件。當按鈕被單擊時，我們將為所有帶有類名“box”的元素添加一個名為“selected”的類，這個類的樣式定義為紅色背景和白色文本。