JQuery实现小项目
- 博主简介：想进大厂的打工人
- 博主主页：@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>谁 ：<input id="username"><p></p>对谁 ：<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/')"> <input type="button" value=" 搜狗 " onclick="upSearch('https://www.sogou.com/')"> <input type="button" value=" 360 " onclick="upSearch('https://www.so.com/')"> </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之…...
【C++/嵌入式笔试面试八股】一、23.结构体指针 | 指针和引用 | 万能指针 | 野指针
结构体指针 28.将结构体作为参数向函数中传递 传递方式有两种： 值传递地址传递，利用操作符 -> 可以通过结构体指针访问结构体属性//学生结构体定义 struct student {//成员列表string name; //姓名int age; //年龄int score; //分数 };//值传递...
【C++初阶】类和对象（下）构造函数（初始化列表） + explicit关键字 +static成员
👦个人主页：Weraphael ✍🏻作者简介：目前学习C和算法 ✈️专栏：C航路 🐋 希望大家多多支持，咱一起进步！😁 如果文章对你有帮助的话 欢迎 评论💬 点赞…...
chatgpt赋能python：Python代码怎么用？一个10年编程经验工程师的实践总结
Python代码怎么用？一个10年编程经验工程师的实践总结 如果你正在学习Python或已经是一名Python开发者，你需要知道如何正确地使用Python代码以实现项目需求。在本文中，我将分享我的10年Python编程经验，并介绍一些关于如何使用Pyth…...
【Android定制】修改BUILD_AGO_GMS = no 和 BUILD_GMS=no属性
文章目录 概要名词解释细节小结 概要 在安卓底层源码中，有这样的两个属性，这两个第一眼看上去都像是带不带谷歌，BUILD_AGO_GMS no和BUILD_GMSno有什么区别？？ 如果带了谷歌，那么这个设备就差不多是国外定…...
第十章：C语言的调试
很多小伙伴刚开始听到C语言的调试，这是个啥，表示很怀疑，敲代码不就是直接就是干嘛，结果很多小白们，一运行错误多的数都数不过来。就开始这改改，那删删，莫名奇妙就运行成功了。到最后都不知道到底…...
【20】SCI易中期刊推荐——计算机信息系统工程电子与电气（中科院3区）
💖💖>>>加勒比海带,QQ2479200884<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉…...
初识网络之UDP网络套接字
目录 一、UDP中的socket编程常用接口 1. socket的含义 2. sockaddr结构 3. socket编程中UDP协议常用接口介绍 3.1 创建socket文件描述符（TCP/UDP、客户端 服务器） 3.2 绑定端口号（TCP/UDP，服务器） 3.3 接收数据…...
数据中心末端配电的数字化方案及设备选型
普通PDU和智能PDU有什么区别？ 机架安装配电盘或机架配电单元 (PDU) 是一种配备许多插座的设备，可将电力分配给位于数据中心机架或机柜内的服务器、存储设备和网络设备。领先的分析公司 IHS 将它们分为两大类： 1) 基本 PDU 提供可靠的配电。 2…...
k8s入门实战-Service
k8s入门实战-Service Service 和 Label Service 通过一组 Pod 路由通信。Service 是一种抽象，它允许 Pod 死亡并在 Kubernetes 中复制，而不会影响应用程序。在依赖的 Pod (如应用程序中的前端和后端组件)之间进行发现和路由是由Kubernetes Service 处理…...
Python量化交易：策略创建运行流程
学习目标 目标 知道策略的创建和运行知道策略的相关设置知道RQ的策略运行流程应用 无 1、体验创建策略、运行策略流程 1.1 创建策略 1.2 策略界面 2、 策略界面功能、运行介绍 2.1 一个完整的策略需要做的事情 选择策略的运行信息： 选择运行区间和初始资金选择回…...
企业该如何自主构建信息化管理系统？
实践证明，企业自己搭建的信息化系统灵活性更高，更能契合企业的需求。 我们可以借助零代码平台自主搭建，既提供了各个应用系统的标准化功能，又支持自定义搭建，可根据企业自身需求修改。 全球领先的信息技术研究和顾问公…...
linuxOPS基础_操作系统概述
计算机发展史 第一台计算机是1946 年2 月14 日诞生日，第一台名称ENIAC。体积一间屋子的大小，重量高达28t。 第一代：1946 – 1958 > 12 年 （电子管） 第二代：1958 – 1964 > 6 年 （晶体管…...
常用adb命令记录下
adb root 获取root 权限(以root权限运行ADB守护程序)adb remount 以读写方式重新挂载设备的文件系统adb reboot 重启设备adb devices 查看当前连接设备adb get-serialno 获取设备的序列号adb backup 备份设备的应用程序和数据adb bugreport 收集设备的当前状态信息以进行故障排…...
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…...
第二十一章 开发Productions - ObjectScript Productions - 延迟发送
文章目录 第二十一章 开发Productions - ObjectScript Productions - 延迟发送延迟发送 生成事件日志条目在 ObjectScript 中生成事件日志条目 第二十一章 开发Productions - ObjectScript Productions - 延迟发送 延迟发送 除了同步（等待）和异步&…...
用vue-full-calendar实现酒店预定管理展示
文章目录 前言一、关于vue-full-calendar二、使用步骤1. 引入库2. 使用库3. 开始编码4. 实际效果图展示5. 点击弹窗展示6. 弹窗展示效果图 总结 前言 近些天有位做酒店业务朋友问到我，有没有前端比较好用的预定日历查看插件，实际上我也没有研究过&#…...
DirectX12环境配置（1）
开发环境：visual studio 2022 第一种配置DirectX12环境得方式。首先创建一个c得空项目，然后创建一个main.cpp文件。把下面这串代码放进去，先不用管这串代码什么意思，后面会逐行逐句得讲解，因为我们创建得是空项目&am…...
)
Go-异常处理(defer recover panic)
系列文章目录 提示：goi语言基础文章 GO-异常处理 文章目录 系列文章目录前言一、关键字含义defer /recover 实现异常捕获和处理应用场景deferrecoverpanic 二、实例实例讲解上述几种情况 总结 前言 提示：这里可以添加本文要记录的大概内容： …...
【完美解决】mysql启动不了:本地计算机上的MySQL服务启动后停止
本文基于mysql8.0，5.7也可以参考 navicat 突然莫名其妙连不上mysql 查看服务，也启动不了，手动启动出现错误： 本地计算机上的MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止 20230525更新！ 先…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是，要注意以下几点： Django的表单验证与null无关：null参数控制的是数据库层面字段是否可以为NULL，而blank参数控制的是Django表单验证时字…...
提升移动端网页调试效率：WebDebugX 与常见工具组合实践
在日常移动端开发中，网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时，开发者迫切需要一套高效、可靠且跨平台的调试方案。过去，我们或多或少使用过 Chrome DevTools、Remote Debug…...
用js实现常见排序算法
以下是几种常见排序算法的 JS实现，包括选择排序、冒泡排序、插入排序、快速排序和归并排序，以及每种算法的特点和复杂度分析 1. 选择排序（Selection Sort） 核心思想：每次从未排序部分选择最小元素，与未排…...
JUC并发编程（二）Monitor/自旋/轻量级/锁膨胀/wait/notify/锁消除
目录 一 基础 1 概念 2 卖票问题 3 转账问题 二 锁机制与优化策略 0 Monitor 1 轻量级锁 2 锁膨胀 3 自旋 4 偏向锁 5 锁消除 6 wait /notify 7 sleep与wait的对比 8 join原理 一 基础 1 概念 临界区 一段代码块内如果存在对共享资源的多线程读写操作…...
LeetCode 0386.字典序排数：细心总结条件
【LetMeFly】386.字典序排数：细心总结条件 力扣题目链接：https://leetcode.cn/problems/lexicographical-numbers/ 给你一个整数 n ，按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。…...
零基础在实践中学习网络安全-皮卡丘靶场（第十一期-目录遍历模块）
经过前面几期的内容我们学习了很多网络安全的知识，而这期内容就涉及到了前面的第六期-RCE模块，第七期-File inclusion模块，第八期-Unsafe Filedownload模块。 什么是"遍历"呢：对学过一些开发语言的朋友来说应该知道&…...