如何用jQuery來點擊子元素並增加樣式
jQuery是一種流行的JavaScript庫，允許以一種改善程式碼簡潔度和可讀性的方式編寫JavaScript程式碼。 jQuery擁有一系列方便的DOM操作函數，讓在頁面上處理元素變得更加容易。在這篇文章中，我將會展示如何使用jQuery來點擊子元素並增加樣式。
步驟1: 引入jQuery
在你的HTML檔案中加入jQuery函式庫。你可以從官方網站下載它，也可以在你的HTML檔案中直接連接到 jQuery的CDN。這裡以CDN為例：
步驟2: 撰寫HTML和CSS程式碼
準備一個帶有多個子元素的HTML頁面，這些子元素將會被點選。同時，在CSS中設定樣式，以便區分點擊之後的樣式變化。例如：
子元素1子元素2子元素3
.child { padding: 10px; border: 1px solid black; cursor: pointer; } .clicked { background-color: yellow; }
在這裡，我們設定了三個子元素，當它們被點擊後將會更改它們的背景顏色。
步驟3: 寫jQuery程式碼
我們需要寫一些程式碼來處理當子元素被點擊時要發生的事情。首先，我們需要選取所有子元素。使用jQuery的子元素選擇器，我們可以輕鬆地選取父元素下的所有子元素：
var children = $('#parent > .child');
接下來，我們需要為每個子元素新增點擊事件監聽器。我們可以使用jQuery的each()函數來實現此操作。這個函數接受一個回呼函數，該函數將被應用於每個元素。在這個回呼函數中，我們將新增一個點擊事件監聽器來增加子元素的樣式：
children.each(function() { $(this).on('click', function() { $(this).addClass('clicked'); }); });
在這裡，我們使用了jQuery的on()函數來新增一個點選事件監聽器。這個函數接受兩個參數。第一個是事件類型，我們使用了「click」。第二個參數是回調函數，在點擊回應時被執行。在這個回呼函數中，我們在子元素上呼叫addClass()函數，將「clicked」類別加入子元素中。我們定義了一個「clicked」類，它將改變子元素的背景顏色。
完整的jQuery程式碼如下：
$(document).ready(function() { var children = $('#parent > .child'); children.each(function() { $(this).on('click', function() { $(this).addClass('clicked'); }); }); });
最後，我們將所有的程式碼放在$(document).ready()函數中，在DOM被完全載入之後再執行它們。
結論
在本文中，我們已經學習如何使用jQuery來點擊子元素並增加樣式。我們需要選取所有的子元素，然後為每個子元素新增點選事件監聽器。在回調函數中，我們可以使用addClass()函數來將一個類別加入子元素中，這樣我們就可以為我們的子元素添加各種樣式了。如果你想要增加子元素的其它屬性，也可以在點擊事件監聽器中學習與實作。
以上是jquery點擊子元素增加樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
