jQuery选择器

":visible")选取所有可见的元素。这包括所有默认可见的元素以及通过CSS设置为`display:block`或`display:inline`的元素。 ### jQuery选择器详解 #### 一、基本选择器：快速定位DOM元素 基本选择器是jQuery中最常用的选择器之一，用于快速定位文档中的特定元素。它包括： - **ID选择器**：`#id` - 匹配文档中带有指定ID的单一元素。例如，`$("#test")`选取id为`test`的元素。 - **类选择器**：`.class` - 匹配文档中具有指定类的所有元素。例如，`$(".test")`选取所有class为`test`的元素。 - **元素类型选择器**：`element` - 匹配文档中所有指定类型的元素。例如，`$("p")`选取所有的`<p>`元素。 - **通配符选择器**：`*` - 匹配文档中的所有元素，无论其类型如何。例如，`$("*")`选取所有的元素。 - **组合选择器**：`selector1, selector2... , selectorN` - 合并多个选择器的结果。例如，`$("div, span, p.myClass")`选取所有`<div>`, `<span>`和class为`myClass`的`<p>`标签的一组元素。 #### 二、层次选择器：深入理解元素间关系 层次选择器用于根据元素之间的层次结构来定位目标元素，包括： - **后代选择器**：`$("ancestor descendant")` - 匹配所有位于`ancestor`元素内的`descendant`元素。例如，`$("div span")`选取所有位于`<div>`元素内部的`<span>`元素。 - **子元素选择器**：`$("parent > child")` - 仅匹配`parent`元素的直接子元素中的`child`元素。例如，`$("div > span")`选取`<div>`元素下的直接子元素`<span>`。 - **相邻兄弟选择器**：`$("prev + next")` - 匹配紧接在`prev`元素后面的`next`元素。例如，`$('.one + div')`选取class为`one`的元素后面的直接兄弟`<div>`元素。 - **通用兄弟选择器**：`$("prev ~ siblings")` - 匹配所有位于`prev`元素后面的`siblings`元素。例如，`$('#two ~ div')`选取id为`two`的元素后面的所有`<div>`兄弟元素。 #### 三、过滤选择器：精确定位所需元素 过滤选择器允许开发者进一步筛选由其他选择器选取的元素集，分为基本过滤、内容过滤和可见性过滤。 - **基本过滤选择器**： - `:first` - 选取第一个元素。 - `:last` - 选取最后一个元素。 - `:not(selector)` - 去除所有与给定选择器匹配的元素。 - `:even` - 选取索引是偶数的所有元素，从0开始计数。 - `:odd` - 选取索引是奇数的所有元素，从0开始计数。 - `:eq(index)` - 选取索引等于`index`的元素。 - `:gt(index)` - 选取索引大于`index`的元素。 - `:lt(index)` - 选取索引小于`index`的元素。 - `:header` - 选取所有的标题元素，如`h1`, `h2`, `h3`等。 - `:animated` - 选取当前正在执行动画的所有元素。 - **内容过滤选择器**： - `:contains(text)` - 选择含有指定文本的元素。 - `:empty` - 选取不包含子元素或文本的空元素。 - `:has(selector)` - 选取含有选择器匹配的元素的元素。 - `:parent` - 选取含有子元素或文本的元素。 - **可见性过滤选择器**： - `:hidden` - 选取所有不可见的元素。 - `:visible` - 选取所有可见的元素。 以上选择器的灵活应用能够帮助开发者精准地定位和操作DOM树中的任何元素，是前端开发中不可或缺的强大工具。无论是对初学者还是经验丰富的程序员来说，掌握这些选择器的用法都是至关重要的。