《Slides Dev Web》 07. jQuery

• 语言: 英语
• 格式: .pdf
• 来源: he-arc.github.io

摘要

07.jQuery 19 décembre 2023 Développement web il3 jQuery HE-Arc (DGR) 2022 jQuery • John Resig, 2006 • Bibliothèque JS, gratuit, OS (licence MIT) • Facilite le développement JS pour les tâches fréquentes : – Manipulations DOM – Manipulations CSS – Réponse aux évenements du navigateur – Effets visuels et animations – Requêtes et réponses Ajax • Abstraction implémentations différents navigateurs • Facile à apprendre • Utilisation du chaînage des méthodes et des callbacks Utilisation • Inclusion CDN1

AI总结

### 总结：《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，但它在许多项目中仍然是一个有用的工具。