jQuery 核心 API 与实战应用指南
引言
jQuery 是一个轻量级的 JavaScript 库,自发布以来迅速成为 Web 开发中不可或缺的工具。它通过简洁的语法和强大的功能,简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 请求的实现。jQuery 允许开发者以更少的代码完成复杂任务,提升开发效率。此外,它具备良好的跨浏览器兼容性,让开发者无需过多关注不同浏览器间的差异,能更专注于构建优质的用户体验。
环境准备
使用 jQuery 前,首先需要引入其 JavaScript 文件。你可以从官网下载最新版本,或者使用 CDN。将下载的 jQuery 文件保存至项目目录,并通过 <script> 标签引入即可。
示例中使用的是 3.7.1 版本,实际开发请根据需求选择。
<script src="./jquery-3.7.1.js" type="text/javascript"></script>
对象基础
1. 包装级对象与 DOM 对象
在 jQuery 中,我们通常操作的是 jQuery 包装集(Wrapper Object),它与原生 DOM 对象之间可以相互转换。
// 获取 DOM 元素并转为 jQuery 对象
var domDiv = document.querySelector('#mydiv');
var $div = $(domDiv);
// jQuery 对象转 DOM 对象
var $div = $('#mydiv');
var dom = $div[0]; // 或 $div.get(0)
2. 选择器
2.1 基础选择器
- 元素选择器:
$('div') - 类选择器:
$('.cdiv') - ID 选择器:
$('#idiv') - 通用选择器:
$(' * ' ) - 混合选择器:
$('div, p')
let idiv = $('#idiv');
let cdiv = $('.cdiv');
let div = $('div');
divAll = $();
divSome = $();
.(idiv, cdiv, div);


