jQuery可包含哪些选择器？求完整列表/规范及相关用法疑问

嘿，这个问题问到点子上了！jQuery的选择器生态其实比你列举的要丰富得多，我来给你详细补充常见的类型，同时解答你关于用name属性选择的疑问：

1. 属性选择器（含name属性选择） #

这正是你关心的——完全可以用name属性选择元素！语法是用方括号包裹属性名和值，比如：

• 选择name为email的元素：$('[name="email"]')
• 还支持各种匹配规则：
  • 模糊匹配开头：$('[href^="https://"]')（选中所有href以https开头的元素）
  • 模糊匹配结尾：$('[class$="-item"]')（选中class以-item结尾的元素）
  • 包含指定值：$('[class*="active"]')（选中class里包含active的元素）
    不止name，任何HTML属性（比如data-*自定义属性）都能这么用。

2. 层级关系选择器 #

用来定位DOM结构里的父子、兄弟关系元素：

• 后代选择器：$('.container p')（选中.container下所有后代p元素）
• 直接子元素选择器：$('.container > p')（只选中.container的直接子级p）
• 紧邻兄弟选择器：$('h2 + p')（选中h2后面紧跟的同级p元素）
• 所有后续兄弟选择器：$('h2 ~ p')（选中h2后面所有同级p元素）

3. 过滤选择器 #

jQuery在CSS基础上扩展了很多实用的过滤规则：

• 基本过滤：
  • $('li:first')（选中第一个li元素）
  • $('li:last')（选中最后一个li元素）
  • $(':even')（选中索引为偶数的元素，注意jQuery索引从0开始）
  • $(':odd')（选中索引为奇数的元素）
  • $(':not(.disabled)')（选中所有不带disabled类的元素）
• 内容过滤：
  • $(':contains("提示文本")')（选中包含指定文本的元素）
  • $(':empty')（选中没有任何子元素或文本的空元素）
• 可见性过滤：
  • $(':visible')（选中所有可见元素）
  • $(':hidden')（选中所有隐藏元素，包括display:none、type="hidden"的input）

4. 表单专属选择器 #

针对表单元素的快捷选择，比原生CSS更便捷：

• $(':input')（选中所有表单输入元素：input、textarea、select、button）
• $(':text')（选中所有文本输入框）
• $(':checkbox')（选中所有复选框）
• $(':checked')（选中已勾选的单选框/复选框）
• $(':selected')（选中下拉框中已选中的选项）

5. 特殊对象选择器 #

除了你提到的$(document)，还有：

• $(window)（选中浏览器窗口对象，用来绑定resize、scroll等事件）
• $(this)（在事件回调或遍历回调中，指代当前上下文的元素，比如$('button').click(function(){ $(this).addClass('active') })）

另外要注意，jQuery的选择器大部分兼容CSS标准选择器，所以你熟悉的CSS选择器几乎都能直接在jQuery里用，同时它还额外提供了很多专属的实用选择器，让DOM选择更灵活。

内容的提问来源于stack exchange，提问作者user10777718