从JS到JQuery
来源:互联网 发布:万网域名注册要多少钱 编辑:程序博客网 时间:2024/06/05 10:41
JQuery、JS很相似的两个名字,这两者之间一定有莫名的联系。在学习这两个知识之前,就有了这样的想法。学完之后,发现自己的猜测没错!
先来从概念上分析JQuery和JS。
JS全称JavaScript,是一种具有面向对象能力的、解释型的程序设计语言,一种直译式脚本语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的Web客户端脚本语言。因为他不需要在一个语言环境下运行,而只需要支持它的浏览器即可。它的主要目的是,验证发往服务器端的数据、增加Web互动、加强用户体验度等。
在介绍JQuery之前,我们先来看一下什么叫JavaScript库。
把各种常用的代码片段,组织起来放在一个js文件里,组成一个包,这个包就是JavaScript库。简单来说,就是将常用的代码进行有效地封装。
回想JQuery,这个概念和JQuery的概念很像。对,JS包就是我们所说的JQuery。
Jquery 就是把JS中常用的方法进行了封装,是基于JS语言的一个框架。JQuery封装的这些方法是通过JS实现的,就好比把JS写作了一个class类,还是js代码,调用它就像调用类那样。
每个东西的使用,都是由于它的优点。JQuery的优点就是能将JS代码和HTML代码分离,便于代码和维护和修改。
小Demo:分别用js和jquery把数据填充到div里面显示出来。
Html代码:
首先,引入JQuery,使用JQuery的js代码Jq.js和没有使用的Js.js。
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><script type="text/javascript"src="JQuery.js"></script><script type="text/javascript"src="Jq.js"></script><script type="text/javascript"src="Js.js"></script></span></span>
Body中的代码段:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><div id="show"></div></span>要填充的数据为“这是一个测试例子”。
使用JQuery的代码段:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">$(function(){ vardata="这是一个测试例子"; $("#show").html(data);});</span></span>未使用JQuery的代码段:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">window.onload = function () { var data ="这是一个测试例子"; document.getElementById("show").innerHTML= data;};</span></span>
对比这两段代码,那个代码更容易写?那个代码量更少?当然,是使用了JQuery后的了(少量效果不明显,有兴趣的朋友可写个长的Demo进行比较)。但,我们可以看出,使用了JQuery的代码段就好像在写CSS代码一样,很容易记住。没有使用的,就不那么容易写了。
- 从JS到JQuery
- 从JQuery到JS 关于闭包
- Jquery ajax 从action中传多个参数到js里面使用
- 表单验证-从js原生代码到Jquery validate
- 从JavaScript 到 JQuery (1)
- 从Ajax到JQuery Ajax
- 从Ajax到JQuery Ajax
- 从JavaScript 到 JQuery (2) JQuery选择器
- [JavaScript][jQuery]jQuery从入门到精通
- 一棵树,从jquery到Ext 的研究
- 从JQuery到大型应用(转载)
- 专题:JQuery从入门到精通
- 从jQuery的缓存到事件监听
- jQuery从入门到精通(学习笔记)
- JQuery从基础到使用进阶
- Jquery Moblie 从入门到精通 1
- 《jQuery从入门到精通》前言
- 《jQuery从入门到精通》目录
- LeetCode Pascal's Triangle & Pascal's Triangle II
- Day21-日期时间对话框
- PhoneGap+Cordova+SenchaTouch-01-环境搭建
- 史上最详细MFC调用mapX5.02.26步骤(附地图测试GST文件)
- python操作Excel读写--使用xlrd
- 从JS到JQuery
- iOS8 在ipad 上面显示UIAlertController
- android动画详解
- AlertDialog自定义布局,类似ListView选择和Login登录界面的。视频教程看到的,留着哪天用得到
- 1月14号
- JavaScript基礎
- 验证码破解技术
- Android view绘制机制探究
- boa服务器移植