- jQuery即學即用
- 王志剛編著
- 633字
- 2019-01-09 16:34:25
第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 實現結果
