jquery选择器有哪些：分类与实操用法
jquery选择器有哪些，主要分为基础选择器、层级选择器、过滤选择器、表单选择器四大类，你可以直接按DOM结构、元素属性、表单状态筛选页面元素，基础选择器适配静态页面快速选取，层级选择器用于父子、后代等关联元素定位，过滤选择器在已有选中集合里二次筛选，表单选择器专门匹配input、select等表单控件；该体系的适用边界是页面DOM完成加载后执行，动态新增的元素无法直接被普通选择器捕获，需要搭配事件委托实现。
jquery选择器基础类型
基础选择器是使用频率较高的一类，包含元素选择器、id选择器、类选择器、属性选择器、通配选择器。元素选择器直接写标签名，$("div")选取页面全部div标签；id选择器使用前缀，$("#box")匹配id为box的元素；类选择器使用.前缀，$(".item")获取class为item的元素；属性选择器依靠元素属性匹配，$("[type='text']")选中type等于text的元素；通配选择器$("*")会选中页面所有元素，大型页面中尽量少用，会带来额外性能开销。
层级选择器依靠元素之间的嵌套关系查找目标。后代选择器用空格隔开，$("ulli")选取ul内部所有li；子元素选择器用大于号，$("ul>li")只匹配ul直接子级li，不会获取深层嵌套的li；相邻兄弟选择器用加号，$(".title+p")匹配紧跟在title后面的第一个p标签；通用兄弟选择器用波浪号，$(".title~p")获取title之后所有同级p标签。
jquery选择器过滤类型
过滤选择器不会从头查找DOM，而是在已经选中的元素集合中筛选，以冒号开头。基础过滤包含:first获取集合第一个元素，:last获取最后一个元素，:eq(index)按索引定位，索引从0开始，$("li:eq(2)")选中第三个li。内容过滤依靠标签内部文本，:contains(文字)匹配包含指定文本的元素，:empty选中内部无内容的空标签。可见性过滤依靠元素显示状态，:visible匹配可见元素，:hidden获取display:none或者隐藏的元素。
位置过滤选择器适合列表批量处理。
表单过滤选择器专门针对表单控件，同样属于过滤选择器分支。
- :input匹配所有表单控件，包含input、textarea、select、button
- :text匹配单行文本输入框
- :checked匹配选中的单选框、复选框
- :selected匹配下拉框选中项
- :disabled匹配禁用状态的表单元素
| 选择器类别 | 查找逻辑 | 适用场景 | 性能参考 |
|---|---|---|---|
| 基础选择器 | 直接匹配标签、id、class | 页面静态元素快速获取 | 较好 |
| 层级选择器 | 依靠DOM嵌套关系定位 | 获取关联父子、兄弟元素 | 中等 |
| 过滤选择器 | 在结果集内二次筛选 | 对已选取元素做条件过滤 | 一般 |
| 表单选择器 | 识别表单控件状态 | 表单校验、取值操作 | 中等 |
id选择器在浏览器原生DOM接口中查找速度更快，你写代码时优先使用id缩小查找范围，再搭配其他选择器，减少jQuery遍历DOM的开销。如果你直接使用$(".list:eq(0)")，会先查找全部list元素再筛选索引，元素数量庞大时页面响应会变慢。
动态渲染生成的元素，普通jquery选择器无法直接选中，这类元素是页面加载完成后通过js新增到DOM树，选择器执行时目标元素还不存在，查询返回空集合。
jquery选择器支持多条件组合，你可以叠加多个条件缩小范围，$("div.item:visible")会选取class为item且处于可见状态的div元素，组合写法可以减少后续js判断代码。
