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

JQuery实现小项目

news 文章来源：https://blog.csdn.net/asad21654864/article/details/130864992 2025/5/18 6:18:23

博主简介：想进大厂的打工人
博主主页：@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

C++ Qt 项目设计：基于C++与Qt的跨平台定时关机/关屏应用开发

基于C与Qt框架的定时关机与关屏应用开发全攻略 (一) 项目概述 (Project Overview)1.1 项目需求解析 (Analyzing the Project Requirements)1.2 选择技术栈 (Choosing the Tech Stack)1.3 功能概览 (Function Overview) (二) 设计思路 (Design Thinking)2.1 系统架构设计 (Syste…...

编程日记 2023/6/1 15:48:26

Python新技术和趋势：如何应对Python生态的变化和发展趋势

第一章：引言 Python作为一门简洁、优雅且易于学习的编程语言，一直以来都备受开发者的喜爱。它拥有强大的生态系统和活跃的社区，使得Python在各个领域都有广泛的应用。然而，随着时间的推移，Python生态系统也在不断演变…...

编程日记 2023/6/1 15:43:25

Flutter 又一元老离职，感谢 Tim 这些年的付出

前天在 insiders 收到 Tim Sneath 的离职邮件时感觉很震惊，因为他绝对是 Flutter 团队的元老级人物，几乎每次一次 Flutter 版本发布和社区活动都有他的身影，可以说他是我的 Flutter 领路人之一。 Tim 是在 2017 加入 Flutter 团队&#xff0…...

编程日记 2023/6/1 15:38:23

C++学习笔记3：sort和priority_queue的比较器重载

1 sort 三种方法 1. 直接重载函数 #include <vector> #include <memory> #include <vector> #include <queue> #include <iostream> #include <algorithm>using namespace std;class Node{ public:int value;Node(){value 0;};explici…...

编程日记 2023/6/1 15:33:23

Java之旅——Mybatis

Mybatis 是一个基于 Java 的 ORM（Object-Relational Mapping），用于 Java 应用程序的持久层框架，它将在 Java 对象和数据库关系之间建立一个映射。Mybatis 的作用主要是简化 SQL 语句的编写和维护，以及减少代码中的冗余…...

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

抽奖中的分布式锁应用

开发抽奖时遇到的分布式锁问题，特此记录一下几种实现方案背景开发中遇到个抽奖需求，会根据当前奖池内道具数量随机道具并发送给用户。这里面涉及到超发的问题，需要使用到分布式锁，特此记录一下常用的几种方案。 “超发”&#…...

编程日记 2023/6/1 15:23:20

项目总结车牌识别

代码贴：OpenCV实战5 车牌号识别_opencv车牌字符识别_爱钓鱼的歪猴的博客-CSDN博客目录 1、效果 2、代码思路 0、准备车配字符模板图片以及字符文件 1、对整图进行预处理得到突出车牌的cany边缘图 2、车牌字体联通在一起，形成一个区域 3、筛选出车…...

编程日记 2023/6/1 15:18:19

一台服务器通过apache安装多个web应用

当我们只有一台linux服务器资源但有创建多个网站的需求时，我们可以通过安装一个网站服务器Apache进行搭建，此次服务器使用Centos 7 下面分别介绍一个域名多个端口和多个域名用Apache来搭建多个网站的操作过程。一、使用apache 服务器 （一…...

编程日记 2023/6/1 15:13:18

网络连通性测试

ping 在Linux上，你可以使用Shell脚本编写一个for循环来ping一个网段的地址。下面是一个简单的示例： #!/bin/bashsubnet"192.168.0"for ((i1; i<255; i)); doip"$subnet.$i"ping -c 1 -W 1 $ip >/dev/null 2>&1if [ $…...

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

AntDB-S流式数据库体验

本文作者：彭冲老师，上一篇彭老师体验了亚信刚发布的社区版AntDB-T数据库，文章如下： AntDB-T交易型数据库体验本文继续体验AntDB-S流式数据库的，AntDB-S目前还未开放社区版，可以联系AntDB小助手进行体验。…...

编程日记 2023/6/1 15:03:15

二、JQuery项目

2.1 猜数字

2.2 表白墙

2.3 聚合搜索

2.4 计算器

相关文章：