杭州富阳建设局网站,wordpress企业仿站,做网站的成本费用,阿里巴巴官网首页1688下载博主简介#xff1a;想进大厂的打工人博主主页#xff1a;xyk:所属专栏: JavaEE初阶 目录
文章目录 一、JQuery是什么 二、JQuery项目 2.1 猜数字 2.2 表白墙 2.3 聚合搜索 2.4 计算器 一、JQuery是什么 jQuery是一个快速、简洁的JavaScript框架#xff0c;是继Prototype之… 博主简介想进大厂的打工人博主主页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?fromModulelemma_inlink)发布。jQuery设计的宗旨是“write LessDo 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 langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleWebAPI Test/titlescript srcjquery.min.js/script/headbody idbodydivh3猜数字游戏/h3玩家请输入一个 1 - 10 的数字 input typetext idinput_numberbrinput typebutton value查看结果 onclickselectResultJq()div idresult/div/divscript// jquery猜数字游戏function selectResultJq(){// 产生随机数 1-10var randomNum 1Math.floor(Math.random()*10);// document.getElementById(input_num).valuevar userInputNum jQuery(#input_number).val();var msg;if(randomNumuserInputNum){msgh4恭喜猜对了/h4;}else{msgh4抱歉猜错了正确的数字是randomNum/h4;}// document.getElementById(result_div).innerHTML msg;jQuery(#result).html(msg);}/script/body
/html2.2 表白墙
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表白墙/titlescript srcjquery.min.js/script
/head
bodydiv stylewidth: 100%;text-align: center;h2表白墙/h2谁nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;input idusernamep/p对谁nbsp;nbsp;nbsp;input idtousernamep/p说什么input idmsgp/pinput typebutton value 提 交 onclickmysub()p/pdiv iddiv_allmsg/div/divscriptfunction 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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title聚合搜索/titlescript srcjquery.min.js/script
/head
bodydiv stylewidth: 100%;text-align: center;input typebutton value 必应 onclickupSearch(https://www.bing.com/) nbsp;nbsp;nbsp;input typebutton value 搜狗 onclickupSearch(https://www.sogou.com/) nbsp;nbsp;nbsp;input typebutton value 360 onclickupSearch(https://www.so.com/) nbsp;nbsp;nbsp;/divhriframe idifr stylewidth: 100%;height: 600px; srchttps://www.bing.com//iframescriptfunction upSearch(url){jQuery(#ifr).attr(src,url);}/script
/body
/html 2.4 计算器
cal.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjquery.min.js/scriptlink relstylesheet hrefcal.css
/head
bodydiv classcalculatordiv classcalform action#h2计算器/h2div classrow数字一input typetext idc1/div div classrow数字二input typetext idc2/divdiv classoptioninput typebutton value相加 onclickadd() ida!-- id不能与函数重复否则会误判 --input typebutton value相减 onclicksub() idsinput typebutton value相乘 onclickmul() idminput typebutton value相除 onclickdiv() idd/divdiv classcleardiv classresetinput typereset value清空 idup onclickupdate()/div/div/form/div/divscriptfunction 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);
}效果
