jQuery选择器与操作技巧详解

"jQuery选择器及jQuery数组" jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在jQuery中，选择器是其核心功能之一，它们允许我们高效地选取页面上的HTML元素。以下是对jQuery选择器和数组操作的详细解释： 1. **jQuery DOM准备就绪事件**： - `$(document).ready()`：这个函数确保当DOM完全加载后，才执行绑定的函数，通常用于在页面加载完毕后执行初始化脚本。 - `$(window).load()`：与`onload`事件类似，等待所有资源（包括图片、脚本等）加载完毕后执行。 2. **jQuery选择器**： - **ID选择器**：`$("#ID")`，通过ID选取页面上唯一的一个元素。 - **标签名选择器**：`$("tagName")`，选取所有指定标签名的元素。 - **类选择器**：`$(".className")`，选取具有特定类的所有元素。 - **组合选择器**：`$("p, div, span, .className")`，同时选取多个选择器列出的元素。 - **子元素选择器**：`$("div > li")`，选取所有直接位于`div`元素内的`li`元素。 - **相邻兄弟选择器**：`$(".className + div")`，选取类名为`className`元素后面的第一个`div`元素。 - **后续兄弟选择器**：`$(".className ~ div")`，选取类名为`className`元素后面的全部`div`元素。 3. **更复杂的选择器**： - **索引选择器**：`:first`选取集合中的第一个元素，`:last`选取最后一个元素，`:not(selector)`排除匹配的元素，`:even`选取偶数索引的元素，`:odd`选取奇数索引的元素，`:eq(index)`选取指定索引的元素，`:gt(index)`选取索引大于指定值的元素，`:lt(index)`选取索引小于指定值的元素。 - **预定义选择器**：`:header`选取所有的标题元素（h1-h6），`:animated`选取正在执行动画的元素，`:enabled`选取已启用的表单元素，`:disabled`选取禁用的表单元素，`:checked`选取已选中的复选框或单选按钮，`:selected`选取已选中的选项，`:input`选取所有输入类型的元素，包括文本框、密码框、复选框、单选按钮等，以及其他如`:text`、`:password`、`:radio`等特定输入类型选择器。 4. **jQuery数组操作**： - `$.each()`：这是一个用于遍历对象或数组的函数，如示例所示，可以遍历并操作每个元素。在给定的示例中，它遍历了一个对象数组，并弹出每个键值对。 5. **DOM操作**： - `replaceWith()`：将匹配的元素替换为指定的内容，如`$("br").replaceWith("<hr/>");`将所有`<br>`标签替换为`<hr>`。 - `wrap()`：将匹配的元素包裹在指定的HTML内容中，如`$("p").wrap("<font color='red'></font>")`将所有段落包裹在红色的`<font>`标签内。 - `attr()`：获取或设置元素的属性，如`attr("class")`获取属性值，`attr("class", "myClass")`设置属性值。 以上就是jQuery选择器和数组操作的基本概念和使用方法，这些工具使得JavaScript开发者能够更加便捷地操纵DOM，实现丰富的交互效果。