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

jQuery案例

news 2026/2/10 1:36:49

以下是几个常见的 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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2026/1/31 12:27:36

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43