前言 |
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化html文档操作、事件处理、动画设计和Ajax交互。
上一篇博客中,小编给大家展示了jQuery的一大优势,自定义插件。相信这个功能让各位都跃跃欲试,想要制作一个自己的插件了吧!在这里小编祝贺大家在成为大牛的路上向前跨了一步!!今天,小编就实现一个小游戏带大家领略jQuery的最大大优势,相比于原生的简洁,也就是“write Less,Do More”。
一、原生JS实现剪刀石头布游戏功能 |
话不多说,直接来代码!
HTML:
- <body>
- <div id="body">
- <div id="tips">
- 请选择
- </div>
- <div id="imgs">
- <img src="插件/img/jiandao.png" id="jiandao" onclick="jianDao()"class="img1"/>
- <img src="插件/img/shitou.png" id="shitou" onclick="shiTou()"class="img1"/>
- <img src="插件/img/bu.png" id="bu" onclick="bU()" class="img1"/>
- </div>
- <div id="jieguo">
- <div class="jieguo">
- <div>您选择了</div>
- <img src="插件/img/daiding.png" id="myImg" />
- </div>
- <div class="pk">PK</div>
- <div class="jieguo">
- <div>系统选择了</div>
- <img src="插件/img/daiding.png" id="computer" />
- </div>
- </div>
- <div id="score">
- 等待结果中....
- </div>
- <div id="scoreFen">
- <span>00</span>:<span>00</span>
- </div>
- </div>
- </body>
CSS:
- <style type="text/css">
- *{
- margin: 0px;
- padding: 0px;
- }
- #body{
- width: 100%;
- height: 700px;
- max-width: 500px;
- margin: 0 auto;
- background-color: #FAE738;
- overflow: hidden;
- }
- #tips{
- margin-top: 40px;
- text-align: center;
- color: white;
- font-size: 36px;
- font-weight: bold;
- }
- #imgs{
- width: 90%;
- margin: 20px auto;
- display: flex;
- justify-content: space-around;
- }
- #jieguo{
- width: 90%;
- margin: 30px auto;
- display: flex;
- justify-content: space-around;
- }
- #jieguo .jieguo div{
- height: 30px;
- width: 89px;
- line-height: 30px;
- text-align: center;
- color: white;
- }
- #jieguo .jieguo img{
- height: 89px;
- }
- #jieguo .pk{
- height: 120px;
- line-height: 120px;
- font-size: 48px;
- font-weight: bold;
- }
- #score,#scoreFen{
- text-align: center;
- font-size: 24px;
- color: red;
- padding-top: 10px;
- }
- </style>
js:
- 1 < script src = "JS/jquery-3.1.1.js"type = "text/javascript" > </script>/
- <script type="text/javascript">
- var jiandao = document.getElementById("jiandao");
- var shitou = document.getElementById("shitou");
- var bu = document.getElementById("bu");
- var myImg = document.getElementById("myImg");
- var computer = document.getElementById("computer");
- var score = document.getElementById("score");
- var scoreFen = document.getElementById("scoreFen");
- var myScore = 0,
- comScore = 0;
- var imgs = ["插件/img/jiandao.png", "插件/img/shitou.png", "插件/img/bu.png"];
- console.log(imgs[0]);
- jiandao.onclick = function() {
- var imgSrc = jiandao.getAttribute("src");
- myImg.setAttribute("src", imgSrc);
- checkImg(imgSrc);
- }
- shitou.onclick = function() {
- var imgSrc = shitou.getAttribute("src");
- myImg.setAttribute("src", imgSrc);
- checkImg(imgSrc);
- }
- bu.onclick = function() {
- var imgSrc = bu.getAttribute("src");
- myImg.setAttribute("src", imgSrc);
- checkImg(imgSrc);
- }
- function checkImg(imgSrc) {
- var myIndex = imgs.indexOf(imgSrc);
- var intervalId = setInterval(function() {
- var num = parseInt(Math.random() * 3);
- computer.setAttribute("src", imgs[num]);
- },
- 20);
- setTimeout(function() {
- clearInterval(intervalId);
- var comSrc = computer.getAttribute("src");
- var comIndex = imgs.indexOf(comSrc);
- if (myIndex == comIndex) {
- score.innerHTML = "平局!再战一轮吧!";
- } else if (myIndex == 0 && comIndex == 2 || myIndex == 1 && comIndex == 0 || myIndex == 2 && comIndex == 1) {
- score.innerHTML = "赢啦!继续虐他吧!";
- myScore++;
- } else {
- score.innerHTML = "输啦!继续努力吧!";
- comScore++;
- }
- myScore = (myScore + "").length < 2 ? "0" + myScore: myScore + "";
- comScore = (comScore + "").length < 2 ? "0" + comScore: comScore + "";
- scoreFen.firstElementChild.innerHTML = myScore;
- scoreFen.lastElementChild.innerHTML = comScore;
- },
- 400);
- }
- </script>
结果:
二、jQuery实现剪刀石头布 |
HTML代码与css代码请看上栗,毕竟只是实现功能的方式不用,布局是一样一样滴!
jQuery:
- <script type="text/javascript">
- $("#imgs>img").click(function() {
- checkImg($(this).attr("src"));
- });
- var imgs = ["插件/img/jiandao.png", "插件/img/shitou.png", "插件/img/bu.png"];
- function checkImg(imgSrc) {
- $("#myImg").attr("src", imgSrc);
- var id = setInterval(function() {
- var num = parseInt(Math.random() * 3);
- $("#computer").attr("src", imgs[num]);
- },
- 20);
- setTimeout(function() {
- clearInterval(id);
- var my = imgs.indexOf(imgSrc);
- var com = imgs.indexOf($("#computer").attr("src"));
- if (my == 0 && com == 2 || my == 1 && com == 0 || my == 2 && com == 1) {
- $("#score").html("恭喜!您赢啦!");
- var mf = parseInt($("#scoreFen span:eq(0)").text()) + 1;
- mf = mf < 10 ? "0" + mf: mf;
- $("#scoreFen span:eq(0)").text(mf);
- } else if (my == 0 && com == 0 || my == 1 && com == 1 || my == 2 && com == 2) {
- $("#score").html("平局!再战一轮吧!");
- } else {
- $("#score").html("哈哈哈哈你输啦!!!");
- var cf = parseInt($("#scoreFen span:eq(1)").text()) + 1;
- cf = cf < 10 ? "0" + cf: cf;
- $("#scoreFen span:eq(1)").text(cf);
- }
- },
- 500);
- }
- </script>
结果:
三、JS&jQuery |
大家从上边的例子也发现了,功能的实现上,原生用了60多行代码,而jQuery则用了30多行代码。少了将近的一般,这只是一个小游戏就有这么大的差距。
现在,小编带大家分析一下其中的原因:
1、jQuery在语法上,必须使用jQuery必须先导入JQuery.x.x.x.js文件;这个是必须的,小编就不多说了;
2、JQuery中的选择器:
$("选择器").函数();
原生中:获取节点要用.document.getElementById();
从这里就发现了吧,jQuery的简洁,这也是jQuery相对于原生最体现简洁的地方;
大家从上栗来看个例子:实现图片点击事件,并在下方改变更换图片,也就是替换图片url地址:
JS:
- bu.onclick = function() {
- var imgSrc = bu.getAttribute("src");
- myImg.setAttribute("src", imgSrc);
- checkImg(imgSrc);
- }
jQuery:
- function checkImg(imgSrc) {
- $("#myImg").attr("src", imgSrc);
- }
①使用$("")选中的对象是jQuery对象,只能调用jQuery的函数,而不能使用元素js的事件与函数;
$("#p").click(); √
$("#p").onclick = function(){}; ×
解释:$("#p")是jQuery对象,.onclick是原生JS事件
同理,使用document.getElement系列获取的原生JS对象,也不能使用jQuery相关函数。
②原生JS对象转为jQuery对象
可以使用$()包裹原生JS对象即可转为jQuery对象。
var p = document.getElementsByTagName("p");
$(p).click(); √ 原生JS的对象p已转为jQuery对象;
③jQuery对象转为原生JS对象。使用.get(index)或[index]:
$("#p").get(0).onclick = function(){} √
$("#p")[0].onclick = function(){} √
四、作者编 |
从上边,大家可以看出来了,jQuery真心很简洁而且好用!!但是,不可否认,原生JS真心灰常的强大,毕竟原生就是原生,有着无法取代的地位!只是代码的复杂性确实让我们又爱又恨!
而且,jQuery也是他的一个框架,虽然现在jQuery的地位已经和原生差不多相等了。但是小编提醒大家,一定要学号原生哟!
而且,小编听某位自称浩哥的帅锅说过,程序猿是一种非常懒得生物,所以大神们研究了这么多的框架,重要的是,有了这简单的jQuery,为何不用!
来源: http://www.cnblogs.com/zxt-17862802783/p/7617976.html