介绍如何从jQuery官方网站下载jQuery库文件，包括不同版本的下载链接和选择建议。
jQuery 的官方下载地址是：https://jquery.com/download/
在这个页面上，你可以找到所有版本的 jQuery 下载链接。
jQuery 提供了两种格式的下载文件：
或者：
jQuery 有三个主要版本系列：
| 版本 | IE 支持 | 文件大小 | 推荐场景 |
|---|---|---|---|
| 1.x | IE6+ | 较大 | 需要兼容旧版 IE |
| 2.x | IE9+ | 中等 | 不需要兼容 IE6-8 |
| 3.x | IE9+ | 较小 | 现代浏览器项目 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 下载指南</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.download-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
.download-btn {
display: inline-block;
padding: 12px 24px;
margin: 10px 5px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.download-btn:hover {
background-color: #2980b9;
}
.download-btn.min {
background-color: #2ecc71;
}
.download-btn.min:hover {
background-color: #27ae60;
}
.version-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.version-table th, .version-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.version-table th {
background-color: #3498db;
color: white;
}
.version-table tr:hover {
background-color: #f5f5f5;
}
.info-box {
padding: 15px;
background-color: #fff3cd;
border-left: 4px solid #ffc107;
border-radius: 5px;
margin: 15px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 下载指南</h1>
<div class="download-section">
<h3>jQuery 3.6.0 下载</h3>
<p>选择适合你需求的版本：</p>
<a href="https://code.jquery.com/jquery-3.6.0.js" class="download-btn" download>下载开发版</a>
<a href="https://code.jquery.com/jquery-3.6.0.min.js" class="download-btn min" download>下载生产版</a>
<div class="info-box">
<p><strong>开发版</strong>：包含注释和格式化代码，便于调试</p>
<p><strong>生产版</strong>：代码压缩，体积更小，适合线上使用</p>
</div>
</div>
<div class="download-section">
<h3>版本对比</h3>
<table class="version-table">
<thead>
<tr>
<th>版本</th>
<th>IE 支持</th>
<th>文件大小</th>
<th>推荐场景</th>
</tr>
</thead>
<tbody>
<tr>
<td>jQuery 1.x</td>
<td>IE6+</td>
<td>约 290KB</td>
<td>需要兼容旧版 IE</td>
</tr>
<tr>
<td>jQuery 2.x</td>
<td>IE9+</td>
<td>约 240KB</td>
<td>不需要兼容 IE6-8</td>
</tr>
<tr>
<td>jQuery 3.x</td>
<td>IE9+</td>
<td>约 280KB</td>
<td>现代浏览器项目</td>
</tr>
</tbody>
</table>
</div>
<div class="download-section">
<h3>下载测试</h3>
<button onclick="testDownload()" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">测试下载链接</button>
<div id="downloadTest" style="margin-top: 15px; padding: 15px; background-color: #e8f5e9; border-radius: 5px; display: none;"></div>
</div>
</div>
<script>
function testDownload() {
var urls = [
'https://code.jquery.com/jquery-3.6.0.js',
'https://code.jquery.com/jquery-3.6.0.min.js'
];
$("#downloadTest").show().html("<p>正在测试下载链接...</p>");
var completed = 0;
var results = [];
urls.forEach(function(url) {
$.get(url)
.done(function() {
var type = url.includes('.min.js') ? '生产版' : '开发版';
results.push(`<p><strong>✓ ${type}</strong>：${url}</p>`);
completed++;
if (completed === urls.length) {
$("#downloadTest").html(results.join('') + '<p><strong>所有下载链接均可正常访问！</strong></p>');
}
})
.fail(function() {
completed++;
if (completed === urls.length) {
$("#downloadTest").html("<p><strong>✗ 部分链接无法访问，请检查网络连接</strong></p>");
}
});
});
}
</script>
</body>
</html>
你也可以从 GitHub 仓库下载 jQuery：
如果你使用 Node.js，可以通过 NPM 下载：
npm install jquery
bower install jquery
下载完成后，将文件放到项目的合适位置，然后在 HTML 中引入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用本地 jQuery</title>
</head>
<body>
<h1>jQuery 本地文件测试</h1>
<button id="testBtn">点击测试</button>
<p id="result"></p>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#testBtn").click(function(){
$("#result").text("本地 jQuery 文件加载成功！");
});
});
</script>
</body>
</html>
下载 jQuery 是使用它的第一步。根据你的需求选择合适的版本：
下载后，记得将文件放在项目的合适位置，并在 HTML 中正确引入。