异常教程

jQuery 实例（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发领域，jQuery 一直以其简洁高效的特点，成为前端开发者快速实现交互功能的利器。对于编程初学者和中级开发者而言，通过具体实例学习 jQuery 的核心概念和技巧，能够显著提升代码效率与项目开发速度。本文将以 “jQuery 实例” 为核心，通过循序渐进的案例解析，帮助读者掌握从基础选择器到高级动画、表单验证和异步交互的实用技能。文中所有代码示例均经过验证，并附有详细注释，力求让读者能够“边学边练”，快速落地实践。

jQuery 基础与选择器实例

选择器：网页元素的“导航地图”

jQuery 的核心功能之一是简化 DOM 操作。选择器（Selector）如同程序员在网页中定位元素的“导航地图”，通过简洁的语法快速找到目标元素。

示例 1：基础选择器的使用

// 选择所有 <div> 元素并添加背景色  
$("div").css("background-color", "#f0f0f0");  

// 选择 ID 为 "my-btn" 的按钮并修改文本  
$("#my-btn").text("点击我！");  

// 选择所有 class 为 "active" 的元素并隐藏  
$(".active").hide();

知识点解析：

  • $() 是 jQuery 的核心函数，用于包裹选择器表达式。
  • #id 选择唯一 ID 的元素，.class 选择所有具有该类名的元素。
  • 可链式调用方法（如 .css().text()），这是 jQuery 的语法特色之一。

复合选择器与过滤选择器

通过结合多种选择器，可以实现更精准的元素定位。例如，选择某个容器内的特定子元素：

示例 2：复合选择器与过滤

// 选择 class 为 "container" 的 div 内的所有 <a> 链接  
$(".container div a").css("color", "blue");  

// 选择所有未被选中的复选框  
$("input[type='checkbox']:not(:checked)").prop("disabled", true);

知识点解析：

  • 空格表示层级关系（如 .container div 表示容器内的所有 div）。
  • :not() 和 :checked 是 jQuery 的伪选择器，用于条件过滤。

事件处理与响应实例

绑定事件：让网页“活”起来

事件处理是交互设计的核心。通过 jQuery 的事件绑定方法，可以轻松实现点击、悬停、表单提交等响应逻辑。

示例 3：点击事件与动态内容更新

// 点击按钮时显示隐藏的 div  
$("#toggle-btn").click(function() {  
  $("#content").slideToggle(500);  
});  

// 表单提交时阻止默认行为并显示提示  
$("#my-form").submit(function(e) {  
  e.preventDefault(); // 阻止页面刷新  
  alert("表单已提交！");  
});

知识点解析：

  • click() 方法绑定点击事件，submit() 绑定表单提交事件。
  • e.preventDefault() 是阻止默认行为的关键方法，适用于表单、链接等场景。

事件冒泡与委托：避免代码冗余

当事件在嵌套元素中触发时，会引发“冒泡”行为。通过 stopPropagation() 或事件委托，可以精准控制事件流。

示例 4：事件委托的典型用法

// 为动态生成的元素绑定事件（避免重复 DOM 遍历）  
$("#parent").on("click", ".dynamic-item", function() {  
  $(this).css("background", "red");  
});

知识点解析：

  • on() 方法的事件委托语法 on(事件类型, 子元素选择器, 回调函数)，特别适用于动态添加的元素。
  • this 在回调函数中指向被点击的具体元素。

动画效果与视觉交互实例

基础动画：让页面更生动

jQuery 提供了丰富的动画方法，如 fade、slide 和 animate()，可快速实现视觉反馈。

示例 5：淡入/淡出与自定义动画

// 淡入效果  
$("#loading").fadeIn(1000);  

// 自定义动画（移动元素并改变尺寸）  
$("#box").animate({  
  left: "+=200px",  
  width: "300px",  
  opacity: 0.5  
}, 1500);

知识点解析：

  • 动画方法通常接受 duration 参数（毫秒）控制速度。
  • animate() 可通过 CSS 属性对象实现复杂动画效果。

结合 CSS：动画的“进阶玩法”

通过与 CSS3 的 transform 属性结合，可实现更流畅的动画效果：

示例 6：旋转动画

$("#spin-box").click(function() {  
  $(this).css({  
    transition: "transform 1s",  
    transform: "rotate(360deg)"  
  });  
});

知识点解析：

  • jQuery 可直接操作 CSS 属性，但复杂动画建议优先使用 CSS3 的 transition 和 transform。

表单操作与验证实例

表单元素操作：数据收集与反馈

表单是用户与网页交互的核心入口。通过 jQuery 可快速实现输入验证、动态提示等功能。

示例 7：表单值获取与重置

// 获取输入框的值  
var username = $("#username").val();  

// 表单提交前验证输入是否为空  
$("#submit-btn").click(function() {  
  if ($("#password").val() === "") {  
    alert("密码不能为空！");  
    return false;  
  }  
  // 提交表单  
  $("#my-form").submit();  
});

高级验证：正则表达式与动态反馈

结合正则表达式和实时验证，可提升用户体验：

示例 8：邮箱格式验证

$("#email").on("input", function() {  
  var email = $(this).val();  
  var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  
  if (regex.test(email)) {  
    $(this).css("border-color", "green");  
  } else {  
    $(this).css("border-color", "red");  
  }  
});

知识点解析：

  • on("input", ...) 监听输入变化，实现实时验证。
  • 正则表达式用于匹配邮箱格式，确保数据有效性。

Ajax 数据交互实例

异步请求：与后端“对话”的桥梁

通过 jQuery 的 $.ajax() 或简化的 $.get()、$.post() 方法，可轻松实现前后端数据交互。

示例 9：GET 请求获取数据

$.get("/api/data", function(response) {  
  $("#result").html(response.message);  
}).fail(function() {  
  alert("请求失败！");  
});

POST 请求与数据提交

// 提交表单数据到服务器  
$.post("/api/submit", {  
  name: "John",  
  email: "john@example.com"  
}, function(data) {  
  console.log("提交成功：" + data);  
});

知识点解析：

  • $.get() 和 $.post() 是 $.ajax() 的简化写法，适用于常见请求场景。
  • 回调函数用于处理响应数据，.fail() 捕获错误状态。

常见问题与解决方案

问题 1：jQuery 未加载或冲突

现象：代码执行时报错 undefined is not a function。
解决：

  1. 确认 jQuery 文件已正确引入（如 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>）。
  2. 避免与其他库的 $ 符号冲突，使用 jQuery.noConflict()。

问题 2：动态元素事件绑定无效

现象：通过 AJAX 加载的新元素无法触发事件。
解决：使用事件委托（如 $(parent).on("click", ".dynamic", ...)）。

结论

通过本文的 “jQuery 实例” 学习，读者应已掌握从基础选择器到高级交互的完整技能链。jQuery 的核心价值在于其“少写代码，多做功能”的设计理念，尤其适合快速搭建交互丰富的网页。建议读者在学习后：

  1. 动手实践：将示例代码复制到本地环境，尝试修改参数或逻辑。
  2. 探索文档：查阅 jQuery 官方文档（https://api.jquery.com ），深入理解高级功能。
  3. 结合项目：将所学应用到实际开发中，例如搭建个人博客的表单提交功能或实现动态加载的评论列表。

编程是一门实践的艺术，而 jQuery 则是通往这一艺术的一把便捷钥匙。希望本文能成为您掌握前端交互技术的坚实起点！

最新发布

查看更多文章