通过游戏认识 --- 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 Synchronization between processes
进程间同步,可以使用lock进行控制. 官方文档的例子如下: from multiprocessing import Process, Lock def f(l, i): l.acquire() pr ...
- js 浏览器上调试方法多样
1.alert(111) 直接打印出 111 2.debugger 写在代码要调试的地方 3.直接在控制台 source 里找到要调试的代码打断点 4.console 常用的 ...
- Two-phase clustering process for outliers detection 文章翻译
基于二阶段聚集模式的异常探测 M.F .Jiang, S.S. Tseng *, C.M. Su 国立交通大学计算机与信息科学系,中国台北市新竹路100150号 1999年11月17日; 2000年4 ...
- java多线程编程题之连续打印abc的几种解法
一道编程题如下: 实例化三个线程,一个线程打印a,一个打印b,一个打印c,三个线程同时执行,要求打印出6个连着的abc 题目分析: 通过题意我们可以得出,本题需要我们使用三个线程,三个线程分别会打印6 ...
- IIS配置發佈網站常見問題及設置
解决方法: 修改.NET Framework 版本为相应版本即可,我以前用的是2.0换成4.0的时候出现这个错误. 我的win7系统, 1.打开IIs点击IIS根节点 2.看右边的“操作”->点 ...
- win10 uwp 通知Toast
win10通知使用Toast 可以使用win10 模板添加通知 var t = Windows.UI.Notifications.ToastTemplateType.ToastText02; 使用Ge ...
- win10 uwp 如何拖动一个TextBlock的文字到另一个TextBlock
我在堆栈网看到有人问 如何拖动一个TextBlock的文字到另一个TextBlock 于是看到一个大神给出的方法,下面我就来和大家说下如何拖动 一开始我们需要一个界面,就放两个TextBlock 一个 ...
- python中时间日期格式化符号：
%y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数(0-23) %I 12小时制小时数( ...
- 解析 .Net Core 注入 (2) 创建容器
在上一节的学习中,我们已经知道了通过 IServiceCollection 拓展方法创建 IServiceProvider 默认的是一个类型为 ServiceProvider 对象,并且实际提供创建对 ...
- MVVM模式下 DataTemplate 中控件的绑定
今天给ListBox中通过DataTemplate生成的Button绑定命令时,一开始Button始终找不到绑定的命令.现找到了正确的绑定方式,特来记录一下. 先上个正确的示例: <ListBo ...