jQuery速查表：选择器与过滤器详解

“jQuery cheatsheet” jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。这个cheatsheet是针对那些频繁使用jQuery的开发者设计的，旨在帮助他们快速查阅并记忆jQuery的各种选择器和过滤器。 一、基础选择器 1. 全部选择器（“*”）：选择页面上的所有元素。 2. 类选择器（“.class”）：匹配具有指定类名的所有元素。 3. 元素选择器（“element”）：根据标签名选取所有元素。 4. ID选择器（“#id”）：选取具有特定ID属性的唯一元素。 5. 多重选择器（“selector1, selector2, selectorN”）：结合多个选择器，选取它们共同匹配的元素。 二、层级选择器 1. 子元素选择器（“parent>child”）：选取父元素下的直接子元素。 2. 后代选择器（“ancestor descendant”）：选取给定祖先元素的所有后代元素。 3. 相邻兄弟选择器（“prev + next”）：选取紧跟在指定前一个元素后面的同级元素。 4. 通用兄弟选择器（“prev ~ siblings”）：选取在指定元素之后，拥有相同父元素的所有同级元素。 三、基础过滤器 1. 动画选择器（`:animated`）：选取当前正在执行动画效果的元素。 jQuery还提供了许多其他过滤器，用于进一步筛选和操作选取的元素。例如： - `:first`：选取集合中的第一个元素。 - `:last`：选取集合中的最后一个元素。 - `:even` 和 `:odd`：分别选取索引为偶数和奇数的元素。 - `:gt(index)`：选取索引大于指定值的元素。 - `:lt(index)`：选取索引小于指定值的元素。 - `:not(selector)`：排除匹配给定选择器的元素。 - `:has(selector)`：选取包含指定选择器匹配的元素的元素。 - `:header`：选取所有的标题元素（如`h1`到`h6`）。 - `:input`：选取所有表单输入元素（如`input`，`textarea`，`select`，`button`）。 此外，jQuery的过滤器还可以与基本选择器结合使用，实现更复杂的选取需求。通过这些选择器和过滤器，开发者可以精确地定位到DOM树中的特定元素，并对其进行操作，如添加样式、响应事件或执行动画等。这对于创建动态和交互性的Web界面至关重要。