在 jQuery 中,主要有以下几种选择器:
**一、基本选择器**
1. 标签选择器:
- 通过 HTML 标签名来选取元素。例如 `$('p')` 会选取所有的 `<p>` 元素。
2. 类选择器:
- 根据元素的 CSS 类名进行选择。例如 `$('.myClass')` 选取所有具有 `myClass` 类的元素。
3. ID 选择器:
- 通过元素的 ID 属性来选取单个元素。例如 `$('#myId')` 选取具有 ID 为 `myId` 的元素。
4. 通用选择器:
- 选取所有元素,类似于 CSS 中的 `*`。例如 `$('*')`。
**二、层次选择器**
1. 后代选择器:
- 选取某元素的后代元素。例如 `$('#parent div')` 选取 ID 为 `parent` 的元素的所有 `<div>` 后代元素。
2. 子选择器:
- 选取某元素的直接子元素。例如 `$('#parent > span')` 选取 ID 为 `parent` 的元素的直接 `<span>` 子元素。
3. 相邻兄弟选择器:
- 选取紧接在某元素后的兄弟元素。例如 `$('#prev + #next')` 选取紧接在具有 ID `prev` 的元素后的具有 ID `next` 的元素。
4. 后续兄弟选择器:
- 选取某元素之后的所有兄弟元素。例如 `$('#prev ~ #siblings')` 选取具有 ID `prev` 的元素之后的所有具有 ID `siblings` 的兄弟元素。
**三、过滤选择器**
1. 首元素选择器:
- 选取一组元素中的第一个元素。例如 `$('li:first')` 选取所有 `<li>` 元素中的第一个。
2. 尾元素选择器:
- 选取一组元素中的最后一个元素。例如 `$('li:last')` 选取所有 `<li>` 元素中的最后一个。
3. 特定位置选择器:
- 如 `$('li:eq(2)')` 选取第 3 个 `<li>` 元素(索引从 0 开始)。
4. 奇数/偶数位置选择器:
- `$('li:odd')` 选取奇数位置的 `<li>` 元素,`$('li:even')` 选取偶数位置的 `<li>` 元素。
5. 包含特定文本选择器:
- `$('p:contains("Hello")')` 选取包含文本“Hello”的 `<p>` 元素。
6. 特定属性选择器:
- 例如 `$('div[id]')` 选取具有 `id` 属性的 `<div>` 元素。
**四、表单选择器**
1. 选取特定类型的表单元素,如:
- `$(':text')` 选取所有文本输入框。
- `$(':password')` 选取所有密码输入框。
- `$(':radio')` 选取所有单选按钮。
- `$(':checkbox')` 选取所有复选框等。