JQuery 选择器大全

JQuery 选择器是使用 JQuery 操作 HTML 元素的核心技巧之一。本文为大家提供 JQuery 选择器的全面详解，包含了常用的选择器以及一些不常用但很实用的选择器，希望能帮助各位更好地掌握选择器的用法。

1. 基本选择器

1.1 元素选择器

元素选择器是指按照 HTML 元素的标签名来选择元素。该选择器可以用标签名、类名、ID 以及属性来选取元素。例如：

// 选择所有 <p> 元素
$('p')

// 选择类名为 "example" 的元素
$('.example')

// 选择 ID 为 "myId" 的元素
$('#myId')

// 选择所有属性名为 data-name 的元素
$('[data-name]')

1.2 属性选择器

属性选择器是按照元素的属性值来选择元素。例如：

// 选择所有 href 属性为 "https://www.example.com" 的 <a> 元素
$('a[href="https://www.example.com"]')

// 选择所有 class 包含 "example" 的 <p> 元素
$('p[class*="example"]')

1.3 类选择器

类选择器是按照元素的 class 值来选择元素。例如：

// 选择所有类名为 "example" 的元素
$('.example')

// 选择同时具有 "red" 和 "test" 类名的元素
$('.red.test')

1.4 ID选择器

ID选择器是按照元素的 ID 值来选择元素。例如：

// 选择 ID 为 "myId" 的元素
$('#myId')

2. 层次选择器

层次选择器是按照元素在 HTML 层次结构中的关系来选择元素。例如：

2.1 后代选择器

后代选择器选择指定元素后代的所有元素。例如：

// 选择所有 <ul> 元素下的 <li> 元素
$('ul li')

2.2 子选择器

子选择器选择指定元素的直接子元素。例如：

// 选择所有 <ul> 元素的直接子元素 <li> 元素
$('ul > li')

2.3 兄弟选择器

兄弟选择器选择指定元素的相邻兄弟元素，不包括自身。例如：

// 选择 ID 为 "myId" 的元素后面的第一个 <p> 元素
$('#myId + p')

2.4 同胞选择器

同胞选择器选择指定元素的所有兄弟元素，不包括自身。例如：

// 选择 ID 为 "myId" 的元素的所有同级 <p> 元素
$('#myId ~ p')

3. 过滤选择器

过滤选择器是按照一定条件过滤元素。例如：

3.1 :first

选择第一个元素。例如：

// 选择第一个 <p> 元素
$('p:first')

3.2 :last

选择最后一个元素。例如：

// 选择最后一个 <p> 元素
$('p:last')

3.3 :even

选择偶数位置的元素。例如：

// 选择所有偶数位置的 <li> 元素
$('li:even')

3.4 :odd

选择奇数位置的元素。例如：

// 选择所有奇数位置的 <li> 元素
$('li:odd')

4. 表单选择器

表单选择器是按照表单元素的特定属性来选择元素。例如：

4.1 :input

选择所有输入元素，包括 input、textarea、select 以及 button 元素。例如：

// 选择所有输入元素
$(':input')

4.2 :text

选择所有文本输入框。例如：

// 选择所有文本输入框
$(':text')

示例

示例 1

HTML 代码：

<div id="container">
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
    <li class="item">Item 4</li>
  </ul>
</div>

我们想通过选择器获取第二个 li 元素并且把其文本颜色设置为红色。可以使用表单选择器 :eq 和样式属性选择器 css，代码如下：

$('#container li:eq(1)').css('color', 'red');

示例 2