词雅网实例详解jq指定添加更改移除class的方法
本篇文章让我们学习使用jQuery对class进行指定、添加、更改、移除等操作的方法。
什么是class
首先让我们从“class”的基础知识说起吧！
“class”是可以在 HTML 中指定的属性之一，它通常用于通过给出任意类名称来更改 CSS 的样式。
示例：
<div> <p class="text-one">文本1</p> <p class="text-two">文本2</p> <p class="text-three">文本3</p> </div>
“p”标签属性中赋予“class=”的字符串为“类名”，可以使用该类名从CSS更改样式。
这样的类名也可以通过jQuery来操作，在本文中，我们将详细解释各种方法。
jq指定获取class
现在开始让我们使用jQuery来操作“class”吧！
首先需要了解操作类所必需的“指定/获取类”。
jQuery有一个非常灵活方便的选择器规范功能，因此使用它可以很容易地实现。
示例：
<body>
<p class="text-one">文本1</p>
<script>
var result = $('.text-one');
console.log( result[0] );
</script>
</body>执行结果
<p class="text-one">文本1</p>
在此示例中可以看到jQuery选择器是使用赋予p标签的类名以“$('.text-one')”的形式指定的。
另外你还可以指定一个类，使用“css()”来操作样式！
var result = $('.text-one').css( 'color', 'red' );通过这样写CSS被应用于p标签，如下图：
jq添加class
在jQuery中也可以通过使用“addClass()”方法向被选元素添加一个或多个类名。
例如有CSS将文本颜色设置为“红色”，如下所示：
.text-red {
color: red;
}我们使用jQuery将此处创建的CSS“.text-red”添加到HTML！
要添加它只需在前面介绍的“addClass()”中指定要添加的CSS，因此非常简单。
请参阅下面的示例：
<body>
<p class="text-one">文本1</p>
<script>
var result = $('.text-one').addClass('text-red');
console.log( result[0] );
</script>
</body>执行结果
<p class="text-one text-red">文本1</p>
在此示例中通过在 jQuery 选择器中指定 p 标签的类名 "text-one" 然后使用"addClass('text-red')"来添加另一个类。
通过结果可以看到两个类名都出现在了p标签中。
jq移除class
既然已经学习了如何指定和添加class，那么让我们也学习一下如何通过jQuery移除class吧！
要移除一个class需要使用“removeClass()”，就像 addClass() 一样，只需指定要移除的类名。
示例：
<body>
<p class="text-one text-red">文本1</p>
<script>
var result = $('.text-one').removeClass('text-red');
console.log( result[0] );
</script>
</body>执行结果
<p class="text-one">文本1</p>
在此示例中可以看到一个p标签具有两个类名“text-one text-red”。
从执行结果可以看出“text-red”的类名已经通过“removeClass('text-red')”删除掉了。
jq检查class是否存在
现在我们已经了解了使用jQuery操作class的基础知识，下面让我们来看一下如何使用“hasClass()”来检查被选元素是否包含指定的类名称。
hasClass()方法使用简单，只需将要检查的类名指定为 hasClass() 的参数即可。
<body>
<p class="text-one text-red">文本1</p>
<script>
var check = $('p').hasClass('text-red');
console.log( check );
</script>
</body>执行结果
true
在这个例子中，我们可以看到p标签有两个类名：“text-one text-red” 。
通过在jQuery中指定p标签并编写 "hasClass('text-red')"，可以检查p标签的类名中是否存在 "text-red" 。
可以得到“true/false”作为返回值，如果查看执行结果，可以看到输出的是true，因为它存在于p标签中。
jq更改class
接下来我们来看下如果在实际编程中想改class类名怎么办？
在这种情况下需要使用上面已经学习的jQuery知识进行操作，下面我们来看下具体例子：
<body>
<p class="text-one text-red">文本1</p>
<script>
var check = $('p').hasClass('text-red');
if( check ) {
$('p').removeClass('text-red').addClass('text-blue');
console.log( $('p')[0] );
}
</script>
</body>执行结果
<p class="text-one text-blue">文本1</p>
在此示例中我们尝试将赋予p标签的类名称“text-red”更改为“text-blue” 。
作为更改的过程，首先检查类名“text-red”是否存在，如果存在，则执行更改过程。
可以用目前已经学过的“removeClass()”删除对应的类，然后用“addClass()”给出要更改的类名。
这样可以通过连续执行删除和添加处理来更改为任何类名。
如果你想重复添加和删除相同的类名，有一个更方便的方法叫做“toggleClass()”。
$('p').click(function() {
$(this).toggleClass('text-red');
})本例中如果类名“text-red”存在则删除，不存在则添加。
因此，每次单击字符串时，都会重复添加和删除“text-red”类。
通过应用此功能，可以轻松写出在单击或鼠标悬停时显示菜单的动画。
jq获取多个class
到目前为止，我们一直在对一个类进行各种操作。
所以，我们接下来看下jQuery同时获取和操作多个类是如何实现的！
<body>
<p class="text-one">文本1</p>
<p class="text-two">文本2</p>
<p class="text-three">文本3</p>
<script>
var result = $('.text-one, .text-two, .text-three').css('font-size', '45px');
console.log( result );
</script>
</body>执行结果
[p.text-one, p.text-two, p.text-three......]
在这个例子中，有三个p标签，每个标签的类名都是"text-one text-two text-three" 。
只需将这三个类名指定为 jQuery 选择器，就可以同时执行多个进程，如上面的代码示例所示。
上例中，同时获取了3个p标签，使用“css()”将字体大小改为45px。
另一种常用的方法是使用“属性过滤器”。可以使用它来提取类名包含任意字符串的所有 HTML 元素。
示例：
var result = $('p[class*="text"]').css('font-size', '45px');
console.log( result );执行结果
[p.text-one, p.text-two, p.text-three......]
在此示例中，通过使用属性过滤器并编写"p[class*="text"]" ，可以提取所有在p标签的类名中包含 "text" 的 HTML 元素......
属性过滤器的应用范围很广，可以实现高度灵活的类操作，比如使用“前向/后向匹配” 。
在后续的文章中，我们将详解如何使用属性过滤器！
本文来源：词雅网
本文地址：https://www.ciyawang.com/jq-class-91.html
本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。
相关推荐
-
jQuery淡入：提高网站用户体验的利器
在现代Web设计中，用户体验是至关重要的一环。一个好的用户体验能够吸引许多用户，使他们留在你的网站上，而一个糟糕的用户体验则可能导致用户迅速离开你的网站。在这个背景下，jQuery淡入成为了提高网站用...
-
使用jQuery Parents方法和Parent来操作DOM元素
在前端开发中，操作DOM元素是一个非常重要的任务。而jQuery是一个非常常用的JavaScript库，它提供了很多方法来方便地操作DOM元素。而其中，Parents方法和Parent方法就是两个非常...
-
如何使用jQuery获取textarea的值
在前端开发中，获取用户输入的数据是非常重要的。而textarea是一种常见的文本输入框，本文将介绍如何使用jQuery获取textarea的值。1. 获取textarea的值要获取textarea的值...
-
【jQuery入门】总结如何用replace()替换字符串
replace()方法是什么？ 下面就从replace方法的基础知识开始学习吧！replace方法是一种允许您用任何字符替换字符串的方法。 它对一般的字...
-
获取jquery文本表单的输入事件
编写一个示例代码，在jquery的“on”方法中使用“touchmove”获取文本表单的输入事件。获取文本表单的输入事件要获取文本表单的输入事件，请在“on”方法中指定“input”。$('指...
-
详解如何在jQuery选择器中使用正则表达式和属性过滤器
这一次，我们来学习使用正则表达式和属性过滤器来指定 jQuery 选择器的方法！比正则表达式更简单的属性过滤器是什么？让我们从学习属性过滤器开始，它比正则表达式更容易指定选择器！首先，jQuery 选...
-
使用jQuery在指定的html标签中插入html代码
编写一个示例代码，使用jquery的wrapInner()方法在指定的html标签插入插入html代码。在指定的html标签中插入html代码wrapInner()方法可以在指定的html标签插入插入...
-
详解如何使用jQuery的submit()方法提交表单
这次，我们来学习一下“submit()”方法，它可以让你从jQuery中操作Form元素的提交！什么是submit()那么我们先从“submit()”方法的基础知识说起吧！“submit()”是一种允...
-
详解jQuery使用contents()方法获取指定元素的子元素和文本节点
这一次，让我们通过一个示例来了解如何使用 jQuery 的“contents()”方法。 如果只是简单的“选择子元素”，可以在children()方法中使用，但在选择“不...
-
详解jQuery使用.show()/.fadeIn()淡入指定元素
这一次，让我们通过一个示例来解释如何使用jQuery的“.show( )/.fadeIn()”。.show()/.fadeIn() 的作用是什么？.show()/.fadeIn()可以“淡入显示dis...
