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

jQuery 与 Vue 对比

详细对比jQuery与Vue两种前端框架的区别，包括设计理念、使用场景、性能、学习曲线等方面的分析，帮助开发者选择合适的前端技术栈。

设计理念对比

jQuery：命令式编程

jQuery 采用命令式编程范式，开发者需要明确告诉浏览器"如何做"。每一步操作都需要手动编写代码，直接操作 DOM 元素。

// jQuery 示例
$("#button").click(function() {
  $("#content").text("Hello World");
  $("#content").css("color", "red");
});

Vue：声明式编程

Vue 采用声明式编程范式，开发者只需要描述"想要什么"，框架会自动处理底层的 DOM 操作。

// Vue 示例
<template>
  <div>
    <button @click="updateContent">点击</button>
    <div :style="{ color: contentColor }">{{ content }}</div>
  </div>
</template>

核心差异

1. 数据绑定

jQuery：手动获取和设置数据

<script>
$("#input").on("input", function() {
  var value = $(this).val();
  $("#display").text(value);
});
</script>

Vue：自动双向绑定

<input v-model="message">
<p>{{ message }}</p>

2. 组件化

jQuery：不支持组件化，代码重复度高

<div class="user-card">
  <span class="name">张三</span>
  <span class="age">25</span>
</div>
<div class="user-card">
  <span class="name">李四</span>
  <span class="age">30</span>
</div>

Vue：组件化开发，代码复用性强

<user-card name="张三" age="25"></user-card>
<user-card name="李四" age="30"></user-card>

3. 状态管理

jQuery：状态分散，难以追踪

var count = 0;
$("#button").click(function() {
  count++;
  $("#count").text(count);
});

Vue：集中式状态管理

data() {
  return {
    count: 0
  }
}

性能对比

jQuery

  • 直接操作真实 DOM，频繁操作会导致性能问题
  • 适合简单页面，复杂场景下性能不佳
  • 没有虚拟 DOM 优化

Vue

  • 使用虚拟 DOM，减少真实 DOM 操作
  • Diff 算法高效更新视图
  • 适合复杂应用，性能更优

学习曲线

方面jQueryVue
入门难度⭐ 简单⭐⭐ 中等
概念理解⭐ 简单⭐⭐⭐ 较难
生态学习⭐ 简单⭐⭐⭐ 较难
调试难度⭐⭐ 中等⭐⭐ 中等

适用场景

jQuery 适用场景

  • 简单的官网展示页
  • 需要快速原型的项目
  • 传统项目维护
  • 简单的表单验证
  • 轮播图、弹窗等简单交互

Vue 适用场景

  • 中大型单页应用
  • 需要组件化开发的项目
  • 复杂的数据交互
  • 需要状态管理的应用
  • 团队协作开发

实战对比示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 与 Vue 对比示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  h2 {
    color: #2c3e50;
    margin-top: 0;
  }
  .comparison-box {
    display: flex;
    gap: 20px;
    margin-top: 15px;
  }
  .code-box {
    flex: 1;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    border: 2px solid #ddd;
  }
  .code-box h3 {
    margin-top: 0;
    color: #3498db;
  }
  .code-box.vue h3 {
    color: #42b883;
  }
  input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 5px 0;
    width: 100%;
    box-sizing: border-box;
  }
  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  button:hover {
    background-color: #2980b9;
  }
  .result {
    margin-top: 10px;
    padding: 10px;
    background-color: #e8f5e9;
    border-radius: 5px;
  }
  .feature-list {
    list-style: none;
    padding: 0;
  }
  .feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }
  .feature-list li:last-child {
    border-bottom: none;
  }
  .tag {
    display: inline-block;
    padding: 3px 8px;
    margin-right: 5px;
    border-radius: 3px;
    font-size: 12px;
    color: white;
  }
  .tag.jquery { background-color: #0769ad; }
  .tag.vue { background-color: #42b883; }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery 与 Vue 框架对比</h1>

  <div class="section">
    <h2>核心特性对比</h2>
    <div class="comparison-box">
      <div class="code-box">
        <h3>jQuery</h3>
        <ul class="feature-list">
          <li><span class="tag jquery">命令式编程</span> 手动操作 DOM</li>
          <li><span class="tag jquery">直接操作</span> 无虚拟 DOM</li>
          <li><span class="tag jquery">简单直观</span> 学习曲线平缓</li>
          <li><span class="tag jquery">灵活自由</span> 无强制规范</li>
          <li><span class="tag jquery">插件丰富</span> 生态成熟</li>
        </ul>
      </div>
      <div class="code-box vue">
        <h3>Vue</h3>
        <ul class="feature-list">
          <li><span class="tag vue">声明式编程</span> 数据驱动视图</li>
          <li><span class="tag vue">虚拟 DOM</span> 高效渲染</li>
          <li><span class="tag vue">组件化</span> 代码复用性强</li>
          <li><span class="tag vue">响应式</span> 自动更新</li>
          <li><span class="tag vue">生态完善</span> 工具链成熟</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="section">
    <h2>双向绑定对比</h2>
    <div class="comparison-box">
      <div class="code-box">
        <h3>jQuery 实现</h3>
        <input type="text" id="jqueryInput" placeholder="输入内容">
        <div class="result" id="jqueryResult">等待输入...</div>
      </div>
      <div class="code-box vue">
        <h3>Vue 实现</h3>
        <div id="vueApp">
          <input type="text" v-model="message" placeholder="输入内容">
          <div class="result">{{ message || '等待输入...' }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <h2>列表渲染对比</h2>
    <div class="comparison-box">
      <div class="code-box">
        <h3>jQuery 实现</h3>
        <button onclick="addJQueryItem()">添加项目</button>
        <div id="jqueryList" class="result"></div>
      </div>
      <div class="code-box vue">
        <h3>Vue 实现</h3>
        <div id="vueApp2">
          <button @click="addItem">添加项目</button>
          <div class="result">
            <div v-for="(item, index) in items" :key="index">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <h2>条件渲染对比</h2>
    <div class="comparison-box">
      <div class="code-box">
        <h3>jQuery 实现</h3>
        <button onclick="toggleJQueryContent()">切换显示</button>
        <div id="jqueryToggle" class="result" style="display: none;">
          这是隐藏的内容
        </div>
      </div>
      <div class="code-box vue">
        <h3>Vue 实现</h3>
        <div id="vueApp3">
          <button @click="show = !show">切换显示</button>
          <div v-if="show" class="result">
            这是隐藏的内容
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// jQuery 实现
$(document).ready(function() {
  // 双向绑定
  $("#jqueryInput").on("input", function() {
    $("#jqueryResult").text($(this).val());
  });

  // 列表渲染
  var jqueryItems = ["项目 1", "项目 2", "项目 3"];
  renderJQueryList();

  function renderJQueryList() {
    $("#jqueryList").empty();
    jqueryItems.forEach(function(item) {
      $("#jqueryList").append("<div>" + item + "</div>");
    });
  }

  window.addJQueryItem = function() {
    var newItem = "项目 " + (jqueryItems.length + 1);
    jqueryItems.push(newItem);
    renderJQueryList();
  };

  // 条件渲染
  window.toggleJQueryContent = function() {
    $("#jqueryToggle").slideToggle();
  };
});

// Vue 实现
const { createApp, ref } = Vue;

// Vue 应用 1：双向绑定
createApp({
  setup() {
    const message = ref('');
    return { message };
  }
}).mount('#vueApp');

// Vue 应用 2：列表渲染
createApp({
  setup() {
    const items = ref(['项目 1', '项目 2', '项目 3']);
    const addItem = () => {
      items.value.push('项目 ' + (items.value.length + 1));
    };
    return { items, addItem };
  }
}).mount('#vueApp2');

// Vue 应用 3：条件渲染
createApp({
  setup() {
    const show = ref(false);
    return { show };
  }
}).mount('#vueApp3');
</script>

</body>
</html>

选择建议

选择 jQuery 的情况

  • 项目规模小，交互简单
  • 需要快速原型开发
  • 团队成员对现代框架不熟悉
  • 维护历史遗留项目
  • 预算有限，不想引入复杂工具链

选择 Vue 的情况

  • 构建中大型单页应用
  • 需要组件化开发
  • 复杂的数据交互和状态管理
  • 团队协作开发
  • 长期维护的项目

总结

jQuery 和 Vue 代表了两种不同的前端开发理念。jQuery 适合简单场景，上手快、灵活度高；Vue 适合复杂应用，提供了完整的解决方案。选择哪种技术，应该基于项目需求、团队技术栈和长期维护成本来综合考虑。

上一章：jQuery 与现代前端
下一章：jQuery 与 React 对比