jQuery 安装使用教程
一、jQuery 简介
jQuery 是一个快速、小巧、功能丰富的 JavaScript 库，简化了 HTML 文档操作、事件处理、动画以及 AJAX 交互。它兼容各种浏览器，是许多网页项目和插件的基础。
二、jQuery 安装方式
2.1 使用 CDN（推荐）
直接在 HTML 页面中引入 CDN 链接，无需下载：
<head><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
或使用国内镜像（如阿里云）：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
2.2 本地下载
- 下载地址：https://jquery.com/download/
- 选择稳定版下载
.min.js文件 - 保存至本地目录并引入：
<script src="js/jquery.min.js"></script>
2.3 使用 npm 安装（适用于前端项目）
npm install jquery
在 JavaScript 文件中引入：
import $ from "jquery";
三、编写第一个 jQuery 示例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jQuery 示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body><h1 id="title">你好，jQuery！</h1>
<button id="btn">点击变色</button><script>$(document).ready(function () {$("#btn").click(function () {$("#title").css("color", "red");});});
</script></body>
</html>
四、常用 jQuery 语法
| 功能 | 示例 |
|---|---|
| 文档加载完毕 | $(document).ready(function(){}) |
| 选择器 | $("#id")、$(".class")、$("div") |
| 设置 CSS 样式 | $("#box").css("color", "blue") |
| 获取/设置文本 | $("#box").text() / .text("内容") |
| 获取/设置 HTML | $("#box").html() / .html("<b>内容</b>") |
| 添加事件监听 | $("#btn").click(function(){}) |
| AJAX 请求 | $.get()、$.post()、$.ajax() |
五、常用动画效果
$("#box").hide();
$("#box").show();
$("#box").fadeIn();
$("#box").fadeOut();
$("#box").slideUp();
$("#box").slideDown();
六、jQuery 插件使用
jQuery 拥有丰富的插件生态，例如：
- jQuery UI（交互组件库）
- Slick（轮播图）
- Select2（下拉框增强）
- DataTables（表格处理）
使用方法：
<link rel="stylesheet" href="插件.css">
<script src="jquery.min.js"></script>
<script src="插件.js"></script>
七、常见问题
Q1: $ is not defined 报错？
- jQuery 未正确加载
- jQuery 引入应在其他脚本之前
Q2: jQuery 与其他库冲突？
- 可使用
jQuery.noConflict()来避免$冲突
八、学习资源推荐
- jQuery 官方网站
- 菜鸟教程 jQuery
- W3School jQuery 教程
- jQuery API 文档
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
