本文共 1791 字，大约阅读时间需要 5 分钟。

jQuery选择器详解

jQuery的选择器与CSS选择器非常相似，能够帮助开发者快速定位和操作DOM元素。本文将从基础到高级选项，详细介绍jQuery选择器的使用方法。

1. 基本选择器

jQuery的基本选择器与CSS选择器一致，常见的有标签选择器、id选择器、类选择器等。以下是基本选择器的示例：

通过jQuery对象符号 $() 可以对元素进行操作。以下是常用的选择方式：

• 标签选择器：$('button')
• ID选择器：$('#btn')
• 类选择器：.cls
• 组合选择器：.cls#btn2 或 .cls, #btn

此外，通配符选择器可以使用 '*' 获取所有元素。

2. 层级选择器

层级选择器可以通过CSS中的层级关系来实现。在jQuery中，可以使用类似 parent() 和 child() 的方式来定位元素。

通过以下选择器可以实现层级定位：

• 父级下所有 div：$('.parent1 div')
• 父级下的直接子元素：$('.parent1>div')
• 具体子元素的相邻或兄弟元素：$('#child1+div') 或 $('#child1~div')

3. 过滤选择器

过滤选择器可以进一步细化选择条件，常见的有索引过滤、内容过滤、可见性过滤等。

3.1 索引过滤

• :first：获取第一个元素
• :last：获取最后一个元素
• :even：获取索引为偶数的元素
• :odd：获取索引为奇数的元素
• :eq(n)：获取第n个元素（索引从0开始）
• :gt(k)：获取索引大于k的元素
• :lt(k)：获取索引小于k的元素
• :not()：排除匹配的元素

3.2 内容过滤

• contains()：匹配包含特定文本的元素
• empty()：匹配没有子元素或文本的元素
• parent()：匹配有子元素或文本的元素
• has()：匹配包含特定元素的父元素

3.3 可见性过滤

• :hidden：匹配不可见的元素
• :visible：匹配可见的元素

3.4 属性过滤

通过属性选择器可以对元素的属性进行筛选。例如：

选择时可以使用属性选择器：

• name 属性：$('div[name]')
• name="d1" 属性：$('div[name=d1]')
• 组合属性选择：$('div[name=d1][class=cls]')

4. 子元素过滤

对于父元素的子元素，可以使用以下选择器：

• :nth-child(n)：匹配父元素下第n个子元素
• :first-child：匹配第一个子元素
• :last-child：匹配最后一个子元素
• :only-child：匹配唯一的子元素

例如：

选择时可以使用：

• div:first-child
• div:last-child
• div:nth-child(1)
• div:only-child

5. 表单属性过滤

对于表单元素，可以使用以下属性选择器：

• :enabled：匹配可用元素
• :disabled：匹配不可用元素
• :checked：匹配选中的单选或复选按钮
• :selected：匹配选中的 <option> 元素

例如：

   
    
        
        
            CF        CSGO        LOL    
   

选择时可以使用：

• :enabled
• :disabled
• :selected
• :checked

6. 表单选择器

对于表单元素，可以使用以下表单选择器：

• :input：匹配 input、textarea、select、button 元素
• :text：匹配单行文本框
• :password：匹配密码框
• :radio：匹配单选按钮
• :checkbox：匹配复选框
• :submit：匹配提交按钮
• :image：匹配图像域
• :reset：匹配重置按钮
• :button：匹配所有按钮
• :file：匹配文件上传域

这些选择器可以帮助开发者快速定位和操作表单元素，提升用户体验。

转载地址：http://tsjv.baihongyu.com/