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

JQuery实现小项目

news 2025/11/6 6:12:22

博主简介：想进大厂的打工人
博主主页：@xyk:
所属专栏: JavaEE初阶

文章目录

一、JQuery是什么

二、JQuery项目

2.1 猜数字

2.2 表白墙

2.3 聚合搜索

2.4 计算器

一、JQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?fromModule=lemma_inlink)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

总的来说，它就是一个工具js，是一个很好的外部资源，它提供了很多简洁高效的API

怎么引入呢？

使用jquery的网络地址访问：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js

2.下载jquery的js文件

想下载的看下我的码云~~xyk (ABC18045315897) - Gitee.com

二、JQuery项目

2.1 猜数字

API需要通过jQuery这个对象去调用，有一个别名“$”，但是不建议使用，因为其他的一些js框架，也会使用到这个别名，所以会冲突~

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WebAPI Test</title><script src="jquery.min.js"></script></head><body id="body"><div><h3>猜数字游戏</h3>玩家请输入一个 1 - 10 的数字： <input type="text" id="input_number"><br><input type="button" value="查看结果" onclick="selectResultJq()"><div id="result"></div></div><script>// jquery猜数字游戏function selectResultJq(){// 产生随机数 1-10var randomNum = 1+Math.floor(Math.random()*10);// document.getElementById("input_num").valuevar userInputNum = jQuery("#input_number").val();var msg;if(randomNum==userInputNum){msg="<h4>恭喜：猜对了</h4>";}else{msg="<h4>抱歉：猜错了，正确的数字是："+randomNum+"</h4>";}// document.getElementById("result_div").innerHTML = msg;jQuery("#result").html(msg);}</script></body>
</html>

2.2 表白墙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><script src="jquery.min.js"></script>
</head>
<body><div style="width: 100%;text-align: center;"><h2>表白墙</h2>谁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：<input id="username"><p></p>对谁&nbsp;&nbsp;&nbsp;：<input id="tousername"><p></p>说什么：<input id="msg"><p></p><input type="button" value=" 提 交 " onclick="mysub()"><p></p><div id="div_allmsg"></div></div><script>function mysub(){var iptUserName = jQuery("#username");var iptToUserName = jQuery("#tousername");var iptMsg = jQuery("#msg");// 1.非空效验if(iptUserName.val().trim()==""){alert("请先输入您的名字！");iptUserName.focus();return;}if(iptToUserName.val().trim()==""){alert("请先输入对方的名字！");iptToUserName.focus();return;}if(iptMsg.val().trim()==""){alert("请先输入信息！");iptMsg.focus();return;}// 2.将内容展示在表白墙jQuery("#div_allmsg").append(iptUserName.val()+"对"+iptToUserName.val()+"说："+iptMsg.val()+"<p></p>");// 3.清空输入的内容iptUserName.val("");iptToUserName.val("");iptMsg.val("");}</script>
</body>
</html>

2.3 聚合搜索

聚合搜索就是一个页面，上面有一栏按钮，按一下就跳转到对应的网址，栏下的页面转换为对应的网址，但是选择栏还在
主要是为了提高体验感~

html：

嵌入页面用iframe标签
我们只需要点击按钮的时候，改变iframe的src属性即可
- 用到attr方法，左边为属性名，右边为替换后的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聚合搜索</title><script src="jquery.min.js"></script>
</head>
<body><div style="width: 100%;text-align: center;"><input type="button" value=" 必应 " onclick="upSearch('https://www.bing.com/')"> &nbsp;&nbsp;&nbsp;<input type="button" value=" 搜狗 " onclick="upSearch('https://www.sogou.com/')"> &nbsp;&nbsp;&nbsp;<input type="button" value=" 360 " onclick="upSearch('https://www.so.com/')"> &nbsp;&nbsp;&nbsp;</div><hr><iframe id="ifr" style="width: 100%;height: 600px;" src="https://www.bing.com/"></iframe><script>function upSearch(url){jQuery("#ifr").attr("src",url);}</script>
</body>
</html>

2.4 计算器

cal.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery.min.js"></script><link rel="stylesheet" href="cal.css">
</head>
<body><div class="calculator"><div class="cal"><form action="#"><h2>计算器</h2><div class="row">数字一：<input type="text" id="c1"></div>                <div class="row">数字二：<input type="text" id="c2"></div><div class="option"><input type="button" value="相加" onclick="add()" id="a"><!-- id不能与函数重复，否则会误判 --><input type="button" value="相减" onclick="sub()" id="s"><input type="button" value="相乘" onclick="mul()" id="m"><input type="button" value="相除" onclick="div()" id="d"></div><div class="clear"><div class="reset"><input type="reset" value="清空" id="up" onclick="update()"></div></div></form></div></div><script>function add() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseInt(numb1) + parseInt(numb2);jQuery("#a").val(sum);}function sub() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseInt(numb1) - parseInt(numb2);jQuery("#s").val(sum);}function mul() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseInt(numb1) * parseInt(numb2);jQuery("#m").val(sum);}function div() {var numb1 = jQuery("#c1").val();var numb2 = jQuery("#c2").val();var sum = parseFloat(numb1) / parseInt(numb2);jQuery("#d").val(sum);}function update() {jQuery("#a").val("相加");jQuery("#s").val("相减");jQuery("#m").val("相乘");jQuery("#d").val("相除");}</script></body>
</html>

cal.css:

html {width: 100%;height: 100%;
}
body {width: 100%;height: 100%;background-image: url("https://wallpaperm.cmcm.com/fedea52c7f796c3eeeb8598d4a09a3e7.jpg");background-position: center center;background-repeat: no-repeat;background-size: cover;}.calculator {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.cal {width: 600px;height: 400px;background-color: rgba(255, 255, 255, 0.5);border-radius: 20px;
}
.cal h2 {font-size: 24px;text-align: center;margin-top: 60px;margin-bottom: 40px;
}.cal .row {height: 50px;width: 100%;display: flex;justify-content: space-around;/*设置flex的原因就是要用这个*/align-items: center;font-size: 25px;font-weight: 900;margin: 10px;
}
#c1 {width: 400px;height: 45px;font-size: 23px;text-indent: 10px;border-radius: 10px;
}
#c2 {width: 400px;height: 45px;font-size: 23px;text-indent: 10px;border-radius: 10px;
}.option input {display: block;font-weight: 900;font-size: 20px;width: 100px;height: 70px;color: rgba(255, 255, 255, 0.618);border-radius: 20px;background-color: rgba(255,13,58, 0.5);
}
.option {margin-top: 20px;display: flex;justify-content: space-around;
}
.clear {display: flex;justify-content: center;align-items: center;
}
.reset #up {width: 200px;height: 30px;background-color:rgba(255, 0, 0, 0.4);color: white;font-weight: 900;line-height: 30px;text-align: center;border-radius: 2010px;border:none;margin-top: 20px;transition: all 0.618s;
}
#up:hover{background-color: rgba(251,255,153, 0.7);
}

效果：

JQuery实现小项目

博主简介：想进大厂的打工人博主主页：xyk:所属专栏: JavaEE初阶目录文章目录一、JQuery是什么二、JQuery项目 2.1 猜数字 2.2 表白墙 2.3 聚合搜索 2.4 计算器一、JQuery是什么 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之…...

编程日记 2023/6/1 17:28:54

【C++/嵌入式笔试面试八股】一、23.结构体指针 | 指针和引用 | 万能指针 | 野指针

结构体指针 28.将结构体作为参数向函数中传递传递方式有两种：值传递地址传递，利用操作符 -> 可以通过结构体指针访问结构体属性//学生结构体定义 struct student {//成员列表string name; //姓名int age; //年龄int score; //分数 };//值传递...

编程日记 2023/6/1 17:23:53

【C++初阶】类和对象（下）构造函数（初始化列表） + explicit关键字 +static成员

👦个人主页：Weraphael ✍🏻作者简介：目前学习C和算法 ✈️专栏：C航路 🐋 希望大家多多支持，咱一起进步！😁 如果文章对你有帮助的话欢迎评论💬 点赞&#x1…...

编程日记 2023/6/1 17:18:52

chatgpt赋能python：Python代码怎么用？一个10年编程经验工程师的实践总结

Python代码怎么用？一个10年编程经验工程师的实践总结如果你正在学习Python或已经是一名Python开发者，你需要知道如何正确地使用Python代码以实现项目需求。在本文中，我将分享我的10年Python编程经验，并介绍一些关于如何使用Pyth…...

编程日记 2023/6/1 17:13:51

【Android定制】修改BUILD_AGO_GMS = no 和 BUILD_GMS=no属性

文章目录概要名词解释细节小结概要在安卓底层源码中，有这样的两个属性，这两个第一眼看上去都像是带不带谷歌，BUILD_AGO_GMS no和BUILD_GMSno有什么区别？？ 如果带了谷歌，那么这个设备就差不多是国外定…...

编程日记 2023/6/1 17:08:50

第十章：C语言的调试

很多小伙伴刚开始听到C语言的调试，这是个啥，表示很怀疑，敲代码不就是直接就是干嘛，结果很多小白们，一运行错误多的数都数不过来。就开始这改改，那删删，莫名奇妙就运行成功了。到最后都不知道到底…...

编程日记 2023/6/1 17:03:49

【20】SCI易中期刊推荐——计算机信息系统工程电子与电气（中科院3区）

💖💖>>>加勒比海带,QQ2479200884<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉…...

编程日记 2023/6/1 16:58:48

初识网络之UDP网络套接字

目录一、UDP中的socket编程常用接口 1. socket的含义 2. sockaddr结构 3. socket编程中UDP协议常用接口介绍 3.1 创建socket文件描述符（TCP/UDP、客户端服务器） 3.2 绑定端口号（TCP/UDP，服务器） 3.3 接收数据…...

编程日记 2023/6/1 16:53:47

数据中心末端配电的数字化方案及设备选型

普通PDU和智能PDU有什么区别？ 机架安装配电盘或机架配电单元 (PDU) 是一种配备许多插座的设备，可将电力分配给位于数据中心机架或机柜内的服务器、存储设备和网络设备。领先的分析公司 IHS 将它们分为两大类： 1) 基本 PDU 提供可靠的配电。 2…...

编程日记 2023/6/1 16:48:46

k8s入门实战-Service

k8s入门实战-Service Service 和 Label Service 通过一组 Pod 路由通信。Service 是一种抽象，它允许 Pod 死亡并在 Kubernetes 中复制，而不会影响应用程序。在依赖的 Pod (如应用程序中的前端和后端组件)之间进行发现和路由是由Kubernetes Service 处理…...

编程日记 2023/6/1 16:43:45

Python量化交易：策略创建运行流程

学习目标目标知道策略的创建和运行知道策略的相关设置知道RQ的策略运行流程应用无 1、体验创建策略、运行策略流程 1.1 创建策略 1.2 策略界面 2、策略界面功能、运行介绍 2.1 一个完整的策略需要做的事情选择策略的运行信息： 选择运行区间和初始资金选择回…...

编程日记 2023/6/1 16:38:43

企业该如何自主构建信息化管理系统？

实践证明，企业自己搭建的信息化系统灵活性更高，更能契合企业的需求。我们可以借助零代码平台自主搭建，既提供了各个应用系统的标准化功能，又支持自定义搭建，可根据企业自身需求修改。全球领先的信息技术研究和顾问公…...

编程日记 2023/6/1 16:33:42

linuxOPS基础_操作系统概述

计算机发展史第一台计算机是1946 年2 月14 日诞生日，第一台名称ENIAC。体积一间屋子的大小，重量高达28t。第一代：1946 – 1958 > 12 年 （电子管） 第二代：1958 – 1964 > 6 年 （晶体管…...

编程日记 2023/6/1 16:28:41

常用adb命令记录下

adb root 获取root 权限(以root权限运行ADB守护程序)adb remount 以读写方式重新挂载设备的文件系统adb reboot 重启设备adb devices 查看当前连接设备adb get-serialno 获取设备的序列号adb backup 备份设备的应用程序和数据adb bugreport 收集设备的当前状态信息以进行故障排…...

编程日记 2023/6/1 16:23:40

Etcdctl 命令v3

一、v3必须导出环境变量 export ETCDCTL_API3 二、查看版本 etcdctl version 三、写入键 1.基本 etcdctl put foo bar 2.绑定租约 etcdctl put foo bar --leasexxxx 四、获取键 1.基本 etcdctl get foo 2.按十六进制获取 etcdctl get foo --hex 3.只读取键值 et…...

编程日记 2023/6/1 16:18:39

第二十一章开发Productions - ObjectScript Productions - 延迟发送

文章目录第二十一章开发Productions - ObjectScript Productions - 延迟发送延迟发送生成事件日志条目在 ObjectScript 中生成事件日志条目第二十一章开发Productions - ObjectScript Productions - 延迟发送延迟发送除了同步（等待）和异步&…...

编程日记 2023/6/1 16:13:38

用vue-full-calendar实现酒店预定管理展示

文章目录前言一、关于vue-full-calendar二、使用步骤1. 引入库2. 使用库3. 开始编码4. 实际效果图展示5. 点击弹窗展示6. 弹窗展示效果图总结前言近些天有位做酒店业务朋友问到我，有没有前端比较好用的预定日历查看插件，实际上我也没有研究过&#…...

编程日记 2023/6/1 16:08:37

DirectX12环境配置（1）

开发环境：visual studio 2022 第一种配置DirectX12环境得方式。首先创建一个c得空项目，然后创建一个main.cpp文件。把下面这串代码放进去，先不用管这串代码什么意思，后面会逐行逐句得讲解，因为我们创建得是空项目&am…...

编程日记 2023/6/1 16:03:35

Go-异常处理(defer recover panic)

系列文章目录提示：goi语言基础文章 GO-异常处理文章目录系列文章目录前言一、关键字含义defer /recover 实现异常捕获和处理应用场景deferrecoverpanic 二、实例实例讲解上述几种情况总结前言提示：这里可以添加本文要记录的大概内容： …...

编程日记 2023/6/1 15:58:34

【完美解决】mysql启动不了:本地计算机上的MySQL服务启动后停止

本文基于mysql8.0，5.7也可以参考 navicat 突然莫名其妙连不上mysql 查看服务，也启动不了，手动启动出现错误： 本地计算机上的MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止 20230525更新！ 先…...

编程日记 2023/6/1 15:53:28

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/8/16 7:00:37

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2025/11/4 19:26:39

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2025/11/4 18:34:34

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/11/2 0:34:58

爬虫基础学习day2

# 爬虫设计领域工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...

编程新知 2025/10/17 17:04:15

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

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

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

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/11/4 11:03:46

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

编程新知 2025/10/25 10:55:30

Win系统权限提升篇UAC绕过DLL劫持未引号路径可控服务全检项目

应用场景： 1、常规某个机器被钓鱼后门攻击后，我们需要做更高权限操作或权限维持等。 2、内网域中某个机器被钓鱼后门攻击后，我们需要对后续内网域做安全测试。 #Win10&11-BypassUAC自动提权-MSF&UACME 为了远程执行目标的exe或者b…...

编程新知 2025/11/1 21:53:59

二、JQuery项目

2.1 猜数字

2.2 表白墙

2.3 聚合搜索

2.4 计算器

相关文章：