###
jQuery 选择单个或多个元素的函数
在
jQuery 中，
选择单个或多个元素的核心函数是 `$()` 函数。这个函数接受一个
选择器字符串作为参数，并返回一个
包含匹配元素的
jQuery 对象[^1]。通过这个函数，可以使用 CSS
选择器语法来定位 HTML 元素。
#### 基本
选择器
基本
选择器用于
选择单个或多个元素，常见的基本
选择器包括：
- `$("element")`：
选择所有指定标签名的元素。例如，`$("div")` 会
选择所有的 `<div>` 元素。
- `$(".class")`：
选择所有具有指定类名的元素。例如，`$(".myClass")` 会
选择所有具有 `myClass` 类的元素。
- `$("#id")`：
选择具有指定 ID 的单个元素。例如，`$("#myId")` 会
选择 ID 为 `myId` 的元素。
#### 层次
选择器
层次
选择器允许根据 DOM 树的结构
选择元素：
- `$("ancestor descendant")`：
选择某个祖先元素下的所有后代元素。例如，`$("div span")` 会
选择所有位于 `<div>` 内部的 `<span>` 元素。
- `$("parent > child")`：
选择某个父元素下的直接子元素。例如，`$("ul > li")` 会
选择 `<ul>` 下的所有直接 `<li>` 子元素。
- `$("prev + next")`：
选择紧接在另一个元素后的兄弟元素。例如，`$("h1 + p")` 会
选择紧跟在 `<h1>` 后的第一个 `<p>` 元素。
- `$("prev ~ siblings")`：
选择位于另一个元素之后的所有兄弟元素。例如，`$("h1 ~ p")` 会
选择所有位于 `<h1>` 后的 `<p>` 兄弟元素。
#### 属性
选择器
属性
选择器可以根据元素的属性及其值进行
选择：
- `[attribute]`：
选择具有指定属性的元素。例如，`$("[href]")` 会
选择所有具有 `href` 属性的元素。
- `[attribute=value]`：
选择属性值等于指定值的元素。例如，`$("[href='https://example.com']")` 会
选择 `href` 属性值为 `https://example.com` 的元素。
- `[attribute^=value]`：
选择属性值以指定值
开头的元素。例如，`$("[href^='https']")` 会
选择 `href` 属性值以 `https`
开头的元素。
- `[attribute$=value]`：
选择属性值以指定值
结尾的元素。例如，`$("[href$='.pdf']")` 会
选择 `href` 属性值以 `.pdf`
结尾的元素。
- `[attribute*=value]`：
选择属性值
包含指定值的元素。例如，`$("[href*='example']")` 会
选择 `href` 属性值中
包含 `example` 的元素。
#### 过滤
选择器
过滤
选择器允许进一步缩小
选择范围：
- `:first`：
选择第一个匹配的元素。例如，`$("div:first")` 会
选择第一个 `<div>` 元素。
- `:last`：
选择最后一个匹配的元素。例如，`$("div:last")` 会
选择最后一个 `<div>` 元素。
- `:even`：
选择索引为偶数的元素（索引从 0 开始）。例如，`$("tr:even")` 会
选择表格中索引为偶数的行。
- `:odd`：
选择索引为奇数的元素。例如，`$("tr:odd")` 会
选择表格中索引为奇数的行。
- `:eq(index)`：
选择索引等于指定值的元素。例如，`$("li:eq(2)")` 会
选择第三个 `<li>` 元素。
- `:visible`：
选择当前可见的元素。例如，`$("p:visible")` 会
选择所有可见的 `<p>` 元素。
- `:hidden`：
选择当前隐藏的元素。例如，`$("p:hidden")` 会
选择所有隐藏的 `<p>` 元素。
#### 示例代码
以下是一个简单的示例，展示如何使用
jQuery 选择器
选择单个或多个元素：
```javascript
//
选择所有 <div> 元素
var allDivs = $("div");
//
选择 ID 为 "main" 的单个元素
var mainElement = $("#main");
//
选择所有具有 class "highlight" 的元素
var highlightedElements = $(".highlight");
//
选择所有 <a> 元素且其 href 属性以 "https"
开头
var secureLinks = $("[href^='https']");
//
选择第一个 <li> 元素
var firstListItem = $("li:first");
```
### 注意事项
- `$()` 函数返回的是一个
jQuery 对象，而不是原生的 DOM 元素集合。因此，需要调用
jQuery 方法来操作这些元素。
- 如果没有找到匹配的元素，
jQuery 对象将为空，但不会抛出错误。
CSS与jQuery选择器解析
本文解析了CSS及jQuery中几种特殊的选择器用法，包括以特定字符开头 (^=)、结尾 ($=) 和包含指定内容 (~=) 的属性选择器。通过这些选择器可以更精确地定位页面元素。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
