jQuery案例
以下是几个常见的 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 示例，展示了它在不同场景下的应用： 1. 隐藏和显示元素 通过按钮点击隐藏和显示一个 <div> 元素。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><met…...
常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式
目前开发的项目很大程度上是为明年的国产化做准备了，所以借这个机会把用了十年的自研系统全部重写，订立更严格的规范，本文记录一下返回格式及对应状态码。 常见 HTTP 状态码及解释 HTTP 状态码用于表示客户端请求的响应状态，它们…...
MySQL系列之如何在Linux只安装客户端
导览 前言Q：如何安装一个Linux环境下的MySQL客户端一、准备文件1. 确认Server版本2. 选择Client安装文件 二、下载并安装1. 下载1.1 寻找文件1.2 文件说明 2. 安装2.1 上传至Linux服务器2.2 执行安装 三、连接验证1. 确认远程授权2. 建立远程连接 结语精彩回放 前言…...
内核设备树，你真的了解吗？
在嵌入式系统和内核开发中，设备树（Device Tree, 简称 DT）扮演着至关重要的角色，帮助系统在启动时准确识别硬件配置并匹配合适的驱动程序。虽然设备树应用广泛，但其结构、工作机制及应用细节却不总是被深入理解。本文将…...
MySQL:客户端工具创建数据库
MySQL 是一个开源的关系型数据库管理系统（RDBMS），用于存储、管理和检索数据。MySQL是基于SQL语言的，它具有高效、可靠、易用的特点。 客户端工具 这个mysqld.exe就在计算机安装的数据可服务，启动之后，mys…...
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 # …...
【iOS】知乎日报第三周总结
【iOS】知乎日报第三周总结 文章目录 【iOS】知乎日报第三周总结前言评论区文字评论区的一个展开效果评论区数据的一个请求修改了主页获取数据的逻辑主页无限轮播图图片主色调的一个获取将一些拓展部分的内容写在分类里小结 前言 本周笔者因为金工实习整个项目进展比较慢&#…...
【p2p、分布式，区块链笔记 Torrent】WebTorrent的add和seed函数
在【p2p、分布式，区块链笔记 Torrent】WebTorrent的上传和下载界面的示例中，主要通过WebTorrent类的add和seed函数实现相关功能。这两个函数都返回一个Torrent类对象的实例。 seed函数 import createTorrent, { parseInput } from create-torrent // &…...
Redis穿透、击穿、雪崩
redis是一款常用的非关系型数据库，我们常用与作为数据缓存的组件。 接下来介绍一下面试中常被问到的三个概念以及简单的解决方法。 穿透 什么叫缓存穿透 缓冲穿透，是当有一个请求过来时，查询redis缓存不存在，又去查询数据库&…...
VBA高级应用30例应用3在Excel中的ListObject对象：插入行和列
《VBA高级应用30例》（版权10178985），是我推出的第十套教程，教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开，这套教程案例与理论结合，紧贴“实战”，并做“战术总结”，以…...
2024系统架构师---上午综合题真题（重复考试知识难点）
1.感知层威胁 1）信息窃听：通过搭线或者电磁泄露造成数据隐私泄露；感知执行层主要由各种物理传感器组成，是整个物理信息系统中信息的来源。为了适应多变的环境，网络节点多布置在无人监管的环境中，因此容易被攻击者攻击，常见的针对感知执行层的攻击方式有； 2）感知破坏：…...
连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常
启动kafka后，连接kafka消息队列报org.apache.kafka.clients.NetworkClient异常 could not be established. Broker may not be available. (org.apache.kafka.clients.NetworkClient) 检查kafka运行日志，报The broker is trying to join the wrong clu…...
淘宝商品评论API：代码界的“买家秀”大揭秘
在淘宝这个神奇的购物天堂里，商品评论就像是隐藏的宝藏，等待着我们去挖掘。想象一下，如果你的代码能够自动获取这些评论，那岂不是像拥有了一台时光机，可以穿梭在买家的购物体验之中？今天，我们就…...
RabbitMQ队列详细属性（重要）
RabbitMQ队列详细属性 1、队列的属性介绍1.1、Type：队列类型1.2、Name：队列名称1.3、Durability：声明队列是否持久化1.4、Auto delete： 是否自动删除1.5、Exclusive：1.6、Arguments：队列的其他属性…...
游戏服务器和普通服务器的区别
服务器，顾名思义，是提供服务的设备，在计算机领域，服务器是指具有网络功能的高性能计算机，用于存储、处理和传输数据，而游戏服务器则是专门为游戏提供服务的服务器，它需要具备更高的性能、更稳定…...
Java 中的 Supplier：让数据生成更灵活
文章目录 1. Supplier 基础：无参返回，懒加载的利器2. 与 Optional 配合，优雅地处理默认值3. 惰性初始化缓存：提升性能4. 用于随机数、时间戳等动态数据的生成5. 结合 Stream 实现动态数据流6. 与工厂模式结合，动态创建…...
轻松理解操作系统 - Linux的数据块是如何储存数据的？
python入门 C入门 Linux 由于其开源、比较稳定等特点统治了服务端领域。 也因此，学习Linux 系统相关知识在后端开发等岗位中变得越来越重要，甚至可以说是必不可少的。 因为它的广泛应用，所以在程序员的日常工作和面试中，它都是经…...
青藤深度参编的终端安全国家标准正式发布
近日，国家市场监督管理总局、国家标准化管理委员会发布中华人民共和国国家标准公告，由TC260（全国网络安全标准化技术委员会）归口，公安部第三研究所牵头的GB/T 29240-2024《网络安全技术 终端计算机通用安全技术规范》&…...
软考：去中心化的部署有什么特点
微服务架构被认为是去中心化的，因为它具有以下特点 模块化：微服务架构将应用程序拆分为一系列小型服务，每个服务都是独立的模块，易于维护和扩展 。这种模块化设计使得每个服务可以独立于其他服务运行，没有单一的控制中…...
L8.【LeetCode笔记】回文数
1.题目 https://leetcode.cn/problems/palindrome-number/description/ 给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。 回文数 是指正序（从左向右）和倒序（从右向左&…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
企业如何增强终端安全？
在数字化转型加速的今天，企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机，到工厂里的物联网设备、智能传感器，这些终端构成了企业与外部世界连接的 “神经末梢”。然而，随着远程办公的常态化和设备接入的爆炸式…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...