jQuery 介绍
jQuery 与现代前端
jQuery 与 Vue 对比
jQuery 与 React 对比
安装方式概览
下载 jQuery
CDN 引入方式
NPM 安装方式
开发版与生产版区别
版本选择与升级
jQuery 基础语法
jQuery 符号
文档就绪函数
链式调用
jQuery 对象与 DOM 对象
对象相互转换
jQuery 选择器
基本选择器
层次选择器
过滤选择器
表单选择器
属性选择器
内容选择器
  1. jQuery 基础入门
  2. 安装方式概览
  3. NPM 安装方式

NPM 安装方式

什么是 NPM

NPM（Node Package Manager）是 Node.js 的包管理器，也是世界上最大的软件库。通过 NPM，可以方便地安装、更新和管理 jQuery 等前端库。

NPM 安装 jQuery

前置要求

使用 NPM 安装 jQuery 前，需要先安装 Node.js：

  1. 访问 https://nodejs.org/
  2. 下载并安装 LTS 版本
  3. 安装完成后，在命令行输入 npm -v 验证安装

安装命令

# 安装最新版本
npm install jquery

# 安装指定版本
npm install jquery@3.6.0

# 安装到开发依赖
npm install --save-dev jquery

# 全局安装（不推荐）
npm install -g jquery

package.json 配置

安装完成后，package.json 会自动添加依赖：

{
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

或开发依赖：

{
  "devDependencies": {
    "jquery": "^3.6.0"
  }
}

在项目中使用 jQuery

1. 传统方式引入

<script src="node_modules/jquery/dist/jquery.min.js"></script>

2. ES6 模块引入

import $ from 'jquery';

$(document).ready(function(){
  console.log("jQuery 引入成功");
});

3. CommonJS 引入

const $ = require('jquery');

$(document).ready(function(){
  console.log("jQuery 引入成功");
});

4. AMD 引入

define(['jquery'], function($) {
  $(document).ready(function(){
    console.log("jQuery 引入成功");
  });
});

完整示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery NPM 安装示例</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Courier New', monospace;
  }
  .code-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #1e1e1e;
    border-radius: 8px;
    color: #d4d4d4;
  }
  .code-section h3 {
    color: #4ec9b0;
    margin-top: 0;
  }
  .code-block {
    background-color: #2d2d2d;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-top: 10px;
  }
  .command {
    color: #ce9178;
  }
  .comment {
    color: #6a9955;
  }
  .keyword {
    color: #569cd6;
  }
  .string {
    color: #ce9178;
  }
  .info-box {
    padding: 15px;
    background-color: #2d2d2d;
    border-left: 4px solid #4ec9b0;
    margin: 15px 0;
  }
  .btn {
    padding: 10px 20px;
    margin: 5px;
    background-color: #4ec9b0;
    color: #1e1e1e;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
  }
  .btn:hover {
    background-color: #3db892;
  }
  #output {
    margin-top: 15px;
    padding: 15px;
    background-color: #2d2d2d;
    border-radius: 5px;
    min-height: 100px;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery NPM 安装指南</h1>

  <div class="code-section">
    <h3>1. 安装 Node.js</h3>
    <div class="code-block">
      <span class="comment"># 访问 https://nodejs.org/ 下载安装</span><br>
      <span class="comment"># 验证安装</span><br>
      <span class="command">node -v</span><br>
      <span class="command">npm -v</span>
    </div>
  </div>

  <div class="code-section">
    <h3>2. 初始化项目</h3>
    <div class="code-block">
      <span class="comment"># 创建项目目录</span><br>
      <span class="command">mkdir my-jquery-project</span><br>
      <span class="command">cd my-jquery-project</span><br><br>
      <span class="comment"># 初始化 npm 项目</span><br>
      <span class="command">npm init -y</span>
    </div>
  </div>

  <div class="code-section">
    <h3>3. 安装 jQuery</h3>
    <div class="code-block">
      <span class="comment"># 安装最新版本</span><br>
      <span class="command">npm install jquery</span><br><br>
      <span class="comment"># 安装指定版本</span><br>
      <span class="command">npm install jquery@3.6.0</span><br><br>
      <span class="comment"># 安装到开发依赖</span><br>
      <span class="command">npm install --save-dev jquery</span>
    </div>
  </div>

  <div class="code-section">
    <h3>4. package.json 配置</h3>
    <div class="code-block">
      <span class="string">{</span><br>
      &nbsp;&nbsp;<span class="string">"name"</span>: <span class="string">"my-jquery-project"</span>,<br>
      &nbsp;&nbsp;<span class="string">"version"</span>: <span class="string">"1.0.0"</span>,<br>
      &nbsp;&nbsp;<span class="string">"dependencies"</span>: <span class="string">{</span><br>
      &nbsp;&nbsp;&nbsp;&nbsp;<span class="string">"jquery"</span>: <span class="string">"^3.6.0"</span><br>
      &nbsp;&nbsp;<span class="string">}</span><br>
      <span class="string">}</span>
    </div>
  </div>

  <div class="code-section">
    <h3>5. 使用 jQuery</h3>
    <div class="code-block">
      <span class="comment">// ES6 模块引入</span><br>
      <span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">'jquery'</span>;<br><br>
      <span class="comment">// CommonJS 引入</span><br>
      <span class="keyword">const</span> $ = <span class="keyword">require</span>(<span class="string">'jquery'</span>);
    </div>
  </div>

  <div class="code-section">
    <h3>6. 测试安装</h3>
    <button class="btn" onclick="checkInstallation()">检查 jQuery</button>
    <button class="btn" onclick="testFeatures()">测试功能</button>
    <div id="output"></div>
  </div>
</div>

<script>
function checkInstallation() {
  var output = $("#output");
  
  if (typeof $ !== 'undefined') {
    output.html(`
      <p style="color: #4ec9b0;">✓ jQuery 已成功安装</p>
      <p>版本：${$.fn.jquery}</p>
      <p>安装路径：node_modules/jquery/dist/</p>
    `);
  } else {
    output.html(`
      <p style="color: #f44747;">✗ jQuery 未安装</p>
      <p>请运行：npm install jquery</p>
    `);
  }
}

function testFeatures() {
  var output = $("#output");
  
  if (typeof $ === 'undefined') {
    output.html("<p style='color: #f44747;'>请先安装 jQuery</p>");
    return;
  }
  
  var features = [
    "选择器: " + $("h1").length + " 个 h1 元素",
    "each 方法: " + ($.each ? "支持" : "不支持"),
    "ajax 方法: " + ($.ajax ? "支持" : "不支持"),
    "animate 方法: " + ($.fn.animate ? "支持" : "不支持"),
    "当前时间: " + new Date().toLocaleString()
  ];
  
  output.html(`
    <p style="color: #4ec9b0;">✓ jQuery 功能测试</p>
    ${features.map(f => "<p>" + f + "</p>").join('')}
  `);
}
</script>

</body>
</html>

常用 NPM 命令

# 查看已安装的包
npm list jquery

# 查看包信息
npm info jquery

# 更新 jQuery
npm update jquery

# 卸载 jQuery
npm uninstall jquery

# 清除缓存
npm cache clean --force

使用构建工具

Webpack 配置

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: {
            exposes: ['$', 'jQuery']
          }
        }]
      }
    ]
  }
};

Vite 配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      jquery: 'jquery/dist/jquery.min.js'
    }
  }
})

总结

通过 NPM 安装 jQuery 是现代前端项目的推荐方式，具有以下优势：

  1. 版本管理：方便管理和更新版本
  2. 依赖管理：自动处理依赖关系
  3. 模块化：支持 ES6、CommonJS 等模块系统
  4. 构建集成：与 Webpack、Vite 等构建工具无缝集成

对于使用构建工具的现代项目，强烈推荐使用 NPM 安装 jQuery。

上一章：CDN 引入方式
下一章：开发版与生产版区别