- jQuery即学即用
- 王志刚编著
- 634字
- 2020-08-27 04:35:55
第4章 jQuery与JavaScript的区别
jQuery是使用JavaScript写成的程序库，因此由jQuery实现的功能，单独使用JavaScript也一定能实现。
从实现同一功能所需要的代码来看，使用jQuery具有绝对的优势。代码不仅简短，而且非常直观。
编写JavaScript代码的方式有多种，本书采用的是相对标准的实现方式。
4.1 简单的DOM操作
在操作Web页面的DOM时，一般在JavaScript中使用document.getElementsByID或document.getElementsByTagName等DOM的标准方法；另外，还有处理不同浏览器的兼容问题。
这样的操作非常耗费精力，并且需要很高的编程能力，可以说是使用JavaScript时需要跨越的一大障碍。
使用jQuery时，只需要使用DOM元素检索使用的CSS选择器即可方便地实现DOM操作功能，并且其中已包含最新的浏览器兼容处理。
下面比较在相同的HTML文本中使用不同方法实现同一功能的代码，实现的功能是将DIV标签中类名为“testClass”的标签中的文字颜色变为红色。
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>test</title>
</head>
<body>
<!-- 操作对象的DOM -->
<div class="testClass">类名为testClass</div>
<div class="testClass">类名为testClass</div>
<div class="testClass">类名为testClass</div>
<div>母DIV
<div class="testClass">类名为testClass</div>
</div>
<div class="noTestClass">类名为noTestClass</div>
<p class="testClass">类名为testClass的P标签</p>
</body>
</html>
JavaScript代码
<script type="text/javascript">
//检索DIV元素
var divs = document.getElementsByTagName("div");
//循环检索出的DIV元素
for(var i=0;i<divs.length;i++){
//因为在IE环境中有不同的属性值（className），所以追加相关判断
//类名为“testClass”，进行颜色变换
if((
divs[i].getAttribute("className") ||
divs[i].getAttribute("class")
)=="testClass"){
//将颜色属性变为红色
divs[i].style.color = "red";
}
}
</script>
jQuery代码
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//将类名为“testClass”的DIV元素的文字颜色变为红色
$("div.testClass").css("color","red");
</script>
一般JavaScript的实现方法中首先需要使用document.getElementsByTagName方法检索所有的DIV元素，然后循环判断class属性，这时要使用DOM的getAttribute方法取得class名属性。由于IE与其他的浏览器的不同，因此必须考虑浏览器兼容处理问题。
这样的浏览器兼容问题随着浏览器或者版本的不同，在编程时必须兼顾。可想而知，不经过一定的经验积累无法编写出兼容性好的代码。
使用jQuery后只需要一行代码就可以实现所有的功能，在jQuery程序库中已经考虑浏览器兼容问题，不需要开发人员考虑。
$("div.testClass")部分与通常使用的CSS选择器的书写方法非常相似，颜色设定方法css("color","red")也非常直观。一行代码即可实现普通JavaScript需要十几行代码才能实现的功能，这正是jQuery的神奇之处。
4.2 Ajax的简单应用
jQuery曾被称为促进Ajax普及的一个主要JavaScript程序库，即Ajax库。Ajax是通过在JavaScript中使用浏览器中包含的HTTP通信功能来实现不用跳转页面即可实现页面局部内容更新的技术。实际上，在不同的浏览器间还存在微妙的差别，在JavaScript中从零开始实现Ajax功能需要花费一些时间。
下面以在文本文件test.txt中读取信息后显示在页面上的应用为例，文本文件中只有一些简单的信息，如“欢迎您”。读入的信息将显示在DIV元素中。
HTML代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>test</title>
</head>
<body>
<!--操作对象的DOM-->
<div class="testClass">显示文字内容</div>
</body>
</html>
JavaScript代码
<script type="text/javascript">
//XHR对象生成函数
function createHttpRequest(){
return
window.ActiveXObject?
//Win IE用
new ActiveXObject("Msxml2.XMLHTTP")||
new ActiveXObject("Microsoft.XMLHTTP") :
//Win Mac Linux fireFox,opera,safari等用
new XMLHttpRequest();
}
function sendRequest(id,url){
//生成XHR对象
var obj = createHttpRequest();
//接受callback方法
obj.onreadystatechange = function(){
if(obj.readyState == 4){
//接受时（obj.readyState == 4）
//将结果显示在对应的元素中
document.getElementById(id).innerHTML=obj.
responseText;
}
}
//open方法
obj.open("GET",url);
//send方法
obj.send("");
}
//使用Ajax显示文件的内容
sendRequest("testDiv","test.txt");
</script>
jQuery代码
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//将从文件test.txt中读取的信息放在ID名为“testDiv”的元素中
$("#testDiv").load("test.txt");
</script>
生成XMLHttpRequest对象的浏览器兼容处理的编写方式有多种，这里采用jQuery中的如下方式：
Window.ActiveXObject ? new ActiveXObject(“Microsoft.XMLHTTP”) :
new XMLHttpRequest();
其中在浏览器中安装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）
4.3 实现简单的渐入/渐出效果
在JavaScript中操作CSS的opacity属性可以实现DOM元素的渐入/渐出效果，需要注意的是因为在IE中相关属性的处理与其他浏览器有细微不同，所以要区分不同浏览器的处理逻辑。
渐入/渐出的编码方式有多种，下面的代码对ID为test的DIV元素实现渐入后执行渐出。
HTML代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>test</title>
<style type="text/css">
#test{width:100px;height:100px;background-
color:yellow;display:none}
</style>
</head>
<body>
<!--操作对象的DOM-->
<div id="test"></div>
</body>
</html>
JavaScript代码
<script type="text/javascript">
fadeOpacity(“test”,-1);//渐入
fadeOpacity(“test”,1);//渐出
//渐入/渐出函数
function fadeOpacity(id,swt,callback){
//计数初始化
if(!window.fadeOpacity[id]) fadeOpacity[id]= 0;
//参数swt为-1时，向透明变化；为1时，向非透明变化
var f = (swt==1)?"0123456789":"9876543210";
//渐入/渐出处理
if(fadeOpacity[id] < f.length-1){
var opa = f.charAt(fadeOpacity[id])/10;
if( opa*10 == 10 ) return;
SetOpacity(id,opa);//改变不透明度
//200/1000秒后执行fadeOpacity
setTimeout('fadeOpacity("'+id+'","'+swt+'")',200);
}else{//结束
SetOpacity(id,(swt==1)?10:0);
fadeOpacity[id]= null;
}
//计数增加
fadeOpacity[id]++;
}
//不透明度设置函数
function SetOpacity(id,arg){
if(document.all){
document.all(id).style.filter = "alpha(opacity="+(arg * 100)+")";
}else if(document.getElementById) document.getElementById(id).
style.opacity =arg
}
</script>
jQuery代码
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("#test")
.fadeIn(2000)//渐入
.fadeOut(2000)//渐出
</script>
在上面的代码中通过每次改变不透明度1的同时，使用setTimeout函数每隔200/1000秒执行前后10次的画面更新来实现对象元素的渐入/渐出效果，其中包括IE中使用的style.filter与其他浏览器中使用的style.opacity的不同处理。
与此对照的是jQuery中使用$("#test")选中DOM元素，然后使用fadeIn()与fadeOut()方法直接实现了渐入/渐出效果，其中参数2000指定每隔2000微秒（2秒）变化一次。
4.4 事件处理
在一般的JavaScript编程中，因为事件处理涉及浏览器兼容，所以这是最让开发人员头痛的问题。这主要是因为IE中的事件处理的重要部分未遵循W3C标准，但其占据了很大的市场份额，所以不能忽视。
使用jQuery完全不用考虑浏览器的不同，而且可比普通方法更简单地实现事件处理。
下面是一个非常简单的实例，即当单击testClick元素时，在其下方的test元素中显示不同的文字。
HTML代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>test</title>
</head>
<body>
<!--操作对象的DOM-->
<div id="testClick">单击此处</div>
<div id="test">在此显示新内容</div>
</body>
</html>
JavaScript代码
<script type="text/javascript">
//向ID为test的元素设定值函数
function outputHTML(){
var test = document.getElementById("test");
test.innerHTML = "欢迎您！";
}
//向ID为testClick元素中追加事件处理函数
function setEvent(){
//取得testClick元素
var el = document.getElementById("testClick");
if(el.addEventListener){
//IE以外用
el.addEventListener('click',outputHTML,false);
}else if(el.attachEvent){
//IE用
el.attachEvent('onclick',outputHTML);
}
}
//页面导入时执行
window.onload=function(){
setEvent();
}
</script>
jQuery代码
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//准备DOM后执行function中的内容
jQuery(function($){
//ID为testClick的元素被单击后执行的函数
$("#testClick").click(function(){
//在ID为test的元素中显示“欢迎您！”
$("#test").html("欢迎您！");
});
});
</script>
提示
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）
4.5 实现复杂的动画效果
可以通过操控DOM对象元素的CSS属性来控制DOM元素的移动、扩大、缩小及透明、非透明等效果，本节演示如何利用jQuery实现一系列连续的动画效果动作。
如果利用一般的JavaScript来实现这些效果，因为要保证效果的平滑显示，必须不仅要执行计算复杂的代码并不断改变的步长（step），而且还要兼顾不同浏览器的兼容性，所以要编写一段长而复杂的代码。因为代码长而复杂，所以此处略去JavaScript代码。
HTML代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
#test{ width:100px;height:100px;background-color:yellow;
display:none }
</style>
</head>
<body>
<!--操作对象的DOM-->
<input type="button" id="btn1" value="GO!"/>
<div id="test"></div>
</body>
</html>
一般的JavaScript代码选择要实现动画演示的DOM对象，依次计算指定的width、height、left、top和opacity步长，并借助timer反复设置这些属性值，最后在windows.onload事件处理中注册事件处理过程。
jQuery代码
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//准备DOM后执行function内的内容
jQuery(function($){
//按钮被单击后执行的函数
$("#btn1").click(function(){
//test元素的系列动作
$("#test")
.empty() //清空元素
.animate({width:30}) //宽增加30 px
.animate({height:30},1000) //在1秒之内将高增加30px
.animate({left:300}) //向右移动300 px
.animate({top:200}) //向下移动200 px
.animate({left:"-=300"}) //向左移动-300 px
.animate({top:"-=200"}) //向上移动-200 px
.animate({opacity:0.5}) //将不透明度变为0.5
.animate({width:300},2000) //在2秒内将宽度增加300px
.fadeOut() //渐出
.slideDown() //幻灯点灭效果
.slideUp() //幻灯点亮效果
.fadeIn("slow") //渐入（缓慢的）
.animate({height:30}, //高度增加300 px
function(){
//动作结束后显示文字
$(this).html("动画结束");
}
)
});
});
</script>
单击按钮后演示一系列设定的动画动作。在$("#test")后从empty()开始设定了一系列的方法，通常称为“方法链”（method chain），这是jQuery的特征之一。
这样使用jQuery很方便地实现了对同一DOM元素实现一系列动画效果的演示，简洁而易懂。以为方法传递的参数，如width、height、left、top和opacity等为例，只要稍有关于CSS的基本知识即可很直观地理解。
如果需要制作更高级的效果或功能，可以利用不断丰富的jQuery插件（Plugin），以及jQuery UI等扩展程序库。
实现结果如图4-5所示。
图4-5 实现结果
