jQuery 中的 .addClass() 方法可用于為匹配的元素添加一個或多個 CSS 類。常常使用 addClass() 方法修改頁面元素的樣式,使其更加動態和交互性。該方法可以接受一個或多個參數,參數之間可以用空格分隔。
$("button").click(function(){
$("p").addClass("highlight");
});
上述代碼將為所有p
元素添加 "highlight" 類,當用戶點擊按鈕時將執行該函數。在 CSS 文件中,我們可以定義該類的樣式:
.highlight {
background-color: yellow;
}
使用 addClass() 可以實現動態修改樣式。例如,可以在用戶輸入錯誤內容時,動態為表單添加紅色邊框:
$("form input[type='text']").addClass("error");
此外,addClass() 方法還可以接受一個函數作為參數,使用該函數來動態計算要添加的類名。該函數使用兩個參數:元素的索引位置和原類名。例如:
$( "li" ).addClass(function( index ) {
return "item-" + index;
});
以上代碼將為li
元素添加類似 "item-0"、 "item-1"、 "item-2" 的類名,每個元素的類名與其在列表中的位置有關。