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

jQuery addClass相关推荐

jQuery addClass，removeClass，class属性增删
效果图,添加.移除class属性上代码: <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
jQuery addClass() 方法
addClass()方法可以向被选元素添加一个或多个类. 1.添加一个类语法格式: addClass("className"); 示例: <style>.one {w ...
js jquery操作的方面xml dom html dom css dom
1 xml dom 类似xml document 操作 --文档处理 js createTextNode createElementNode ... jq ...
jQuery - 获取并设置 CSS 类
通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元 ...
jQuery - 获取并设置 CSS 类、尺寸
jQuery - 获取并设置 CSS 类通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 拥有若干进行 CSS 操作的方法: addClass() - 向被选元素添加一个或多 ...
jQuery 实例教程
jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...
jquery 判断控件css样式,jQuery获取并设置CSS类
jQuery获取并设置CSS类通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: • add ...
jquery访问css类,jQuery - 获取并设置 CSS 类
2017-09-16 摘抄自W3school-jQuery - 获取并设置 CSS 类希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自己额外的收获. 通过 jQuery,可以很容易地对 CS ...
jquery教程_jQuery教程
jquery教程 I have written a lot of jQuery tutorial articles. This is an index post for all the jQuery ...

jQuery addClass

jQuery addClass (jQuery addClass)

斑马条纹效果的jQuery addClass示例 (jQuery addClass example for zebra stripes effect)

jQuery addClass相关推荐

最新文章

热门文章