什么是类选择器和属性选择器？
在CSS中，类选择器和属性选择器分别用于选择具有相同类名或特定属性值的元素。
类选择器使用“.”符号，后跟一个类名，如下所示：
--------- - ------ ---- -
在上述示例中，.my-class是一个类选择器，它选择了所有class为“my-class”的元素，并将其文本颜色设置为红色。
属性选择器使用方括号“[]”，并指定一个属性名和一个可选的属性值，如下所示：
------------------ - ------- --- ----- ------ -
在上述示例中，[type="text"]是一个属性选择器，它选择了所有<input>元素，且其类型属性等于“text”。该选择器将这些元素的边框设置为黑色实线。
jQuery 如何结合类选择器和属性选择器？
jQuery 是一款常用的JavaScript 库，可以简化 DOM 操作。jQuery 提供了许多方法来选择元素，其中包括类选择器和属性选择器。
类选择器
要使用类选择器，可以使用 $符号后跟一个字符串参数，其中包含类选择器名称，如下所示：
--------------------------- -------
在上述示例中，$(".my-class")选择了所有class为“my-class”的元素，并将它们的文本颜色设置为红色。
属性选择器
要使用属性选择器，可以在 $符号后使用方括号，其中包含属性选择器名称和可选的属性值，如下所示：
------------------------------------- ---- ----- --------
在上述示例中，$("input[type='text']")选择了所有type属性等于“text”的<input>元素，并将它们的边框设置为黑色实线。
示例代码
以下是一个结合类选择器和属性选择器与 jQuery 的示例代码：
--------- -----
------
------
------------- ------------
------- -----------------------------------------------------------
-------
--------- -
------ ----
-
------------------ -
------- --- ----- ------
-
--------
-------
------
---------- ---------
-- ------------------------------
----------------
------
------ ---------------------------
------ ----------- ------------- ----------------
-------
--------
---------------------------- -
--------------------------------- --------
-----------------------------------
---
---------
-------
-------在上述示例中，.my-class选择器将第一个<p>元素的文本设置为红色。属性选择器 input[type="text"] 选择了表单中的文本框，并将它们的边框设置为黑色实线。
在jQuery代码块中，.my-class选择器被用来设置文本的粗体字。input[type='text']选择器则使用 .val()方法将文本框的值设置为“默认值”。
总结
通过结合类选择器和属性选择器与 jQuery，可以更方便地对 DOM 元素进行选择和操作。这些选择器提供了丰富的功能，使得开发者可以轻松地对指定的元素进行样式和行为的修改。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10767