jQuery选择器详解与常用操作汇总

jQuery选择器是前端开发中不可或缺的一部分，它允许开发者根据元素的各种属性、关系和状态来精准地定位和操作DOM元素。jQuery选择器提供了多种灵活的方式来筛选文档中的元素，使得JavaScript代码更加简洁和高效。 1. ID选择器：`$("#id")` 用于选取具有指定ID的元素，ID在整个文档中应该是唯一的。这在页面中有明确标识的目标元素上特别有用。 2. 元素类型选择器：如 `$("input")` 和 `$("pinput.div1")` 分别选取所有 `<input>` 元素和类名为 "div1" 的 `<p>` 元素下的 `<input>`。这些选择器可以匹配多个同类型的元素。 3. 子元素与相邻元素选择器：`$("div > input")` 选取直接嵌套在 `<div>` 元素内的 `<input>`，而 `$("div").next("input")` 选取紧接在 `<div>` 后的第一个 `<input>`。`$.nextAll("input")` 和 `$.siblings("input")` 则分别选取所有紧随其后的和同一父元素下的后续 `<input>`。 4. 伪类选择器：`:even`、`:odd`、`:first`、`:last` 等用于选择特定位置或状态的元素，例如选取偶数索引的元素或第一个和最后一个元素。`:gt(2)`、`:lt(2)` 用于选取大于或小于指定索引的元素，`:eq(2)` 则匹配索引为2的元素。 5. 属性选择器：`:contains(text)` 查找包含指定文本的元素，`:empty` 选择没有子节点的元素，`:hidden` 和`:visible` 则对应于元素是否可见。`:enabled`、`:disabled` 用于判断元素是否可交互，`:checked` 用于选取被选中的表单复选框或单选按钮。 6. 表单元素选择器：`:input`, `:text`, `:password`, `:radio`, `:checkbox`, `:submit`, `:image`, `:reset`, `:button`, `:file` 分别匹配不同类型的表单输入控件。 7. DOM操作方法：`.text()` 用于获取或设置元素的文本内容，`.attr("title")` 获取元素的属性值，`.html()` 用于获取或设置元素的HTML内容。`append()`、`prepend()`、`insertBefore()` 和 `insertAfter()` 是用于添加或移动元素的方法，`.remove()` 删除元素，`.empty()` 清空元素内容，`.clone()` 用于复制元素。 8. 更复杂的元素包装和替换：`.wrap()`、`.wrapAll()`、`.wrapInner()` 用于包裹元素，`.replaceWith()` 替换元素内容。`.attr("title", "")` 和 `.removeAttr()` 分别用于设置和移除元素属性。 9. 类名和样式操作：`.attr("class")` 用于获取或设置类名，`.addClass()` 和 `.removeClass()` 分别增加和删除类名，`.toggleClass()` 则切换类名，`.hasClass()` 检查元素是否有特定的类，`.attr("title")` 获取或设置元素的title属性。 10. 获取和设置元素值：`.html()`, `.text()`, `.val()` 分别获取HTML内容、文本内容和表单字段值。 11. 进一步的导航和关系操作：`.children()`, `.next()`, `.prev()`, `.nextAll()`, `.prevAll()` 和 `.siblings()` 分别用于获取子元素、下一个兄弟元素、上一个兄弟元素、所有后续兄弟元素、所有先前兄弟元素和同一父元素的所有其他兄弟元素。 总结起来，jQuery选择器是强大的工具，它提供了丰富的语法和功能，帮助开发者针对页面上的各种元素进行精确控制，简化了动态网页开发的工作流程。熟练掌握这些选择器及其组合使用，能够极大地提高前端开发的效率和代码的可读性。