jQuery常用选择器与操作方法整理

"jQuery常见用法的整理版，基于《jQuery即学即用》一书。" jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。以下是对标题和描述中提及的jQuery知识点的详细说明： 1. **选择器**： - `$("[selector]")`：通过类名、ID或属性选择元素。例如，`$(".myClass")`选择所有类名为`myClass`的元素。 - `$("#id")`：通过ID选择元素，如`$("#myID")`选择ID为`myID`的元素。 - `$("tagname")`：选择所有指定标签名的元素，如`$("div")`选择所有`<div>`元素。 2. **子元素选择器**： - `$("> selector")`：选择直接子元素，如`$("ul > li")`选择所有`<ul>`内的直接`<li>`子元素。 - `"~ selector"`：选择同级后续兄弟元素，如`$("div ~ p")`选择所有紧跟在`<div>`后面的`<p>`元素。 - `"+ selector"`：选择紧跟在前面元素后的同级元素，如`$("h1 + p")`选择紧跟在`<h1>`后的第一个`<p>`元素。 3. **特殊选择器**： - `:first`：选择集合中的第一个元素，如`$("li:first")`选择第一个`<li>`元素。 - `:last`：选择集合中的最后一个元素，如`$("li:last")`选择最后一个`<li>`元素。 - `:not(selector)`：排除匹配给定选择器的元素，如`$("li:not(:first)")`选择除了第一个`<li>`之外的所有`<li>`元素。 - `:even`：选择索引偶数位置的元素，从0开始计数，如`$("li:even")`选择索引为0, 2, 4...的`<li>`元素。 - `:odd`：选择索引奇数位置的元素，从0开始计数，如`$("li:odd")`选择索引为1, 3, 5...的`<li>`元素。 - `:eq(index)`：选择指定索引位置的元素，如`$("li:eq(2)")`选择索引为2的`<li>`元素。 - `:gt(index)`：选择索引大于给定值的元素，如`$("li:gt(2)")`选择索引大于2的`<li>`元素。 - `:lt(index)`：选择索引小于给定值的元素，如`$("li:lt(2)")`选择索引小于2的`<li>`元素。 - `:empty`：选择没有子节点的元素，如`$("div:empty")`选择所有空的`<div>`元素。 - `:has(selector)`：选择包含特定子元素的元素，如`$("div:has(p)")`选择包含`<p>`的`<div>`元素。 - `:parent`：选择有子元素的元素，如`$("div:parent")`选择所有有子元素的`<div>`。 4. **表单选择器**： - `:input`：选择所有表单元素，包括`<input>`, `<textarea>`, `<select>`和`<button>`。 - `:text`, `:password`, `:radio`, `:checkbox`, `:submit`, `:image`, `:reset`, `:button`, `:file`：分别选择对应的表单元素类型。 5. **状态选择器**： - `:enabled`：选择状态为启用的元素，如`$("input:text:enabled")`选择启用状态的文本输入框。 - `:disabled`：选择状态为禁用的元素，如`$("input:text:disabled")`选择禁用状态的文本输入框。 - `:checked`：选择被选中的复选框或单选按钮，如`$(":checked")`选择所有被选中的表单选项。 - `:selected`：选择被选中的`<option>`元素，如`$("select option:selected")`选择被选中的`<select>`选项。 6. **操作方法**： - `.eq(index)`：返回匹配索引的元素，如`$("p").eq(2)`选择所有`<p>`中的第三个元素。 - `.filter(expr)`：过滤元素集，保留匹配表达式的元素，如`$("p").filter(".center")`选择所有类名为`center`的`<p>`元素。 - `.slice(start, [end])`：切片元素集合，如`$("p").slice(3, 7)`选择索引从3到6（不包括7）的`<p>`元素。 - `.is(expr)`：检查元素是否匹配表达式，返回布尔值，如`$("p").is(".center")`检查当前元素中是否有类名为`center`的`<p>`元素。 - `.next([expr])`：获取当前元素的下一个同级元素，可选参数用于过滤，如`$("p").next(".center")`选择当前`<p>`之后的类名为`center`的元素。 - `.prev([expr])`：获取当前元素的前一个同级元素，可选参数用于过滤，如`$("p").prev(".center")`选择当前`<p>`之前类名为`center`的元素。 - `.parent([expr])`：获取当前元素的父元素，可选参数用于过滤，如`$("p").parent(".container")`选择当前`<p>`的父元素中类名为`container`的那个。 - `.children([expr])`：获取当前元素的所有子元素，可选参数用于过滤，如`$("div").children("p")`选择所有`<div>`内的`<p>`子元素。 这些是jQuery中最常用的一些选择器和方法，它们极大地提高了DOM操作的效率和便利性。在实际开发中，熟练掌握这些用法可以有效提升前端代码的质量和性能。