通过游戏认识 --- JQuery与原生JS的差异
| 前言 |
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
今天，影子就通过一个小游戏，剪刀石头布，来给大家介绍下，两者之间的区别。
| 1、原生JS实现游戏 |
HTML：
1 <body>
2
3 <div id="body">
4 <div id="tips">
5 请选择
6 </div>
7
8 <div id="imgs">
9 <img src="插件/img/jiandao.png" id="jiandao" onclick="jianDao()"class="img1"/>
10 <img src="插件/img/shitou.png" id="shitou" onclick="shiTou()"class="img1"/>
11 <img src="插件/img/bu.png" id="bu" onclick="bU()" class="img1"/>
12 </div>
13
14 <div id="jieguo">
15 <div class="jieguo">
16 <div>您选择了</div>
17 <img src="插件/img/daiding.png" id="myImg" />
18 </div>
19
20 <div class="pk">PK</div>
21
22 <div class="jieguo">
23 <div>系统选择了</div>
24 <img src="插件/img/daiding.png" id="computer" />
25 </div>
26 </div>
27
28 <div id="score">
29 等待结果中....
30 </div>
31
32 <div id="scoreFen">
33 <span>00</span>：<span>00</span>
34 </div>
35 </div>
36 </body>
css:
1 <style type="text/css">
2 *{
3 margin: 0px;
4 padding: 0px;
5 }
6
7 #body{
8 width: 100%;
9 height: 700px;
10 max-width: 500px;
11 margin: 0 auto;
12 background-color: #FAE738;
13 overflow: hidden;
14 }
15
16 #tips{
17 margin-top: 40px;
18 text-align: center;
19 color: white;
20 font-size: 36px;
21 font-weight: bold;
22 }
23
24 #imgs{
25 width: 90%;
26 margin: 20px auto;
27 display: flex;
28 justify-content: space-around;
29 }
30
31 #jieguo{
32 width: 90%;
33 margin: 30px auto;
34 display: flex;
35 justify-content: space-around;
36 }
37
38 #jieguo .jieguo div{
39 height: 30px;
40 width: 89px;
41 line-height: 30px;
42 text-align: center;
43 color: white;
44 }
45
46 #jieguo .jieguo img{
47 height: 89px;
48 }
49
50 #jieguo .pk{
51 height: 120px;
52 line-height: 120px;
53 font-size: 48px;
54 font-weight: bold;
55 }
56
57 #score,#scoreFen{
58 text-align: center;
59 font-size: 24px;
60 color: red;
61 padding-top: 10px;
62 }
63
64 </style>
js:
1 <script src="JS/jquery-3.1.1.js" type="text/javascript"></script>
1 <script type="text/javascript">
2
3 var jiandao = document.getElementById("jiandao");
4 var shitou = document.getElementById("shitou");
5 var bu = document.getElementById("bu");
6 var myImg = document.getElementById("myImg");
7 var computer = document.getElementById("computer");
8 var score = document.getElementById("score");
9 var scoreFen = document.getElementById("scoreFen");
10
11 var myScore=0,comScore=0;
12
13 var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"];
14 console.log(imgs[0]);
15 jiandao.onclick = function(){
16 var imgSrc = jiandao.getAttribute("src");
17
18 myImg.setAttribute("src",imgSrc);
19 checkImg(imgSrc);
20 }
21
22 shitou.onclick = function(){
23 var imgSrc = shitou.getAttribute("src");
24 myImg.setAttribute("src",imgSrc);
25 checkImg(imgSrc);
26 }
27
28 bu.onclick = function(){
29 var imgSrc = bu.getAttribute("src");
30 myImg.setAttribute("src",imgSrc);
31 checkImg(imgSrc);
32 }
33
34
35 function checkImg(imgSrc){
36 var myIndex = imgs.indexOf(imgSrc);
37 var intervalId = setInterval(function(){
38 var num = parseInt(Math.random()*3);
39 computer.setAttribute("src",imgs[num]);
40
41 },20);
42
43 setTimeout(function(){
44 clearInterval(intervalId);
45 var comSrc = computer.getAttribute("src");
46 var comIndex = imgs.indexOf(comSrc);
47 if(myIndex==comIndex){
48 score.innerHTML = "平局！再战一轮吧！";
49 }else if(myIndex==0&&comIndex==2
50 || myIndex==1&&comIndex==0
51 || myIndex==2&&comIndex==1){
52 score.innerHTML = "赢啦！继续虐他吧！";
53 myScore++;
54 }else{
55 score.innerHTML = "输啦！继续努力吧！";
56 comScore++;
57 }
58 myScore = (myScore+"").length<2?"0"+myScore:myScore+"";
59 comScore = (comScore+"").length<2?"0"+comScore:comScore+"";
60
61 scoreFen.firstElementChild.innerHTML = myScore;
62 scoreFen.lastElementChild.innerHTML = comScore;
63
64 },400);
65 }
66
67
68
69 </script>
结果：
| 2、JQuery实现游戏 |
HTML代码与css代码跟上面是一样的。
jQuery：
1 <script type="text/javascript">
2 $("#imgs>img").click(function(){
3 checkImg($(this).attr("src"));
4 });
5
6 var imgs = ["插件/img/jiandao.png","插件/img/shitou.png","插件/img/bu.png"];
7 function checkImg(imgSrc){
8 $("#myImg").attr("src",imgSrc);
9 var id = setInterval(function(){
10 var num = parseInt(Math.random()*3);
11 $("#computer").attr("src",imgs[num]);
12 },20);
13
14 setTimeout(function(){
15 clearInterval(id);
16 var my = imgs.indexOf(imgSrc);
17 var com = imgs.indexOf($("#computer").attr("src"));
18 if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){
19 $("#score").html("恭喜！您赢啦！");
20 var mf = parseInt($("#scoreFen span:eq(0)").text())+1;
21 mf = mf<10 ? "0"+mf : mf;
22 $("#scoreFen span:eq(0)").text(mf);
23 }else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){
24 $("#score").html("平局！再战一轮吧！");
25 }else{
26 $("#score").html("哈哈哈哈你输啦！！！");
27 var cf = parseInt($("#scoreFen span:eq(1)").text())+1;
28 cf = cf<10 ? "0"+cf : cf;
29 $("#scoreFen span:eq(1)").text(cf);
30 }
31 },500);
32 }
33 </script>
34
结果：
| 3、JQuery与原生JS |
从大家从上边的例子中，相信大家发现了，实现相同的功能，两者的代码量是不一样的。JQuery比JS少了许多，而这只是一个小游戏的差距。
现在，影子就来分析下原因：
1、首先，要使用jQuery就必须先导入JQuery.x.x.x.js文件；
2、JQuery中的选择器： $("选择器").函数();
原生中：获取节点要用.document.getElementById();
下面给大家举个例子：
JS：
1 bu.onclick = function(){
2 var imgSrc = bu.getAttribute("src");
3 myImg.setAttribute("src",imgSrc);
4 checkImg(imgSrc);
5 }
jQuery：
1 function checkImg(imgSrc){
2 $("#myImg").attr("src",imgSrc);
3 }
3.2原生JS对象与JQuery对象
①使用$("")选中的对象是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方便，但是，大家也不能因此而放弃JS要知道，JQuery也只是从JD封装打包而来的。
而且，在一些框架中，也是不支持JQuery而是要求使用JS的。所以，大家在追求便捷的时候，也不要忘了“基础”哦！！
通过游戏认识 --- JQuery与原生JS的差异的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- 通过案例来剖析JQuery与原生JS
首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- JQuery和原生JS跨域加载JSON数据或HTML。
前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...
- jquery与原生JS实现增加、减小字号功能
预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- jQuery和原生JS的对比
原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...
- JavaWeb_Ajax通过JQuery和原生js异步传输数据
菜鸟教程 传送门 AJAX 优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 XMLHttpRequest 对象 传送门 (一) [JQuery]定时发送ajax请求 (二) ...
随机推荐
- 【转】Python中实现远程调用（RPC、RMI）简单例子
远程调用使得调用远程服务器的对象.方法的方式就和调用本地对象.方法的方式差不多,因为我们通过网络编程把这些都隐藏起来了.远程调用是分布式系统的基础. 远程调用一般分为两种,远程过程调用(RPC)和远程 ...
- zoj2818 Root of the Problem 简单数学 开方
Root of the Problem Time Limit: 2 Seconds Memory Limit: 65536 KB Given positive integers B and ...
- 由String的构造方法引申出来的java字符编码
在String类的constructors中,有一个constructor是将int数组类型转化为字符串: int[] num = {48,49,50,51,52}; String numStr = ...
- 一份传世典文：十年编程（Teach Yourself Programming in Ten Years）
原文:Teach Yourself Programming in Ten Years作者:郭晓刚翻译:郭晓刚(foosleeper@163.net)最后修订日期:2004-3-192005-01-12 ...
- “华尔街之狼”：ICO是“史上最大骗局”
勘探船进村的那个夏季,父亲从城里带回了那把手电.手电的金属外壳镀了镍,看上去和摸起来一样冰凉.父亲进城以前采了两筐枸杞子,他用它们换回了那把锃亮的东西.父亲一个人哼着<十八摸>上路,鲜红透 ...
- 关于tarjan算法的空间优化
最近随着对tarjan算法理解的加深,我发现用另外一种途径实现tarjan的方法,且可以省去DFN数组,大大节省了空间.经过大量测试,已经无误.以下将分阶段阐述进行优化的过程. 第一阶段 下面来说一下 ...
- NOIP2015运输计划（树上前缀和+LCA+二分）
Description 公元 2044 年,人类进入了宇宙纪元. L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球. 小 P 掌管 ...
- JAVA提高八：动态代理技术
对于动态代理,学过AOP的应该都不会陌生,因为代理是实现AOP功能的核心和关键技术.那么今天我们将开始动态代理的学习: 一.引出动态代理 生活中代理应该是很常见的,比如你可以通过代理商去买电脑,也可以 ...
- *.do和*.action的区别
最近发现个问题,都是SpringMVC 请求地址有的是*.do有的是*.action,想了半天区别没想出来. struts早期的1版本,以.do为后缀.同时spring的MVC也是以.do为后缀.几年 ...
- JMeter 压力测试使用CSV参数
表示之前从没用过JMeter所以记录一下使用过程 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测 ...