jQuery addClass

最新推荐文章于 2023-06-29 20:28:49 发布

cunchi4221

最新推荐文章于 2023-06-29 20:28:49 发布

阅读量320

点赞数

文章标签： javascript css html js python ViewUI

原文链接：https://www.journaldev.com/987/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 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 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方法的全部内容。

翻译自: https://www.journaldev.com/987/jquery-addclass

cunchi4221

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫