jQuery选择器问题

jQuery选择器详解

基础概念

jQuery选择器是jQuery库的核心功能之一，它允许开发者使用CSS样式的语法来选择和操作DOM元素。jQuery选择器基于已有的CSS选择器，并扩展了一些自定义选择器，使得DOM操作更加简洁高效。

主要类型及示例

1. 基本选择器

// ID选择器
$("#myElement") // 选择id为myElement的元素

// 类选择器
$(".myClass") // 选择所有class包含myClass的元素

// 元素选择器
$("div") // 选择所有div元素

// 通配符选择器
$("*") // 选择所有元素

// 多选选择器
$("div, p, .myClass") // 选择所有div、p和class为myClass的元素

2. 层次选择器

// 后代选择器
$("div p") // 选择div内所有的p元素

// 子元素选择器
$("div > p") // 选择div直接子元素中的p元素

// 相邻兄弟选择器
$("div + p") // 选择紧接在div后面的p元素

// 一般兄弟选择器
$("div ~ p") // 选择div后面所有的p兄弟元素

3. 过滤选择器

// :first
$("p:first") // 选择第一个p元素

// :last
$("p:last") // 选择最后一个p元素

// :even/:odd
$("tr:even") // 选择偶数行tr
$("tr:odd")  // 选择奇数行tr

// :eq(n)
$("li:eq(2)") // 选择第三个li元素(索引从0开始)

// :gt(n)/:lt(n)
$("li:gt(2)") // 选择索引大于2的li元素
$("li:lt(2)") // 选择索引小于2的li元素

// :not(selector)
$("input:not(:checked)") // 选择未选中的input元素

4. 内容过滤选择器

// :contains(text)
$("div:contains('hello')") // 选择包含"hello"文本的div

// :empty
$("td:empty") // 选择内容为空的td元素

// :has(selector)
$("div:has(p)") // 选择包含p元素的div

5. 可见性过滤选择器

// :hidden
$("div:hidden") // 选择所有隐藏的div

// :visible
$("div:visible") // 选择所有可见的div

6. 属性选择器

// [attribute]
$("div[id]") // 选择带有id属性的div

// [attribute=value]
$("input[name='email']") // 选择name属性为email的input

// [attribute!=value]
$("input[name!='email']") // 选择name属性不为email的input

// [attribute^=value]
$("a[href^='https']") // 选择href以https开头的a元素

// [attribute$=value]
$("a[href$='.pdf']") // 选择href以.pdf结尾的a元素

// [attribute*=value]
$("a[href*='google']") // 选择href包含google的a元素

7. 表单选择器

// :input
$(":input") // 选择所有input、textarea、select和button元素

// :text
$(":text") // 选择所有type="text"的input

// :password
$(":password") // 选择所有type="password"的input

// :radio
$(":radio") // 选择所有单选按钮

// :checkbox
$(":checkbox") // 选择所有复选框

// :submit
$(":submit") // 选择所有提交按钮

// :image
$(":image") // 选择所有图像按钮

// :reset
$(":reset") // 选择所有重置按钮

// :button
$(":button") // 选择所有按钮

// :file
$(":file") // 选择所有文件上传控件

// :enabled/:disabled
$(":enabled") // 选择所有启用的表单元素
$(":disabled") // 选择所有禁用的表单元素

// :checked
$(":checked") // 选择所有被选中的复选框和单选按钮

// :selected
$(":selected") // 选择所有被选中的option元素