《Slides Dev Web》 07. jQuery

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

摘要

Le document présente jQuery, une bibliothèque JavaScript créée en 2006 par John Resig. jQuery facilite le développement web en simplifiant les tâches courantes comme les manipulations DOM, les opérations CSS, la gestion d'événements, les animations et les requêtes AJAX. Il propose une abstraction des différences entre navigateurs, une syntaxe facile à apprendre et l'utilisation de chaînes de méthodes et de callbacks. Le document explique également comment inclure jQuery via une CDN, comment sélectionner et manipuler le DOM, comment gérer les événements, les animations et les requêtes AJAX, ainsi que des alternatives à jQuery.

AI总结

### jQuery 概览

#### 什么是 jQuery？
- **创建者**：由 John Resig 于 2006 年创建。
- **特点**：
- 轻量级 JavaScript 库，遵循 MIT 许可证。
- 简化常见任务，如 DOM 操作、CSS 操作、事件处理、AJAX 请求和动画效果。
- 提供跨浏览器兼容性，简化不同浏览器实现的差异。
- 语法简洁，支持链式调用和回调函数。

#### 核心功能
- **DOM 操作**：
- 选择器支持 CSS 选择器（如 `#id`, `.class`, `element`）。
- 支持链式调用，如 `$('p').hide().fadeIn()`。
- **CSS 操作**：
- 修改样式：`addClass()`, `removeClass()`, `toggleClass()`, `css()`。
- 获取/设置文本内容：`text()`, `html()`, `val()`。
- **事件处理**：
- 鼠标事件：`click()`, `dblclick()`, `mouseenter()`, `mouseleave()`。
- 键盘事件：`keypress()`, `keyup()`, `keydown()`。
- 表单事件：`submit()`, `change()`, `focus()`, `blur()`。
- 文档事件：`ready()`, `load()`, `resize()`, `scroll()`, `unload()`。
- **AJAX 请求**：
- `$.get()`, `$.post()`, `$.load()`。
- 支持回调函数处理响应。
- **动画与效果**：
- 隐藏/显示：`hide()`, `show()`, `toggle()`。
- 淡入淡出：`fadeIn()`, `fadeOut()`, `fadeToggle()`。
- 滑动效果：`slideDown()`, `slideUp()`, `slideToggle()`。
- 自定义动画：`animate()`。

#### 使用方法
- **引入 jQuery**：

- **基本语法**：
- 选择器：`$('h1')`, `$('.class')`, `$('#id')`。
- 操作：`$('p').click(function() { ... })`。
- 文档加载：`$(document).ready(function() { ... })` 或 `$(function() { ... })`。

#### 替代方案
- **替代库**：
- **bling.js**：轻量级替代方案。
- **SizzleJS**：专注于 CSS 选择器。
- **原生 JavaScript**：直接使用 `querySelectorAll()` 和 `vanilla JS`。

#### 参考资料
- **官方文档**：[jQuery 官网](https://jquery.com)。
- **教程**：[w3schools](https://www.w3schools.com/jquery/)。
- **比较**：[jQuery vs Vanilla JS](https://www.maxcdn.com/wayne-dahl-jquery-vanilla-js/)。

#### 总结
jQuery 是一个强大且简洁的 JavaScript 库，通过封装常用功能，极大简化了前端开发工作。其核心优势在于跨浏览器兼容性、链式调用语法和丰富的功能集合，适合快速开发和维护复杂的 web 应用。