首頁 > jquery > jquery的选择器有哪几种

jquery的选择器有哪几种


在 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')` 选取所有复选框等。

相关资讯
最新资讯
IT兄弟 IT兄弟-是一家分享开发中常遇到的技术问题解决方案,也是站长们记录技术分享文章的平台。 琼ICP备2022012332号