当前位置： 首页 > news >正文

jQuery案例

news 2026/2/10 2:24:33

以下是几个常见的 jQuery 示例，展示了它在不同场景下的应用：

1. 隐藏和显示元素

通过按钮点击隐藏和显示一个 <div> 元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>隐藏/显示元素</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="toggleBtn">隐藏/显示内容</button>
<div id="content"><p>这是隐藏/显示的内容！</p>
</div><script>$(document).ready(function() {$("#toggleBtn").click(function() {$("#content").toggle();  // 切换显示/隐藏});});
</script></body>
</html>
  • toggle()：切换元素的显示和隐藏状态。

2. 淡入和淡出效果

点击按钮实现 <div> 元素的淡入和淡出效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淡入淡出效果</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="fadeInBtn">淡入显示</button>
<button id="fadeOutBtn">淡出隐藏</button>
<div id="content" style="display:none;"><p>这是一个可以淡入和淡出的内容！</p>
</div><script>$(document).ready(function() {$("#fadeInBtn").click(function() {$("#content").fadeIn();  // 元素淡入});$("#fadeOutBtn").click(function() {$("#content").fadeOut();  // 元素淡出});});
</script></body>
</html>
  • fadeIn()：使元素渐渐显示出来。
  • fadeOut()：使元素渐渐消失。

3. 表单验证

使用 jQuery 实现简单的表单验证，确保用户填写了所有必填字段。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单验证</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><form id="myForm"><label for="name">姓名：</label><input type="text" id="name" name="name"><span id="nameError" style="color: red; display: none;">请填写姓名。</span><br><br><label for="email">电子邮件：</label><input type="email" id="email" name="email"><span id="emailError" style="color: red; display: none;">请填写有效的电子邮件。</span><br><br><button type="submit">提交</button>
</form><script>$(document).ready(function() {$("#myForm").submit(function(event) {let valid = true;// 清除之前的错误消息$("#nameError, #emailError").hide();// 验证姓名if ($("#name").val() === "") {$("#nameError").show();valid = false;}// 验证电子邮件let email = $("#email").val();if (email === "" || !/\S+@\S+\.\S+/.test(email)) {$("#emailError").show();valid = false;}// 如果表单无效，阻止提交if (!valid) {event.preventDefault();}});});
</script></body>
</html>
  • submit()：在提交表单时触发事件。
  • event.preventDefault()：阻止表单提交，直到验证通过。

4. 动态加载内容

使用 jQuery 的 load() 方法动态加载外部 HTML 内容到当前页面中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态加载内容</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="loadContentBtn">加载内容</button>
<div id="contentArea"></div><script>$(document).ready(function() {$("#loadContentBtn").click(function() {$("#contentArea").load("content.html");  // 加载外部文件});});
</script></body>
</html>
  • load()：动态加载指定的 HTML 文件内容到指定的元素中。

5. AJAX 请求

通过 jQuery 发起 AJAX 请求，异步获取服务器数据并更新页面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX 示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="fetchDataBtn">获取数据</button>
<div id="result"></div><script>$(document).ready(function() {$("#fetchDataBtn").click(function() {$.ajax({url: "https://jsonplaceholder.typicode.com/posts/1",  // 示例 API 地址method: "GET",success: function(data) {// 当请求成功时更新页面内容$("#result").html(`<h3>标题: ${data.title}</h3><p>内容: ${data.body}</p>`);},error: function() {$("#result").html("数据加载失败，请重试。");}});});});
</script></body>
</html>
  • $.ajax()：发起一个 AJAX 请求，获取数据后更新页面。
  • success 和 error：回调函数，用于处理请求成功或失败时的行为。

这些例子展示了 jQuery 在操作 DOM、事件处理、动画效果、表单验证以及与服务器交互等方面的强大功能。如果你正在学习 Web 开发，掌握这些基础的 jQuery 用法会对你大有帮助。

相关文章：

jQuery案例

以下是几个常见的 jQuery 示例&#xff0c;展示了它在不同场景下的应用&#xff1a; 1. 隐藏和显示元素 通过按钮点击隐藏和显示一个 <div> 元素。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><met…...

编程日记 2024/11/10 17:30:03

常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式

目前开发的项目很大程度上是为明年的国产化做准备了&#xff0c;所以借这个机会把用了十年的自研系统全部重写&#xff0c;订立更严格的规范&#xff0c;本文记录一下返回格式及对应状态码。 常见 HTTP 状态码及解释 HTTP 状态码用于表示客户端请求的响应状态&#xff0c;它们…...

编程日记 2024/11/10 17:29:02

MySQL系列之如何在Linux只安装客户端

导览 前言Q&#xff1a;如何安装一个Linux环境下的MySQL客户端一、准备文件1. 确认Server版本2. 选择Client安装文件 二、下载并安装1. 下载1.1 寻找文件1.2 文件说明 2. 安装2.1 上传至Linux服务器2.2 执行安装 三、连接验证1. 确认远程授权2. 建立远程连接 结语精彩回放 前言…...

编程日记 2024/11/10 17:27:00

内核设备树，你真的了解吗？

在嵌入式系统和内核开发中&#xff0c;设备树&#xff08;Device Tree, 简称 DT&#xff09;扮演着至关重要的角色&#xff0c;帮助系统在启动时准确识别硬件配置并匹配合适的驱动程序。虽然设备树应用广泛&#xff0c;但其结构、工作机制及应用细节却不总是被深入理解。本文将…...

编程日记 2024/11/10 17:23:56

MySQL:客户端工具创建数据库

MySQL 是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;用于存储、管理和检索数据。MySQL是基于SQL语言的&#xff0c;它具有高效、可靠、易用的特点。 客户端工具 这个mysqld.exe就在计算机安装的数据可服务&#xff0c;启动之后&#xff0c;mys…...

编程日记 2024/11/10 17:16:49

Linux笔记之pandoc实现各种文档格式间的相互转换

Linux笔记之pandoc实现各种文档格式间的相互转换 code review! 文章目录 Linux笔记之pandoc实现各种文档格式间的相互转换1.安装 Pandoc2.Word转Markdown3.markdown转html4.Pandoc 支持的一些常见格式4.1.输入格式4.2.输出格式 1.安装 Pandoc sudo apt-get install pandoc # …...

编程日记 2024/11/10 17:14:46

【iOS】知乎日报第三周总结

【iOS】知乎日报第三周总结 文章目录 【iOS】知乎日报第三周总结前言评论区文字评论区的一个展开效果评论区数据的一个请求修改了主页获取数据的逻辑主页无限轮播图图片主色调的一个获取将一些拓展部分的内容写在分类里小结 前言 本周笔者因为金工实习整个项目进展比较慢&#…...

编程日记 2024/11/10 17:12:44

【p2p、分布式，区块链笔记 Torrent】WebTorrent的add和seed函数

在【p2p、分布式&#xff0c;区块链笔记 Torrent】WebTorrent的上传和下载界面的示例中&#xff0c;主要通过WebTorrent类的add和seed函数实现相关功能。这两个函数都返回一个Torrent类对象的实例。 seed函数 import createTorrent, { parseInput } from create-torrent // &…...

编程日记 2024/11/10 17:06:36

Redis穿透、击穿、雪崩

redis是一款常用的非关系型数据库&#xff0c;我们常用与作为数据缓存的组件。 接下来介绍一下面试中常被问到的三个概念以及简单的解决方法。 穿透 什么叫缓存穿透 缓冲穿透&#xff0c;是当有一个请求过来时&#xff0c;查询redis缓存不存在&#xff0c;又去查询数据库&…...

编程日记 2024/11/10 17:04:32

VBA高级应用30例应用3在Excel中的ListObject对象：插入行和列

《VBA高级应用30例》&#xff08;版权10178985&#xff09;&#xff0c;是我推出的第十套教程&#xff0c;教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开&#xff0c;这套教程案例与理论结合&#xff0c;紧贴“实战”&#xff0c;并做“战术总结”&#xff0c;以…...

编程日记 2024/11/10 17:03:30

2024系统架构师---上午综合题真题（重复考试知识难点）

1.感知层威胁 1）信息窃听：通过搭线或者电磁泄露造成数据隐私泄露；感知执行层主要由各种物理传感器组成，是整个物理信息系统中信息的来源。为了适应多变的环境，网络节点多布置在无人监管的环境中，因此容易被攻击者攻击，常见的针对感知执行层的攻击方式有； 2）感知破坏：…...

编程日记 2024/11/10 17:00:26

连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常

启动kafka后&#xff0c;连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常 could not be established. Broker may not be available. (org.apache.kafka.clients.NetworkClient) 检查kafka运行日志&#xff0c;报The broker is trying to join the wrong clu…...

编程日记 2024/11/10 16:58:24

淘宝商品评论API：代码界的“买家秀”大揭秘

在淘宝这个神奇的购物天堂里&#xff0c;商品评论就像是隐藏的宝藏&#xff0c;等待着我们去挖掘。想象一下&#xff0c;如果你的代码能够自动获取这些评论&#xff0c;那岂不是像拥有了一台时光机&#xff0c;可以穿梭在买家的购物体验之中&#xff1f;今天&#xff0c;我们就…...

编程日记 2024/11/10 16:55:21

RabbitMQ队列详细属性（重要）

RabbitMQ队列详细属性 1、队列的属性介绍1.1、Type&#xff1a;队列类型1.2、Name&#xff1a;队列名称1.3、Durability&#xff1a;声明队列是否持久化1.4、Auto delete&#xff1a; 是否自动删除1.5、Exclusive&#xff1a;1.6、Arguments&#xff1a;队列的其他属性&#xf…...

编程日记 2024/11/10 16:54:19

游戏服务器和普通服务器的区别

服务器&#xff0c;顾名思义&#xff0c;是提供服务的设备&#xff0c;在计算机领域&#xff0c;服务器是指具有网络功能的高性能计算机&#xff0c;用于存储、处理和传输数据&#xff0c;而游戏服务器则是专门为游戏提供服务的服务器&#xff0c;它需要具备更高的性能、更稳定…...

编程日记 2024/11/10 16:53:18

Java 中的 Supplier：让数据生成更灵活

文章目录 1. Supplier 基础&#xff1a;无参返回&#xff0c;懒加载的利器2. 与 Optional 配合&#xff0c;优雅地处理默认值3. 惰性初始化缓存&#xff1a;提升性能4. 用于随机数、时间戳等动态数据的生成5. 结合 Stream 实现动态数据流6. 与工厂模式结合&#xff0c;动态创建…...

编程日记 2024/11/10 16:52:17

轻松理解操作系统 - Linux的数据块是如何储存数据的？

python入门 C入门 Linux 由于其开源、比较稳定等特点统治了服务端领域。 也因此&#xff0c;学习Linux 系统相关知识在后端开发等岗位中变得越来越重要&#xff0c;甚至可以说是必不可少的。 因为它的广泛应用&#xff0c;所以在程序员的日常工作和面试中&#xff0c;它都是经…...

编程日记 2024/11/10 16:50:15

青藤深度参编的终端安全国家标准正式发布

近日&#xff0c;国家市场监督管理总局、国家标准化管理委员会发布中华人民共和国国家标准公告&#xff0c;由TC260&#xff08;全国网络安全标准化技术委员会&#xff09;归口&#xff0c;公安部第三研究所牵头的GB/T 29240-2024《网络安全技术 终端计算机通用安全技术规范》&…...

编程日记 2024/11/10 16:48:13

软考：去中心化的部署有什么特点

微服务架构被认为是去中心化的&#xff0c;因为它具有以下特点 模块化&#xff1a;微服务架构将应用程序拆分为一系列小型服务&#xff0c;每个服务都是独立的模块&#xff0c;易于维护和扩展 。这种模块化设计使得每个服务可以独立于其他服务运行&#xff0c;没有单一的控制中…...

编程日记 2024/11/10 16:41:06

L8.【LeetCode笔记】回文数

1.题目 https://leetcode.cn/problems/palindrome-number/description/ 给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&…...

编程日记 2024/11/10 16:40:05

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

编程新知 2026/2/2 21:55:02

理想汽车5月交付40856辆，同比增长16.7%

6月1日&#xff0c;理想汽车官方宣布&#xff0c;5月交付新车40856辆&#xff0c;同比增长16.7%。截至2025年5月31日&#xff0c;理想汽车历史累计交付量为1301531辆。 官方表示&#xff0c;理想L系列智能焕新版在5月正式发布&#xff0c;全系产品力有显著的提升&#xff0c;每…...

编程新知 2026/2/10 0:27:13

华为云Flexus+DeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手

华为云FlexusDeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手 一、构建知识库问答助手引言二、构建知识库问答助手环境2.1 基于FlexusX实例的Dify平台2.2 基于MaaS的模型API商用服务 三、构建知识库问答助手实战3.1 配置Dify环境3.2 创建知识库问答助手3.3 使用知…...

编程新知 2026/1/22 15:43:35

浏览器工作原理01 [#]Chrome架构：仅仅打开了1个页面，为什么有4个进程

引用 浏览器工作原理与实践 Chrome打开一个页面需要启动多少进程&#xff1f;你可以点击Chrome浏览器右上角的“选项”菜单&#xff0c;选择“更多工具”子菜单&#xff0c;点击“任务管理器”&#xff0c;这将打开Chrome的任务管理器的窗口&#xff0c;如下图 和Windows任务管…...

编程新知 2026/2/9 21:11:08

【人工智能 | 项目开发】Python Flask实现本地AI大模型可视化界面

文末获取项目源码。 文章目录 项目背景项目结构app.py（后端服务）index.html（前端界面）项目运行项目图示项目源码项目背景 随着人工智能技术的快速发展，大语言模型在智能交互领域展现出巨大潜力。本项目基于 Qwen3-1.7B 模型，搭建一个轻量化的智能聊天助手，旨在为用户提…...

编程新知 2026/2/5 3:24:21