jQuery选择器详解：基础到高级

"这篇文档是关于JQuery选择器的详细小结，主要涵盖了四个类别：基本选择器，层次选择器，过滤选择器和表单选择器。内容来源于《锋利的jQuery》一书，旨在帮助读者理解和实践jQuery的选择器用法。" 在jQuery中，选择器是用于定位和选取DOM元素的关键工具，它们极大地简化了JavaScript中对DOM的操作。下面我们将详细探讨这些选择器类别： 1. **基本选择器**： - `#id`：通过ID选取单个元素，如`$("#test")`会选择ID为test的元素。 - `.class`：根据类名选取元素集合，如`$(".test")`会选择所有class为test的元素。 - `element`：按元素标签名选取元素集合，如`$("p")`会选择所有段落元素。 - `*`：选取所有元素，如`$("*")`会选取页面上的所有DOM元素。 - `Selector1, Selector2, ..., SelectorN`：组合多个选择器，选取它们各自匹配的元素集合，如`$("div,span,p.myClass")`会选择div、span和class为myClass的p元素。 2. **层次选择器**： - `ancestor descendant`：选取祖先元素内的后代元素，如`$("div span")`会选择所有位于div元素内的span元素。 - `parent > child`：选取父元素的直接子元素，如`$("div > span")`会选择所有div元素的直接子span元素。 - `prev + next`：选取紧接在前一个元素后面的元素，如`$(".one + div")`会选择class为one元素后面的下一个div元素。 - `prev ~ siblings`：选取前一个元素之后的所有同级元素，如`$(".one ~ div")`会选择class为one元素后面的所有div兄弟元素。 3. **过滤选择器**： 过滤选择器允许我们进一步筛选已选取的元素，例如： - `:first`，`:last`，`:eq(index)`，`:even`，`:odd`，`:gt(index)`，`:lt(index)`等，可以用于选取集合中的特定元素。 - `:not(selector)`，选取不匹配指定选择器的元素。 - `:contains(text)`，选取包含指定文本的元素。 - `:has(selector)`，选取包含指定选择器匹配的元素的元素。 4. **表单选择器**： - `:input`：选取所有表单输入元素，如`$("input")`。 - `:text`，`:password`，`:checkbox`，`:radio`，`:file`，`:submit`，`:reset`等，选取特定类型的表单元素。 - `:selected`，`:checked`，选取被选中或勾选的元素。 每个选择器都有其特定的用途，它们可以单独使用，也可以组合使用，形成强大的查询和操作DOM的能力。在实际开发中，熟悉并熟练运用这些选择器可以显著提高代码的效率和可读性。通过实践和理解，开发者可以更好地驾驭jQuery，实现更优雅的前端交互和动态效果。