js與jQuery區別

jQuery能大大簡化Javascript程式的編寫，我最近花時間瞭解了一下jQuery，把我上手過程中的筆記和大家分享出來，希望對大家有所協助。

要使用jQuery，首先要在HTML代碼最前面加上對jQuery庫的引用，比如：

<script language="javascript" src="/js/jquery.min.js"></script>

庫檔案既可以放在本地，也可以直接使用知名公司的CDN，好處是這些大公司的CDN比較流行，使用者訪問你網站之前很可能在訪問別的網站時已經緩衝在瀏覽器中了，所以能加快網站的開啟速度。另外一個好處是顯而易見的，節省了網站的流量頻寬。

Google提供的

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

jQuery官方的

http://code.jquery.com/jquery-1.6.min.js

我自己弄了個子網域名稱，實際上也是跳轉到Google的CDN

http://cdn.akcms.com/js/jquery.js

jQuery代碼具體的寫法和原生的Javascript寫法在執行常見操作時的區別如下：

1 定位元素 
JS 
document.getElementById("abc") 

jQuery 
$("#abc") 通過id定位 
$(".abc") 通過class定位 
$("div") 通過標籤定位 

需要注意的是JS返回的結果是這個元素，jQuery返回的結果是一個JS的對象。以下例子中假設已經定位了元素abc。 

2 改變元素的內容 
JS 
abc.innerHTML = "test"; 
jQuery 
abc.html("test"); 

3 顯示隱藏元素 
JS 
abc.style.display = "none"; 
abc.style.display = "block"; 

jQuery 
abc.hide(); 
abc.show();

abc.toggle(); 
//在顯示和隱藏之間切換（2012.4.21更新）

4 獲得焦點 

JS和jQuery是一樣的，都是abc.focus(); 

5 為表單賦值 
JS 
abc.value = "test"; 
jQuery 
abc.val("test"); 

6 獲得表單的值 
JS 
alert(abc.value); 
jQuery 
alert(abc.val()); 

7 設定元素不可用 
JS 
abc.disabled = true; 
jQuery 
abc.attr("disabled", true);

8 修改元素樣式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);

JS
abc.className="test";
JQuery
abc.removeClass(); 
abc.addClass("test");

9 Ajax
JS
自己建立對象，自己處理瀏覽器安全色等亂七八糟的問題，略去不表
jQuery
$.get("abc.php?a=1&b=2", recall);
postvalue = "a=b&c=d&abc=123";
$.post("abc.php", postvalue, recall);

function recall(result) {
alert(result);
//如果返回的是json，則如下處理
//result = eval('(' + result + ')'); 
//alert(result);
}

10 判斷複選框是否選中
jQuery
if(abc.attr("checked") == "checked")
注意：網上說的.attr("checked") == true實際上不能用，上面這個測試過能用