JQuery中Class选择器怎么用(htmlclass选择器)

这篇文章距离上次修改已过277天，其中的内容可能已经有所变动。

在jQuery中，Class选择器是通过元素的class属性中的一个类名来选择元素。如果一个元素有多个类，你可以选择任何一个来获取这个元素。

基本语法如下：




$(".classname")

这里的.classname是你要选择的类的名称。

解决方案和实例代码：




<div class="myClass">Div 1</div>
<div class="myClass">Div 2</div>
<div class="myClass">Div 3</div>




$(document).ready(function(){
  $(".myClass").css("color", "red");
});

在上面的例子中，所有具有myClass类的div元素的文本颜色都会变成红色。




<div class="class1 class2">Div 1</div>
<div class="class1">Div 2</div>
<div class="class2">Div 3</div>




$(document).ready(function(){
  $(".class2").css("color", "red");
});

在上面的例子中，只有具有class2类的第一个div元素的文本颜色会变成红色，因为class2不是它的唯一类。




<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>




$(document).ready(function(){
  $(".parent .child").css("color", "red");
});

在上面的例子中，div元素中具有child类的子元素的文本颜色会变成红色。这是因为选择器是在空格分隔的两个类名之后使用的，所以它只选择直接的子元素。

注意：在所有这些例子中，jQuery库必须在使用任何jQuery代码之前被包含在页面中。这可以通过在<head>标签中添加以下行来实现：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>