jQuery学习笔记：DOM操作与选择器

"jQuery 学习笔记" jQuery 是一个流行的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果和Ajax交互等多个方面的工作。以下是对 jQuery 的详细讲解： 1. **选择器与对象** - `$()` 和 `jQuery()` 是等价的，用于创建 jQuery 对象，例如 `$(“sss”)` 会选取页面上匹配 "sss" 的元素。 - `$(document).ready()` 在 DOM 结构加载完成后执行，而 `window.onload` 等待所有元素包括图片等资源加载完毕才执行。`$(window).load()` 等同于 `window.onload`。 2. **代码风格** - 对于同一样本对象的操作，如果不超过三个，可以写在同一行；超过三个，推荐每项操作单独一行，以保持代码可读性。 3. **jQuery 对象与 DOM 对象转换** - 要将 jQuery 对象转换为 DOM 元素，你可以使用索引访问，如 `var cr = $cr[0]` 或 `var cr = $cr.get(0)`。 - 反之，要将 DOM 元素转换为 jQuery 对象，可以使用 `$()` 包裹，如 `var $cr = $(cr)`。 4. **检查元素存在** - 判断元素是否存在的两种方式是：`if ($("#ss").length > 0) {...}` 和 `if ($("#ss")[0]) {...}`。 5. **选择器** - 基本选择器：`$("#ttt")` 选中 ID 为 "ttt" 的元素，`$(".ttt")` 选中 class 为 "ttt" 的元素，`$("div")` 选中所有 div 标签。 - 层次选择器：`$("div span")` 选中所有嵌套在 div 内的 span，`$("div > span")` 选中 div 的直接子元素 span，`$("#ttt + div")` 选中 ID 为 "ttt" 的元素后的第一个 div，`$("#ttt ~ div")` 选中 ID 为 "ttt" 的元素之后的所有 div 兄弟元素。 - 相应的方法有 `.next()`, `.nextAll()`, `.siblings()`。 6. **过滤选择器** - `:first` 选择器选取指定元素类型的第一个元素，如 `$("div:first")`。 - `:last` 选择器选取指定元素类型的最后一个元素，如 `$("div:last")`。 - 还有其他过滤选择器，例如 `:even` (偶数索引的元素)，`:odd` (奇数索引的元素)，`:eq(index)` (指定索引位置的元素)，`:gt(index)` (索引大于指定值的元素)，`:lt(index)` (索引小于指定值的元素) 等。 7. **设置样式** - 使用 `.css()` 方法可以动态设置或获取元素的样式，如 `$("#ss").css("color", "red")`。 8. **避免与其他库冲突** - 如果存在其他库也使用 `$` 符号，可以通过 `$.noConflict()` 来释放 `$`，使用 `jQuery` 替代。 9. **事件处理** - jQuery 提供了 `.on()` 方法绑定事件，如 `$("#element").on("click", function() {...})`。 10. **动画效果** - `.fadeIn()`, `.fadeOut()`, `.slideToggle()` 等方法可用于创建平滑的动画效果。 11. **Ajax 请求** - jQuery 的 `.ajax()`, `.get()`, `.post()` 方法简化了异步数据请求。 这些只是 jQuery 的基础内容，更深入的学习还包括插件使用、自定义事件、AJAX 数据处理等高级特性。jQuery 提供了一套丰富的 API，使得开发者能够高效地编写 JavaScript 代码。