首页 > 编程笔记 > JavaScript笔记 阅读：2

jQuery .class类名选择器的用法（附带实例）

类名选择器（.class）通过元素拥有的 CSS 类的名称查找匹配的 DOM 元素。

在一个页面中，一个元素可以有多个 CSS 类，一个 CSS 类又可以匹配多个元素，如果元素中有一个匹配的 CSS 类的名称，就可以被类名选择器匹配到。

类名选择器很好理解，在大学的时候大部分人应该都选过课，可以把 CSS 类名理解为课程名称，把元素理解为学生，学生可以选择多门课程，而一门课程又可以被多名学生所选择。CSS 类与元素的关系既可以是多对多的关系，也可以是一对多或多对一的关系。

简单地说，类名选择器就是以元素具有的 CSS 类名查找匹配的元素。

类名选择器的使用方法如下： 
$(".class");
其中，class 为要查找元素具有的 CSS 类名。例如，要查找具有 CSS 类名 word_orange 的元素，可以使用下面的 jQuery 代码： 
$(".word_orange");
等效的 JavaScript 代码为： 
getElementsByClassName("word_orange");

【实例】在页面中，添加两个 <div> 标记，并为其中的一个标记设置 CSS 类，然后通过 jQuery 的类名选择器获取设置了 CSS 类的 <div> 标记，并设置其 CSS 样式。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。 
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加两个 <div> 标记，其中一个设置 CSS 类 myClass，另一个不设置 CSS 类，代码如下： 
<div class="myClass">注意观察我的样式</div>
<div>我的样式是默认的</div>
这里添加两个 <div> 标记是为了对比效果，默认的背景颜色都是蓝色，文字颜色都是黑色。

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现按 CSS 类名获取 DOM 元素，并更改其 CSS 样式（这里更改了背景颜色和文字颜色），具体代码如下： 
<script type="text/javascript">
$(document).ready(function(){
    var myClass = $(".myClass"); // 获取DOM元素
    myClass.css("background-color","#C50210"); // 为获取的DOM元素设置背景颜色
    myClass.css("color","#FFF"); // 为获取的DOM元素设置文字颜色
});
</script>
在上面的代码中，只为其中一个 <div> 标记设置了 CSS 类（类的名称为 myClass），但是由于程序中并没有名为 myClass 的 CSS 类，所以这个类是没有任何属性的。

类名选择器将返回一个名为 myClass 的 jQuery 包装集，利用 css() 方法可以为对应的 <div> 元素设置 CSS 属性值，这里我们将元素的背景颜色设置为深红色，文字颜色设置为白色。

注意，类名选择器也可能获取一组 jQuery 包装集，因为多个元素可以拥有同一个 CSS 类。

在浏览器中运行本实例，将显示下图所示的页面：


图 1 通过类名选择器选择元素并更改样式

其中，页面左侧的 DIV 为更改样式后的效果，右侧的 DIV 为默认的样式。由于使用了 $(document).ready() 方法，所以选择元素并更改样式的代码在 DOM 元素加载就绪时就已经自动执行完毕了。

相关文章