jQuery 介绍

jQuery 与现代前端

jQuery 与 Vue 对比

jQuery 与 React 对比

安装方式概览

下载 jQuery

CDN 引入方式

NPM 安装方式

开发版与生产版区别

版本选择与升级

jQuery 基础语法

jQuery 符号

文档就绪函数

链式调用

jQuery 对象与 DOM 对象

对象相互转换

jQuery 选择器

基本选择器

层次选择器

过滤选择器

表单选择器

属性选择器

内容选择器

CDN 引入方式

什么是 CDN

CDN（Content Delivery Network，内容分发网络）是一种分布式网络服务，通过将内容缓存到离用户最近的服务器上，提高访问速度和可靠性。

使用 CDN 引入 jQuery 的优势：

加载速度快：CDN 服务器分布全球，用户就近访问
自动缓存：浏览器会缓存 CDN 资源，再次访问时加载更快
节省带宽：无需下载文件到本地服务器
高可用性：CDN 提供多个节点，单个节点故障不影响使用
自动更新：可以使用最新版本

常用 jQuery CDN 服务商

1. jQuery 官方 CDN

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

特点：

官方提供，版本更新及时
全球 CDN 节点
支持 HTTPS

2. 百度 CDN

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

特点：

国内访问速度快
节点覆盖全国
稳定可靠

3. 又拍云 CDN

<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

特点：

国内 CDN 服务商
访问速度快
免费使用

4. 新浪 CDN

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

特点：

新浪提供
国内访问稳定
版本较旧

5. Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

特点：

Google 提供
全球节点
国内可能无法访问

6. Microsoft CDN

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>

特点：

微软提供
全球节点
稳定可靠

7. cdnjs CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

特点：

开源 CDN
库文件丰富
更新及时

8. jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

特点：

支持 NPM 包
自动版本选择
性能优秀

CDN 引入示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery CDN 引入示例</title>
<style>
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .cdn-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .cdn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
  }
  .cdn-card {
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: all 0.3s;
  }
  .cdn-card:hover {
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .cdn-card h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
  }
  .cdn-card p {
    margin: 5px 0;
    font-size: 12px;
    color: #7f8c8d;
  }
  .test-area {
    margin-top: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    border: 2px dashed #3498db;
  }
  .status-box {
    margin-top: 15px;
    padding: 15px;
    border-radius: 5px;
    display: none;
  }
  .status-box.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }
  .status-box.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }
  .status-box.loading {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery CDN 引入测试</h1>

  <div class="cdn-section">
    <h3>选择 CDN 服务商</h3>
    <p>点击下方卡片测试 CDN 连接：</p>
    <div class="cdn-grid">
      <div class="cdn-card" onclick="testCDN('https://code.jquery.com/jquery-3.6.0.min.js', '官方 CDN')">
        <h4>官方 CDN</h4>
        <p>code.jquery.com</p>
        <p>版本最新，全球节点</p>
      </div>
      <div class="cdn-card" onclick="testCDN('https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js', '百度 CDN')">
        <h4>百度 CDN</h4>
        <p>apps.bdimg.com</p>
        <p>国内访问快速</p>
      </div>
      <div class="cdn-card" onclick="testCDN('https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js', '又拍云 CDN')">
        <h4>又拍云 CDN</h4>
        <p>upcdn.b0.upaiyun.com</p>
        <p>免费 CDN 服务</p>
      </div>
      <div class="cdn-card" onclick="testCDN('https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js', '新浪 CDN')">
        <h4>新浪 CDN</h4>
        <p>lib.sinaapp.com</p>
        <p>新浪提供服务</p>
      </div>
      <div class="cdn-card" onclick="testCDN('https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', 'Google CDN')">
        <h4>Google CDN</h4>
        <p>ajax.googleapis.com</p>
        <p>全球 CDN 节点</p>
      </div>
      <div class="cdn-card" onclick="testCDN('https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js', 'Microsoft CDN')">
        <h4>Microsoft CDN</h4>
        <p>ajax.aspnetcdn.com</p>
        <p>微软提供服务</p>
      </div>
      <div class="cdn-card" onclick="testCDN('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', 'cdnjs CDN')">
        <h4>cdnjs CDN</h4>
        <p>cdnjs.cloudflare.com</p>
        <p>开源库 CDN</p>
      </div>
      <div class="cdn-card" onclick="testCDN('https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js', 'jsDelivr CDN')">
        <h4>jsDelivr CDN</h4>
        <p>cdn.jsdelivr.net</p>
        <p>支持 NPM 包</p>
      </div>
    </div>
  </div>

  <div class="cdn-section">
    <h3>CDN 测试结果</h3>
    <div class="test-area">
      <div id="cdnStatus" class="status-box"></div>
      <div id="versionInfo" style="margin-top: 15px; padding: 15px; background-color: #e8f5e9; border-radius: 5px; display: none;"></div>
    </div>
  </div>

  <div class="cdn-section">
    <h3>jQuery 功能测试</h3>
    <button onclick="testFunction()" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">测试 jQuery 功能</button>
    <div id="functionTest" style="margin-top: 15px; padding: 15px; background-color: #e8f5e9; border-radius: 5px; display: none;"></div>
  </div>
</div>

<script>
function testCDN(url, name) {
  $("#cdnStatus").removeClass("success error loading").addClass("loading").show().html(`
    <p><strong>正在测试 ${name}...</strong></p>
    <p>URL: ${url}</p>
  `);
  $("#versionInfo").hide();
  
  $.getScript(url)
    .done(function() {
      $("#cdnStatus").removeClass("loading error").addClass("success").html(`
        <p><strong>✓ ${name} 连接成功！</strong></p>
        <p>URL: ${url}</p>
      `);
      $("#versionInfo").show().html(`
        <p><strong>jQuery 版本：</strong>${$.fn.jquery}</p>
        <p><strong>浏览器：</strong>${navigator.userAgent}</p>
      `);
    })
    .fail(function() {
      $("#cdnStatus").removeClass("loading success").addClass("error").html(`
        <p><strong>✗ ${name} 连接失败</strong></p>
        <p>URL: ${url}</p>
        <p>请检查网络连接或尝试其他 CDN</p>
      `);
      $("#versionInfo").hide();
    });
}

function testFunction() {
  if (typeof $ === 'undefined') {
    alert("请先选择并测试一个 CDN");
    return;
  }
  
  $("#functionTest").show().html(`
    <p><strong>✓ jQuery 功能正常</strong></p>
    <p>版本：${$.fn.jquery}</p>
    <p>选择器测试：${$("h1").length} 个 h1 元素</p>
    <p>当前时间：${new Date().toLocaleString()}</p>
  `);
}
</script>

</body>
</html>

CDN 使用建议

1. 国内项目推荐

对于国内项目，优先选择以下 CDN：

百度 CDN：访问速度快，稳定可靠
又拍云 CDN：免费服务，性能优秀
官方 CDN：版本最新，但可能较慢

2. 国际项目推荐

对于国际项目，推荐以下 CDN：

官方 CDN：版本最新，全球节点
Google CDN：性能优秀，但国内可能无法访问
cdnjs CDN：库文件丰富，更新及时

3. 多 CDN 备份

为了确保高可用性，可以使用多个 CDN 作为备份：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if (typeof jQuery === 'undefined') {
  document.write('<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"><\/script>');
}
</script>

4. 版本选择

开发环境：使用最新稳定版
生产环境：使用经过测试的稳定版本
长期支持：选择 LTS（长期支持）版本

CDN 与本地文件对比

特性	CDN	本地文件
加载速度	快（就近节点）	慢（需下载）
网络依赖	需要	不需要
缓存优势	自动缓存	需手动配置
离线使用	不支持	支持
版本管理	自动更新	手动管理
成本	免费	占用服务器空间

总结

使用 CDN 引入 jQuery 是推荐的方式，特别是对于在线项目。选择 CDN 时应考虑：

访问速度：选择离用户最近的 CDN
稳定性：选择可靠的 CDN 服务商
版本更新：选择及时更新的 CDN
备用方案：准备多个 CDN 作为备份

对于国内项目，推荐使用百度 CDN 或又拍云 CDN；对于国际项目，推荐使用官方 CDN 或 cdnjs CDN。

上一章：下载 jQuery

下一章：NPM 安装方式