jQuery选择器与操作实战指南

"jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。此资源主要介绍了jQuery的选择器用法，这是jQuery中最基础且重要的部分，用于高效地选取DOM元素进行操作。" jQuery 的选择器是其强大功能的核心，它们允许开发者以CSS样式的方式来选取页面上的元素，进行进一步的操作如添加样式、绑定事件或者执行动画等。以下是一些基本的jQuery选择器用法： 1. `$("*")`: 这个选择器会选取页面上的所有元素。 2. `$("th,td")`: 使用逗号分隔可以选取多个不同类型的元素，这里是`<th>`和`<td>`表格单元格。 3. `$("a")`: 选取所有的`<a>`链接元素。 4. `$("div#onlydiv")`: `#`前缀用于选取具有特定ID的元素，这里选取的是ID为"onlydiv"的`<div>`。 5. `$("#ID")`: 与上面类似，`$("#ID")`是选取具有指定ID的元素，例如`$("#rating")`选取ID为"rating"的元素。 6. `$("#orderedlist>li")`: 使用`>`表示直接子元素选择器，选取ID为"orderedlist"的元素的所有直接子`<li>`元素。 7. `$("#orderedlistli:last")`: `:last`选择器选取最后一个匹配的元素。 8. `$("#orderedlistli:first")`: `:first`选择器选取第一个匹配的元素。 9. `$("#orderedlistli:nth-child(0)")`: `:nth-child(n)`选择器选取父元素的第n个子元素，n从0开始。 10. `$("button:only-child")`: `:only-child`选择器选取其父元素中唯一的孩子元素。 11. `$(".stuff:empty")`: `:empty`选择器选取没有子元素（包括文本节点）的元素。 12. `$(".buttons:enabled")`: `:enabled`选择器选取状态为启用的表单元素。 13. `$(".buttons:disabled")`: `:disabled`选择器选取状态为禁用的表单元素。 14. `$("input:checked")`: `:checked`选择器选取被选中的复选框或单选按钮。 15. `$("button:not(.not)")`: `:not()`选择器排除匹配括号内选择器的元素，这里选取没有"class=not"的`<button>`元素。 16. `$("button.not")`: `.`前缀用于选取具有特定类名的元素，这里选取class为"not"的`<button>`。 17. `$(".CLSS")`: 类似于ID选择器，但用于选取具有指定类名的元素。 18. `$("#orderedlist2li")`: 这里选取ID为"orderedlist2"的元素的所有子孙`<li>`元素，注意ID选择器不区分大小写。 19. `alert($("#orderedlist~li").length)`: `~`是通用兄弟选择器，选取ID为"orderedlist"后的所有同级`<li>`元素，并通过`.length`获取其数量。 20. `$("#orderedlist,.buttons,li")`: 使用逗号分隔的选择器可以选取多个不同的选择器集，这里选取ID为"orderedlist"的元素、class为"buttons"的元素以及所有`<li>`元素。 21. `$("button[@class]")`: 在早期jQuery版本中，`[@attribute]`用来选取具有指定属性的元素，这里选取具有"class"属性的`<button>`。 22. `$("button[@class=not]")`: 类似地，这里选取`class`属性值为"not"的`<button>`。 通过这些选择器，开发者可以精确地选取页面上需要操作的元素，从而实现各种动态效果和功能。jQuery的选择器大大简化了JavaScript中对DOM的操作，使得代码更加简洁和高效。