jQuery 选择器大全
基本选择器
$("#myELement") // 选择 id 值等于 myElement 的元素, id 值不能重复在文档中只能有一个 id 值是myElement 所以得到的是唯一的元素
$("div") // 选择所有的 div 标签元素, 返回 div 元素数组
$(".myClass") // 选择所有使用 myClass 类的 css 元素
$("*") // 选择文档中的所有的元素
// 可以运用多种的选择方式进行联合选择, 例如
$("#myELement,div,.myclass")
后代选择与兄弟选择
$("A B") // 查找 A 元素下面的所有子元素, 包括非直接子元素
$("A > B") // 查找 A 元素下面的直接子元素
$("A + B") // 查找 A 元素后面的第一个兄弟元素, 包括非直接子元素
$("A ~ B") // 查找 A 元素后面的所有兄弟元素, 不包括非直接子元素
层叠选择器
$("form input") // 选择所有的 form 元素中的 input 元素
$("#main > *") // 选择 id 值为 main 的所有的子元素
$("label + input") // 选择所有的 label 元素后的下一个 input 元素节点。经测试选择器返回的是 label 标签后面直接跟一个 input 标签的所有 input 标签元素
$("#prev ~ div") // 同胞选择器, 返回的为 id 为 prev 的标签元素的所有的属于同一个父元素的 div 标签
// 过滤掉已选中的 input 元素, 选择所有未选中的 input 元素后紧跟的 span 元素
$("input:not(:checked) + span")
基本过滤选择器
$("tr:first") // 选择所有 tr 元素的第一个
$("tr:last") // 选择所有 tr 元素的最后一个
$("tr:even") // 选择所有的 tr 元素中偶数序号的元素 (第 0, 2, 4...个元素, 因为所选择的多个元素时为数组, 所以序号是从 0 开始)
$("tr:odd") // 选择所有的 tr 元素中奇数序号的元素 (第 1, 3, 5...个元素)
$("td:eq(2)") // 选择所有的 td 元素中序号为 2 的那个 td 元素
$("td:gt(4)") // 选择 td 元素中序号大于 4 的所有 td 元素
$("td:ll(4)") // 选择 td 元素中序号小于 4 的所有 td 元素
$(":header") // 选择所有标题元素 (h1 至 h6)
$("div:animated") // 选择所有当前正在执行动画的 div 元素
内容过滤选择器
$("div:contains('John')") // 选择所有 div 中含有 'John' 文本的元素
$("td:empty") // 选择所有的为空 (也不包括文本节点) 的 td 元素的数组
$("div:has(p)") // 选择所有含有 p 标签的 div 元素
$("td:parent") // 选择所有的以 td 为父节点的元素数组
可视化过滤选择器
$("div:hidden") // 选择所有被隐藏的 div 元素
$("div:visible") // 选择所有可见的 div 元素
属性过滤选择器
$("div[id]") // 选择所有含有 id 属性的 div 元素
$("input[name='newsletter']") // 选择所有的 name 属性等于 'newsletter' 的 input 元素
$("input[name!='newsletter']") // 选择所有的 name 属性不等于 'newsletter' 的 input 元素
$("input[name^='news']") // 选择所有的 name 属性以 'news' 开头的 input 元素
$("input[name$='news']") // 选择所有的 name 属性以 'news' 结尾的 input 元素
$("input[name*='man']") // 选择所有的 name 属性包含 'news' 的 input 元素
// 可以使用多个属性进行联合选择
// 选择所有具有 id 属性且 name 属性以 'man' 结尾的元素
$("input[id][name$='man']")
子元素过滤选择器
$("ul li:nth-child(2)") // 选择 ul 中的第 2 个 li 子元素
$("ul li:nth-child(odd)") // 选择所有 ul 中奇数序号的 li 子元素
$("ul li:nth-child(3n + 1)") // 选择所有 ul 中序号为 3 的倍数加 1 的 li 子元素
$("div span:first-child") // 选择所有 div 元素的第一个 span 子元素
$("div span:last-child") // 选择所有 div 元素的最后一个 span 子元素
$("div button:only-child") // 选择所有 div 中唯一的 button 子元素
表单元素选择器
HTML 例子
<body>
<!-- :input 选择所有表单输入元素 -->
<form>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="subscribe" value="yes"> Subscribe
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="image" src="submit.png" alt="Submit">
<input type="file" name="fileUpload">
<input type="hidden" name="hiddenField" value="hiddenValue">
<textarea name="message" placeholder="Your message"></textarea>
<select name="options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<button type="button">Click Me</button>
</form>
</body>
选择器
$(":input") // 选择所有表单输入元素, 包括 input、textarea、select 和 button
$(":text") // 选择所有 text 类型的 input 元素
$(":password") // 选择所有 password 类型的 input 元素
$(":radio") // 选择所有 radio 类型的 input 元素
$(":checkbox") // 选择所有 checkbox 类型的 input 元素
$(":submit") // 选择所有 submit 类型的 input 元素
$(":image") // 选择所有 image 类型的 input 元素
$(":reset") // 选择所有 reset 类型的 input 元素
$(":button") // 选择所有 button 类型的 input 元素
$(":file") // 选择所有 file 类型的 input 元素
$(":hidden") // 选择所有类型为 hidden 的 input 元素
表单元素过滤选择器
$(":enabled") // 选择所有可操作的表单元素
$(":disabled") // 选择所有不可操作的表单元素
$(":checked") // 选择所有已选中的表单元素
// 选择所有的 select 元素中被选中的 option 子元素, 用户在下拉列表中选择的选项
$("select option:selected")
常见选取示例
// 选取 name 为 'S_03_22' 的 input 元素的上一个 td 元素的文本值
$("input[name='S_03_22']").parent().prev().text()
// 选取名字以 "S_" 开头, 且不以 "_R" 结尾的 input 元素
$("input[name^='S_']").not("[name$='_R']")
// 获取名为 radio_01 的 radio 按钮选中的值
$("input[name='radio_01'][checked]").val()
原文