通过游戏认识 --- 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请求 (二) ...
随机推荐
- 配置eNSP和本地电脑上的网卡相连，从而直接从本地电脑连接设备
- Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...
- iOS开发工程师必备技能（持续更新）
Objective-C Objective-C语言基础 library,framework的制作 Runtime 编程 LLVM 原理和调优 操作系统 iOS内存管理和调优 iOS的文件系统和沙盒机制 ...
- ubuntu6.04下安装Eclipse for C/C++ Development
ubuntu6.04下安装Eclipse for C/C++ Development 首先安装gcc/g++ 需要安装jdk,有的可以尝试安装openjdk. sudo apt-get install ...
- linux 远程操作（expect）
Expect是在Tcl基础上创建起来的,它还提供了一些Tcl所没有的命令,它可以用来做一些linux下无法做到交互的一些命令操作,在远程管 理方面发挥很大的作用. spawn命令激活一个Unix程序来 ...
- 如何快速部署 Prometheus？- 每天5分钟玩转 Docker 容器技术（85）
上一节介绍了 Prometheus 的核心,多维数据模型.本节演示如何快速搭建 Prometheus 监控系统. 环境说明 我们将通过 Prometheus 监控两台 Docker Host:192. ...
- Maven优雅的添加第三方Jar包
在利用Maven构建项目的时候会出现某些Jar包无法下载到本地的Repository中,鉴于这种情况比较普遍存在,特归纳以下解决问题办法:以 ojdbc14-10.2.0.4.0.jar为例[其它Ja ...
- ubuntu16.04 配置opensips服务器并编译pjsip测试
一.版本相关 1) ubuntu版本: 16.04 2) opensips版本:2.1.2 3) pjsip版本 :2.5.5 4) ffmpeg版本:3.3.4 5) sdl版本:2.0 6) vs ...
- SimpleDateFormat 常规用法
public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (d ...