《Slides Dev Web》 07. jQuery

### 总结：《Slides Dev Web》 07. jQuery #### 1. jQuery 简介 - **创建者**：John Resig，2006年发布。 - **特点**： - 免费开源，MIT 许可证。 - 一个 JavaScript 库，简化了 DOM 操作、CSS 操作、事件处理、动画效果和 AJAX 请求等常见任务。 - 提供浏览器兼容性抽象，易于学习，支持方法链和回调函数。 #### 2. 核心功能 - **DOM 操作**： - 选择元素：支持 CSS 选择器、ID 和类。 - 修改内容：`text()`, `html()`, `val()`, `attr()`。 - 添加内容：`append()`, `prepend()`, `before()`, `after()`。 - 删除内容：`empty()`, `remove()`。 - **DOM 遍历**： - 向上查找：`parent()`, `parents()`。 - 向下查找：`children()`, `find()`。 - 查找兄弟节点：`siblings()`, `next()`, `prev()`。 - 过滤节点：`first()`, `last()`, `eq()`, `filter()`, `not()`。 - **CSS 操作**： - 类操作：`addClass()`, `removeClass()`, `toggleClass()`。 - 样式操作：`css()`。 - **事件处理**： - 鼠标事件：`click`, `dblclick`, `mouseenter`, `mouseleave`。 - 键盘事件：`keypress`, `keyup`, `keydown`。 - 表单事件：`submit`, `change`, `focus`, `blur`。 - 文档事件：`ready`, `load`, `resize`, `scroll`, `unload`。 - **动画效果**： - 显示/隐藏：`hide()`, `show()`, `toggle()`。 - 渐入/渐出：`fadeIn()`, `fadeOut()`, `fadeToggle()`。 - 滑动效果：`slideDown()`, `slideUp()`, `slideToggle()`。 - 自定义动画：`animate()`。 - **AJAX**： - 加载内容：`load(URL, data, callback)`。 - 发送 GET 请求：`$.get(URL, callback)`。 - 发送 POST 请求：`$.post(URL, data, callback)`。 #### 3. 使用方法 - **引入 jQuery**： - 通过 CDN 引入：``。 - 基本语法：`$(selecteur).action();`。 - 文档就绪：`$(document).ready(function() { ... })` 或 `$(function() { ... })`。 #### 4. 替代方案 - **Vanilla JS**：纯 JavaScript，通过原生 API（如 `querySelectorAll()`）实现相同功能。 - **bling.js**：轻量级的 JavaScript 库，提供类似 jQuery 的功能。 #### 5. 参考资料 - [jQuery 官方网站](https://jquery.com/)。 - [W3Schools jQuery 教程](https://www.w3schools.com/jquery/)。 - [SizzleJS（jQuery 的选择器引擎）](https://github.com/jquery/sizzle/wiki)。 ### 总结 jQuery 是一个功能强大且易于使用的 JavaScript 库，简化了前端开发中的许多常见任务，如 DOM 操作、事件处理、动画和 AJAX 请求。通过其简洁的 API 和跨浏览器兼容性，jQuery 特别适合快速开发和复杂的前端项目。尽管现代 JavaScript 和框架（如 React、Vue）在某些场景中取代了 jQuery，但它在许多项目中仍然是一个有用的工具。