通过游戏认识 --- 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请求 (二) ...
随机推荐
- tomcat 内存大小配置
Tomcat本身不能直接在计算机上运行,需要依赖于硬件基础之上的操作系统和一个java虚拟机.JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序.这个初始内存和最大内存在一定程度都会 ...
- this到底指向哪里
this指向调用它的对象 首先要明确,this指向调用方,谁调用,this指向谁. 直接调用 举个栗子: var test = 'window' ; function testThis () { va ...
- Silverlight:telerik RadControls for Silverlight 主题使用心得
默认情况下: telerik RadControls控件使用的是Office Black 主题,就算在App.xaml.cs里写上 StyleManager.ApplicationTheme = ne ...
- zabbix使用mysql数据库 对表分区
zabbix删除历史数据 mysql 表自动分区.删除 ----2016年终总结 二 zabbix清理历史数据是个比较蛋疼的问题,尤其在监控数据较多时,一方面无法彻底释放历史数据空间,一方面数据库删除 ...
- 从零开始搭建框架SSM+Redis+Mysql（二）之MAVEN项目搭建
从零开始搭建框架SSM+Redis+Mysql(二)之MAVEN项目搭建 废话不说,直接撸步骤!!! 1.创建主项目:ncc-parent 选择maven创建项目,注意在创建项目中,packing选择 ...
- wpf GifBitmapDecoder 解析 gif 格式
在网上有很多图片都是gif,那么如何在 wpf 解析 gif? 本文告诉大家如何使用 GifBitmapDecoder 把gif分开为一张一张,获得他的信息. 如果需要把一个 gif 分开,使用的代码 ...
- Python学习笔记（九）
Python学习笔记(九): 装饰器(函数) 内置函数 1. 装饰器 1. 作用域 2. 高阶函数 3. 闭包 如果在一个内部函数里,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就 ...
- SpringMVC 异常的处理
Spring MVC处理异常有3种方式: (1)使用Spring MVC提供的简单异常处理器SimpleMappingExceptionResolver: (2)实现Spring的异常处理接口Hand ...
- spacemacs 初始安装报错
尝试使用emcas的配置文件spacemacs,第一次安装启动时,界面为纯白色,而且在输入完几个配置选项后,报了一个错误 Symbol's value as variable is void 根据官网 ...
- SQL——按照季度，固定时间段，分组统计数据
最近在工作中接到了一个需求,要求统计当月以10天为一个周期,每个周期的数据汇总信息.假设有一张表如下: 表table_test中 ID AMOUNT CREATE_ ...