jQuery 或选择器 - CSS

jQuery 是一个强大的 JavaScript 库，用于操作 HTML 文档，同时也支持数百种常见的事件和效果。在 jQuery 中，选择器用于通过 HTML 元素的 id、class、属性等信息，帮助我们方便地查找、选择和操作页面元素。本篇文章将带你了解 jQuery 和 CSS 选择器的使用方法。

jQuery 的基本语法

jQuery 的基本语法是：$(selector).action()。其中，$ 符号定义了 jQuery，selector 是选择器，而 action 是 jQuery 对选择器执行的动作，如添加、删除、修改等操作。例如，以下代码将隐藏 id="demo" 的元素：

$("#demo").hide();

常见选择器

基本选择器

根据 HTML 元素的名称、id 和 class 等信息，我们可以使用下面这些基本选择器：

• $("element")：选取所有指定元素；
• $("#id")：选取指定 ID 的元素；
• $(".class")：选取指定 class 的元素。

例如，以下代码将选中所有 p 元素：

$("p")

层级选择器

层级选择器可以根据元素之间的关系，选取到指定元素。常见的层级选择器有：

• $("parent > child")：选取指定父元素下的直接子元素；
• $("ancestor descendant")：选取指定祖先元素内所有后代元素。

例如，以下代码将选中 div 元素中所有 p 元素：

$("div p")

过滤选择器

过滤选择器可以根据元素的属性、内容、状态等信息，选取到特定的元素。常见的过滤选择器有：

• $("selector:first")：选取指定选择器的第一个元素；
• $("selector:last")：选取指定选择器的最后一个元素；
• $("selector:even")：选取指定选择器的偶数元素；
• $("selector:odd")：选取指定选择器的奇数元素；
• $("selector:eq(index)")：选取指定选择器中索引为 index 的元素；
• $("selector:contains(text)")：选取指定选择器中包含特定文本的元素。

例如，以下代码将选中所有包含 "test" 文本的 p 元素：

$("p:contains('test')")

CSS 选择器

除了 jQuery 选择器外，我们还可以使用 CSS 选择器来选取元素。CSS 选择器基于元素的属性、内容、状态等信息，用于指定需要选中的 HTML 元素。以下是一些常见的 CSS 选择器：

• element：选取所有指定元素名称的 HTML 元素；
• .class：选取指定 CSS 类的元素；
• #id：选取指定 ID 的 HTML 元素；
• [attribute=value]：选取指定属性和值匹配的 HTML 元素；
• :not(selector)：选取指定选择器以外的所有元素；
• selector1, selector2, ...：选取多个选择器匹配到的元素。

例如，以下代码将选中所有 class 为 "test" 的 p 元素：

$("p.test")

总结

本篇文章简单介绍了 jQuery 和 CSS 选择器的使用方法。选择器是页面操作的基础，掌握好选择器的使用对于开发者来说非常重要。希望本文能对你有所帮助，感谢阅读！