下载掌阅APP，畅读海量书库
立即打开
|
jQuery与JavaScript的区别 |
|
jQuery是使用JavaScript写成的程序库，因此由jQuery实现的功能，单独使用JavaScript也一定能实现。
从实现同一功能所需要的代码来看，使用jQuery具有绝对的优势。代码不仅简短，而且非常直观。
编写JavaScript代码的方式有多种，本书采用的是相对标准的实现方式。
在操作Web页面的DOM时，一般在JavaScript中使用document.getElementsByID 或document.getElementsByTagName等DOM的标准方法；另外，还有处理不同浏览器的兼容问题。
这样的操作非常耗费精力，并且需要很高的编程能力，可以说是使用JavaScript时需要跨越的一大障碍。
使用jQuery时，只需要使用DOM元素检索使用的CSS选择器即可方便地实现DOM操作功能，并且其中已包含最新的浏览器兼容处理。
下面比较在相同的HTML文本中使用不同方法实现同一功能的代码，实现的功能是将DIV标签中类名为“testClass”的标签中的文字颜色变为红色。
一般JavaScript的实现方法中首先需要使用document.getElementsByTagName方法检索所有的DIV元素，然后循环判断class属性，这时要使用DOM的getAttribute方法取得class名属性。由于IE与其他的浏览器的不同，因此必须考虑浏览器兼容处理问题。
这样的浏览器兼容问题随着浏览器或者版本的不同，在编程时必须兼顾。可想而知，不经过一定的经验积累无法编写出兼容性好的代码。
使用jQuery后只需要一行代码就可以实现所有的功能，在jQuery程序库中已经考虑浏览器兼容问题，不需要开发人员考虑。
$('div.testClass')部分与通常使用的CSS选择器的书写方法非常相似，颜色设定方法css('color','red')也非常直观。一行代码即可实现普通JavaScript需要十几行代码才能实现的功能，这正是jQuery的神奇之处。
jQuery曾被称为促进Ajax普及的一个主要JavaScript程序库，即Ajax库。Ajax是通过在JavaScript中使用浏览器中包含的HTTP通信功能来实现不用跳转页面即可实现页面局部内容更新的技术。实际上，在不同的浏览器间还存在微妙的差别，在JavaScript中从零开始实现Ajax功能需要花费一些时间。
下面以在文本文件test.txt中读取信息后显示在页面上的应用为例，文本文件中只有一些简单的信息，如“欢迎您”。读入的信息将显示在DIV元素中。
生成XMLHttpRequest对象的浏览器兼容处理的编写方式有多种，这里采用jQuery中的如下方式：
其中在浏览器中安装ActiveXObject时，使用Microsoft.XMLHTTP来生成XHR对象；否则使用XMLHttpRequest。
使用一般的JavaScript来完成同样的功能首先要生成XHR对象，然后用其按顺序执行open、send及onreadystatechange等命令。如果省略这段代码，则向服务器送出Form数据时，还必须由开发人员来设定URLEncode和HTTP头等满足Web标准的信息；另外，在生成XHR对象的部分因浏览器的不同实现方法的差异，所以必须考虑如同createHttpRequest函数中所做的浏览器兼容处理。
jQuery的相关代码简洁很多，指定了输出对象元素的ID后使用load方法读入test.txt文件即可。
自从Ajax流行以来，在JavaScipt的程序中经常会用到它，而使用jQuery后代码变得更加简洁。
实现结果如图4-1和图4-2所示。
图4-1 实现结果（1）
图4-2 实现结果（2）
在JavaScript中操作CSS的opacity属性可以实现DOM元素的渐入/渐出效果，需要注意的是因为在IE中相关属性的处理与其他浏览器有细微不同，所以要区分不同浏览器的处理逻辑。
渐入/渐出的编码方式有多种，下面的代码对ID为test的DIV元素实现渐入后执行渐出。
在上面的代码中通过每次改变不透明度1的同时，使用setTimeout函数每隔200/1000秒执行前后10次的画面更新来实现对象元素的渐入/渐出效果，其中包括IE中使用的style.filter与其他浏览器中使用的style.opacity的不同处理。
与此对照的是jQuery中使用$('#test')选中DOM元素，然后使用fadeIn()与fadeOut()方法直接实现了渐入/渐出效果，其中参数2000指定每隔2 000微秒（2秒）变化一次。
在一般的JavaScript编程中，因为事件处理涉及浏览器兼容，所以这是最让开发人员头痛的问题。这主要是因为IE中的事件处理的重要部分未遵循W3C标准，但其占据了很大的市场份额，所以不能忽视。
使用jQuery完全不用考虑浏览器的不同，而且可比普通方法更简单地实现事件处理。
下面是一个非常简单的实例，即当单击testClick元素时，在其下方的test元素中显示不同的文字。
提示
jQuery代码中实现click事件的语法$('选择').click(function(){代码})中的[click]部分可以替换为事件名，包括blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup，以及error。
在JavaScript代码中编写了注册单击testClick元素时的Click事件处理函数setEvent，以及输出文本内容的函数outputHTML。在函数setEvent中注册事件处理时分别使用了Web标准的addEventListener及IE独有的attachEvent方法，事先应判断这两种方法是否存在。
为了在页面中能响应事件，必须在页面导入时注册事件处理，本例在window.load事件处理中执行setEvent函数。
与此对照的是使用jQuery后，如下3步实现相同的功能。
（1）准备DOM后执行相关处理注册。
（2）注册ID为testClick元素的click事件处理。
（3）编写ID为test的元素的处理过程。
以上过程几乎是定型化处理，非常简洁明了。
实现结果如图4-3和图4-4所示。
图4-3 实现结果（3）
图4-4 实现结果（4）
可以通过操控DOM对象元素的CSS属性来控制DOM元素的移动、扩大、缩小及透明、非透明等效果，本节演示如何利用jQuery实现一系列连续的动画效果动作。
如果利用一般的JavaScript来实现这些效果，因为要保证效果的平滑显示，必须不仅要执行计算复杂的代码并不断改变的步长（step），而且还要兼顾不同浏览器的兼容性，所以要编写一段长而复杂的代码。因为代码长而复杂，所以此处略去JavaScript代码。
一般的JavaScript代码选择要实现动画演示的DOM对象，依次计算指定的width、height、left、top和opacity步长，并借助timer反复设置这些属性值，最后在windows.onload事件处理中注册事件处理过程。
单击按钮后演示一系列设定的动画动作。在$('#test')后从empty()开始设定了一系列的方法，通常称为“方法链”（methodchain），这是jQuery的特征之一。
这样使用jQuery很方便地实现了对同一DOM元素实现一系列动画效果的演示，简洁而易懂。以为方法传递的参数，如width、height、left、top和opacity等为例，只要稍有关于CSS的基本知识即可很直观地理解。
如果需要制作更高级的效果或功能，可以利用不断丰富的jQuery插件（Plugin），以及jQuery UI等扩展程序库。
实现结果如图4-5所示。
图4-5 实现结果