jquery點擊子元素增加樣式

如何用jQuery來點擊子元素並增加樣式

jQuery是一種流行的JavaScript庫，允許以一種改善程式碼簡潔度和可讀性的方式編寫JavaScript程式碼。 jQuery擁有一系列方便的DOM操作函數，讓在頁面上處理元素變得更加容易。在這篇文章中，我將會展示如何使用jQuery來點擊子元素並增加樣式。

步驟1: 引入jQuery

在你的HTML檔案中加入jQuery函式庫。你可以從官方網站下載它，也可以在你的HTML檔案中直接連接到 jQuery的CDN。這裡以CDN為例：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

步驟2: 撰寫HTML和CSS程式碼

準備一個帶有多個子元素的HTML頁面，這些子元素將會被點選。同時，在CSS中設定樣式，以便區分點擊之後的樣式變化。例如：

<div id="parent">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

.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中文網其他相關文章！