jQuery开发教程从哪开始学？-杰瑞科技汇

jQuery 开发教程

第一部分：jQuery 简介
- 什么是 jQuery？
- 为什么使用 jQuery？（优势）
- 如何引入 jQuery？
第二部分：核心基础
- $(document).ready() - 代码执行的黄金法则
- jQuery 选择器 - 定位元素的利器
- jQuery 对象 vs. DOM 对象
- jQuery 链式操作
第三部分：操作 DOM
- 内容操作
- 属性操作
- CSS 样式操作
- 元素遍历与创建
第四部分：事件处理
- 常用事件
- on() 方法（现代事件绑定）
- 事件冒泡与阻止
第五部分：动画与效果
- 基础动画
- animate() 自定义动画
第六部分：AJAX - 异步数据交互
- $.ajax() - 核心方法
- $.get() 和 $.post() - 简化方法
第七部分：工具方法与插件
- 常用工具方法
- 什么是 jQuery 插件？
- 如何使用插件？
第八部分：最佳实践与现代前端
- 性能优化
- jQuery 与现代框架（Vue, React）的关系
第九部分：实战项目 - 一个简单的待办事项列表
- 项目需求
- 步骤实现
第十部分：学习资源

第一部分：jQuery 简介

什么是 jQuery？

jQuery 是一个快速、小型且功能丰富的 JavaScript 库，它通过 “写更少的代码，做更多的事情”（Write Less, Do More）的理念，极大地简化了 JavaScript 的 DOM 操作、事件处理、动画和 AJAX 交互。

（图片来源网络，侵删）

你可以把它想象成给 JavaScript 提供了一套更简洁、更强大的工具箱。

为什么使用 jQuery？（优势）

简洁的语法：用几行 jQuery 代码就能实现复杂的 JS 功能。
跨浏览器兼容性：jQuery 帮你处理了不同浏览器之间的差异（尤其是 IE），你无需编写额外的兼容代码。
强大的选择器：类似 CSS 的选择器，让你能轻松精确地找到页面上的任何元素。
丰富的插件生态：有大量现成的插件可供使用，如轮播图、日历、图表等，能快速集成功能。
出色的文档和社区：学习资源非常丰富，遇到问题很容易找到解决方案。

如何引入 jQuery？

最简单的方式是通过 CDN（内容分发网络）引入，这样用户可以从离他们最近的服务器加载 jQuery，速度更快。

在 HTML 文件的 <head> 或 <body> 标签结束前 </body> 之前，加入以下代码：

<!-- 引入 jQuery，推荐使用最新稳定版 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

提示：推荐将 <script> 标签放在 </body> 之前，这样可以确保在脚本执行时，页面的 HTML 结构已经完全加载。
（图片来源网络，侵删）

第二部分：核心基础

`$(document).ready()` - 代码执行的黄金法则

在 jQuery 中，我们通常希望确保 HTML 文档完全加载后再执行我们的脚本。$(document).ready() 就是用来做这件事的。

写法一（推荐）：

$(document).ready(function() {
  // 在这里写你的 jQuery 代码
  console.log("文档已加载，jQuery 代码可以执行了！");
});

简写（最常用）：

$(function() {
  // 在这里写你的 jQuery 代码
  console.log("文档已加载，jQuery 代码可以执行了！");
});

jQuery 选择器 - 定位元素的利器

jQuery 的核心就是选择器，它和 CSS 选择器语法非常相似。

（图片来源网络，侵删）

选择器	示例	描述
基本选择器	`$("div")`	选择所有 `<div>` 元素
	`$(".my-class")`	选择所有 `class="my-class"` 的元素
	`$("#my-id")`	选择 `id="my-id"` 的唯一元素
	`$("div, p, .my-class")`	选择所有 `<div>`, `<p>` 和 `class="my-class"` 的元素
层次选择器	`$("div p")`	选择 `<div>` 内部的所有 `<p>` 元素（后代）
	`$("div > p")`	选择 `<div>` 的直接子元素 `<p>`
	`$(".prev + .next")`	选择 `class="prev"` 的下一个兄弟元素 `class="next"`
过滤选择器	`$("li:first")`	选择第一个 `<li>` 元素
	`$("li:last")`	选择最后一个 `<li>` 元素
	`$("li:even")`	选择索引为偶数的 `<li>` (从 0 开始)
	`$("li:odd")`	选择索引为奇数的 `<li>` (从 0 开始)
	`$("li:eq(2)")`	选择索引等于 2 的 `<li>` 元素
	`$(":input")`	选择所有表单输入元素

jQuery 对象 vs. DOM 对象

这是初学者最容易混淆的地方。

DOM 对象：这是浏览器原生提供的 JavaScript 对象，document.getElementById('myId') 返回的就是一个 DOM 对象。
jQuery 对象：这是 jQuery 库创建的对象，它包装了一个或多个 DOM 对象，并提供了 jQuery 特有的方法和属性。

关键区别：jQuery 对象不能直接使用 DOM 对象的方法（如 style.color），反之亦然。

如何转换？

jQuery 对象 -> DOM 对象：
- 使用索引：var domObj = $('#myId')[0];
- 使用 .get() 方法：var domObj = $('#myId').get(0);
DOM 对象 -> jQuery 对象：
- 用包装：var $jqueryObj = $(domObj);

约定：通常在变量名前加前缀来表示这是一个 jQuery 对象，var $myDiv = $('#myId');，这是一种良好的编码习惯。

jQuery 链式操作

jQuery 对象的方法大多会返回该对象本身，因此可以像链条一样连续调用多个方法。

// 非链式写法
$('p').css('color', 'red');
$('p').css('font-size', '14px');
$('p').show();
// 链式写法（更简洁）
$('p').css('color', 'red').css('font-size', '14px').show();

第三部分：操作 DOM

内容操作

方法	描述
`html()`	获取/设置元素的 HTML 内容
`text()`	获取/设置元素的纯文本内容
`val()`	获取/设置表单元素的值

示例：

// 获取 h1 的文本Text = $('h1').text();
console.log(titleText);
// 设置 p 的文本
$('p').text('这段文本被 jQuery 修改了。');
// 获取输入框的值
var inputValue = $('#myInput').val();
// 设置输入框的值
$('#myInput').val('新值');

属性操作

方法	描述
`attr()`	获取/设置元素的属性（如 `id`, `src`, `href`）
`removeAttr()`	移除元素的属性
`prop()`	获取/设置元素的 DOM 属性（如 `checked`, `disabled`）

示例：

// 获取 img 的 src 属性
var imgSrc = $('img').attr('src');
// 设置 a 标签的 href 属性
$('a').attr('href', 'https://www.jquery.com');
// 获取 checkbox 是否被选中
var isChecked = $('#myCheckbox').prop('checked');
// 设置 checkbox 为选中状态
$('#myCheckbox').prop('checked', true);

CSS 样式操作

方法	描述
`css()`	获取/设置单个或多个 CSS 样式
`addClass()`	添加一个或多个 CSS 类
`removeClass()`	移除一个或多个 CSS 类
`toggleClass()`	如果存在则移除，如果不存在则添加 CSS 类
`hasClass()`	检查是否包含某个 CSS 类

示例：

// 设置单个样式
$('div').css('background-color', 'lightblue');
// 设置多个样式
$('div').css({
  'background-color': 'lightblue',
  'border': '1px solid #ccc',
  'padding': '10px'
});
// 添加/移除类
$('div').addClass('highlight');
$('div').removeClass('highlight');
$('div').toggleClass('active'); // 点击一次添加，再点击一次移除

元素遍历与创建

方法	描述
`find()`	在当前元素的后代中查找元素
`parent()`	查找当前元素的直接父元素
`parents()`	查找当前元素的所有祖先元素
`children()`	查找当前元素的所有直接子元素
`siblings()`	查找当前元素的所有兄弟元素
`next()` / `prev()`	查找当前元素的下一个/上一个兄弟元素
`append()`	在元素内部末尾插入内容
`prepend()`	在元素内部开头插入内容
`after()`	在元素外部之后插入内容
`before()`	在元素外部之前插入内容
`remove()`	移除元素及其所有子元素
`empty()`	清空元素的子元素

示例：

// 创建新元素
var $newLink = $('<a href="#">新链接</a>');
// 将新元素添加到 #container 的末尾
$('#container').append($newLink);
// 在 #myP 前面插入一个标题
$('<h3>这是一个标题</h3>').before('#myP');
// 移除所有 class="temp" 的元素
$('.temp').remove();

第四部分：事件处理

常用事件

方法	描述
`click()`	点击事件
`hover()`	鼠标悬停事件
`mouseenter()` / `mouseleave()`	鼠标进入/离开事件
`mouseover()` / `mouseout()`	鼠标悬停/离开事件（会冒泡）
`on()`	通用事件绑定方法（推荐）
`off()`	解除事件绑定

示例：

// 点击按钮
$('#myButton').click(function() {
  alert('按钮被点击了！');
});
// 鼠标悬停
$('#myBox').hover(
  function() {
    $(this).css('background-color', 'yellow'); // 鼠标进入
  },
  function() {
    $(this).css('background-color', 'white'); // 鼠标离开
  }
);

`on()` 方法（现代事件绑定）

on() 是 jQuery 推荐的事件绑定方法，它非常强大，可以绑定多个事件，并且支持事件委托。

基本用法：

// 绑定单个事件
$('#myButton').on('click', function() {
  console.log('点击了！');
});
// 绑定多个事件
$('#myButton').on({
  'click': function() { console.log('点击了！'); },
  'mouseenter': function() { console.log('鼠标进入了！'); }
});

事件委托（Event Delegation）：当你需要给动态添加的元素绑定事件时，on() 就派上用场了，它可以将事件绑定到其父元素上，然后根据选择器来决定由哪个子元素来响应事件。

<ul id="parent-list">
  <li>项目 1</li>
  <li>项目 2</li>
</ul>
<button id="add-item">添加新项目</button>

// 给所有 li 绑定点击事件，包括未来动态添加的
$('#parent-list').on('click', 'li', function() {
  // $(this) 指向被点击的 li 元素
  $(this).css('color', 'red');
});
// 动态添加新项目
$('#add-item').click(function() {
  $('#parent-list').append('<li>新项目</li>');
});

事件冒泡与阻止

事件冒泡：当一个元素上的事件被触发时，该事件会从该元素开始，逐级向上（向父元素）传播。
阻止冒泡：有时我们不希望事件继续向上传播，可以使用 event.stopPropagation()。
阻止默认行为：点击链接时默认会跳转，可以使用 event.preventDefault()。

$('#myLink').on('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  event.stopPropagation(); // 阻止事件冒泡到父元素
  alert('链接被点击，但页面不会跳转。');
});

第五部分：动画与效果

jQuery 提供了多种简单易用的动画方法。

方法	描述
`show()` / `hide()`	显示/隐藏元素（不带动画）
`fadeIn()` / `fadeOut()`	淡入/淡出效果
`slideUp()` / `slideDown()`	向上/向下滑动效果
`slideToggle()`	切换滑动显示/隐藏状态
`toggle()`	切换显示/隐藏状态（不带动画）
`animate()`	执行自定义动画

示例：

// 点击按钮淡入/淡出一个盒子
$('#toggle-btn').click(function() {
  $('#my-box').fadeToggle(500); // 500ms 的动画时间
});
// 滑动效果
$('#slide-btn').click(function() {
  $('#my-box').slideToggle();
});

`animate()` 自定义动画

animate() 方法让你可以创建复杂的自定义动画。

// 将 div 的宽度变为 500px，高度变为 300px，并改变背景色
$('div').animate({
  width: '500px',
  height: '300px',
  backgroundColor: 'lightgreen' // 注意：对于颜色，需要引入 jQuery UI 或使用 CSS 过渡
}, 1000); // 动画持续 1 秒
// 相对值
$('div').animate({
  width: '+=100px', // 在当前宽度基础上增加 100px
  height: '+=50px'
});

第六部分：AJAX - 异步数据交互

AJAX 允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

`$.ajax()` - 核心方法

这是一个功能非常强大的方法,可以配置所有 AJAX 选项。

$.ajax({
  url: 'https://api.example.com/data', // 请求的 URL
  method: 'GET', // 请求方法 (GET, POST, PUT, DELETE)
  dataType: 'json', // 预期服务器返回的数据类型
  data: { id: 123 }, // 发送到服务器的数据
  success: function(response) {
    // 请求成功时执行的回调函数
    console.log('获取到数据:', response);
    $('#result').html('<p>' + response.name + '</p>');
  },
  error: function(xhr, status, error) {
    // 请求失败时执行的回调函数
    console.error('请求失败:', error);
    $('#result').html('<p>加载失败，请稍后重试。</p>');
  }
});

`$.get()` 和 `$.post()` - 简化方法

对于简单的 GET 和 POST 请求，可以使用这两个更简洁的方法。

$.get() 示例：

$.get('https://api.example.com/data', { id: 123 }, function(response) {
  console.log('GET 请求成功:', response);
});

$.post() 示例：

$.post('https://api.example.com/submit', { username: 'john', password: '123' }, function(response) {
  console.log('POST 请求成功:', response);
});

第七部分：工具方法与插件

常用工具方法

这些方法直接通过调用，不作用于特定元素。

方法	描述
`$.trim()`	去除字符串两端的空白字符
`$.each()`	遍历数组或对象
`$.inArray()`	查找元素在数组中的索引
`$.extend()`	合并两个或多个对象

示例：

var str = '  hello jQuery  ';
console.log($.trim(str)); // 输出: "hello jQuery"
var arr = ['apple', 'banana', 'orange'];
$.each(arr, function(index, value) {
  console.log(index + ': ' + value);
});
var obj1 = { a: 1 };
var obj2 = { b: 2 };
var merged = $.extend({}, obj1, obj2); // 合并对象
console.log(merged); // 输出: { a: 1, b: 2 }

什么是 jQuery 插件？

插件是扩展 jQuery 功能的第三方代码，它们可以添加新的方法、创建新的选择器或封装复杂的组件。

如何使用插件？

引入 jQuery：必须先引入 jQuery 库。
引入插件文件：在 jQuery 之后引入插件的 JS 和 CSS 文件。
调用插件方法：像使用 jQuery 原生方法一样调用插件。

示例：使用一个简单的轮播图插件 slick

<!-- 1. 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 2. 引入插件 CSS 和 JS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- HTML 结构 -->
<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
<script>
  // 3. 调用插件方法
  $(document).ready(function(){
    $('.my-slider').slick({
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      adaptiveHeight: true
    });
  });
</script>

第八部分：最佳实践与现代前端

性能优化

缓存 jQuery 对象：避免重复选择同一个元素。

// 不好的做法
$('#myDiv').css('color', 'red');
$('#myDiv').css('background', 'blue');
// 好的做法
var $myDiv = $('#myDiv');
$myDiv.css('color', 'red').css('background', 'blue');

使用事件委托：对于动态内容或大量元素的事件绑定，使用 on() 进行事件委托。
选择器优化：尽量使用 ID 和标签选择器，避免过度使用复杂的选择器。$('#myId') 比 $('.parent .child .grandchild #myId') 快得多。
链式调用：减少代码量，提高可读性。

jQuery 与现代框架的关系

jQuery 仍然有用：在许多项目中，特别是维护旧项目或需要快速开发小型工具时，jQuery 依然是一个非常高效的选择。
现代框架的趋势：Vue, React, Angular 等现代前端框架（也称为 MVVM 框架）采用了数据驱动和组件化的开发模式，它们通过操作虚拟 DOM 来更新视图，而不是像 jQuery 那样直接操作真实 DOM，这在处理大型、复杂应用时性能更好，逻辑更清晰。
共存：jQuery 可以和现代框架共存，但通常不推荐在一个组件中混用，因为它们操作 DOM 的方式可能会冲突，在框架项目中，会使用框架自己的方式来处理 DOM 和事件。

第九部分：实战项目 - 一个简单的待办事项列表

让我们用学到的知识来创建一个功能完整的待办事项列表。

功能需求：

在输入框中输入任务,点击“添加”按钮，任务出现在列表中。
每个任务项旁边有一个“删除”按钮，点击后可以删除该任务。
任务项可以标记为已完成（文字划掉）。

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">jQuery 待办事项列表</title>
  <style>
    body { font-family: sans-serif; }
    #todo-list { list-style: none; padding: 0; }
    #todo-list li { padding: 8px; border-bottom: 1px solid #ccc; }
    #todo-list li.completed { text-decoration: line-through; color: #999; }
    .delete-btn { float: right; color: red; cursor: pointer; }
  </style>
</head>
<body>
  <h1>我的待办事项</h1>
  <div>
    <input type="text" id="new-todo" placeholder="输入新任务...">
    <button id="add-btn">添加</button>
  </div>
  <ul id="todo-list"></ul>
  <!-- 引入 jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <!-- 引入我们的 JS 文件 -->
  <script src="app.js"></script>
</body>
</html>

JavaScript (app.js)

$(function() {
  // 1. 添加新任务
  $('#add-btn').on('click', function() {
    var todoText = $('#new-todo').val().trim();
    if (todoText === '') {
      alert('请输入任务内容！');
      return;
    }
    // 创建新的 li 元素
    var $newLi = $('<li></li>');
    $newLi.text(todoText);
    // 创建删除按钮
    var $deleteBtn = $('<span class="delete-btn">删除</span>');
    $newLi.append($deleteBtn);
    // 将新任务添加到列表
    $('#todo-list').append($newLi);
    // 清空输入框
    $('#new-todo').val('');
  });
  // 2. 使用事件委托处理删除和完成操作
  $('#todo-list').on('click', '.delete-btn', function() {
    // $(this) 指向被点击的 .delete-btn
    // .parent() 指向它的父元素 li
    $(this).parent().remove();
  });
  // 点击任务项本身来标记完成/未完成
  $('#todo-list').on('click', 'li', function(event) {
    // 防止点击 li 时也触发了 .delete-btn 的事件
    if ($(event.target).hasClass('delete-btn')) {
      return;
    }
    $(this).toggleClass('completed');
  });
  // 按回车键也可以添加任务
  $('#new-todo').on('keypress', function(e) {
    if (e.which === 13) { // 13 是回车键的键码
      $('#add-btn').click();
    }
  });
});

第十部分：学习资源

官方文档 (必看)：https://api.jquery.com/ - 最权威、最准确的参考资料。
jQuery 官方网站：https://jquery.com/ - 获取最新版本和教程链接。
菜鸟教程 jQuery 教程：https://www.runoob.com/jquery/jquery-tutorial.html - 中文入门教程，适合快速上手。
W3Schools jQuery Tutorial：https://www.w3schools.com/jquery/ - 另一个优秀的英文入门教程。
jQuery 插件库：https://www.jq22.com/ - 提供大量免费的 jQuery 插件。

希望这份详细的教程能帮助你掌握 jQuery 开发！祝你学习愉快！

jQuery开发教程从哪开始学？