jquery class選擇器，jQuery addClass

2023-11-19 阅读 19 评论 0

摘要：jQuery addClass function is used to add one or more specified classes to the matched DOM elements. jQuery addClass函數用于向匹配的DOM元素添加一個或多個指定的類。 jQuery addClass (jQuery addClass) Here is a simple example showing usage of jQuery addClass()

jQuery addClass function is used to add one or more specified classes to the matched DOM elements.

jQuery addClass函數用于向匹配的DOM元素添加一個或多個指定的類。

jQuery addClass (jQuery addClass)

Here is a simple example showing usage of jQuery addClass() method. jQuery version used in example is 3.2.1.

這是一個簡單的示例，顯示jQuery addClass（）方法的用法。示例中使用的jQuery版本是3.2.1 。

<html>
<head>
<!-- import jQuery library -->
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<!-- jQuery functions for addClass example -->
<script type="text/javascript">$(function() {$("p:last").addClass("selected highlight");});$(function() {$("p:first").addClass("highlight");});
</script>
<style>
p {margin: 10px;font-size: 16px;
}.selected {color: maroon;
}.highlight {background: yellow;
}
</style>
</head><body><p>Pankaj</p><p>Kumar</p><p>Bye</p>
</body></html>

In jQuery addClass function, we are adding classes “selected” and “highlight” to the element p:last.

jquery class選擇器、在jQuery addClass函數中，我們將“ selected”和“ highlight”類添加到元素p:last 。

Similarly we are adding class “highlight” to p:first. So when page loads, these classes are applied to the <p> first and last child and html is formatted.

同樣，我們在p:first中添加了“ highlight”類。因此，在頁面加載時，這些類將應用于<p>的第一個和最后一個孩子，并且html會被格式化。

The below image shows the jQuery addClass example HTML page output in browser.

下圖顯示了在瀏覽器中輸出的jQuery addClass示例HTML頁面。

斑馬條紋效果的jQuery addClass示例 (jQuery addClass example for zebra stripes effect)

We are using jQuery addClass() method to create zebra stripes effect in HTML table. The html code is given below.

jquery獲取class的值？我們使用jQuery addClass（）方法在HTML表中創建斑馬條紋效果。 html代碼如下。

<html>
<head>
<title>jQuery addClass Example - Table Zebra Stripes</title>
</head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<!-- jQuery script to check if row is even, addClass is used to add CSS class to the row  -->
<script type="text/javascript">$(function() {$("table tr:nth-child(even)").addClass("striped");});</script>
<!-- Below CSS is used for configuring table display -->
<style type="text/css">
body,td {font-size: 12px;
}table {background-color: black;border: 1px black solid;border-collapse: collapse;
}th {border: 1px outset silver;background-color: blue;color: white;
}tr {border: 1px outset silver;background-color: white;margin: 1px;
}tr.striped {border: 1px outset silver;background-color: yellow;
}td {padding: 1px 10px;
}
</style><body><table><tr><th>ID</th><th>Name</th><th>Role</th></tr><tr><td>1</td><td>Pankaj</td><td>CEO</td></tr><tr><td>2</td><td>Lisa</td><td>Manager</td></tr><tr><td>3</td><td>Robin</td><td>Support</td></tr><tr><td>4</td><td>David</td><td>Editor</td></tr></table>
</body>
</html>

Below image shows the jQuery addClass zebra effect output in browser.

下圖顯示了瀏覽器中的jQuery addClass斑馬效果輸出。

In above html, we are adding “striped” class to every even child of the table row using condition table tr:nth-child(even) dynamically. That’s all about jQuery addClass method.

在上面的html中，我們使用條件table tr:nth-child(even)動態地向表行的每個偶數子級添加“ striped”類。這就是有關jQuery addClass方法的全部內容。