jQuery快速上手：寫jQuery與直接寫JS的區別詳細解析_jquery

要使用jQuery，首先要在HTML程式碼最前面加上jQuery函式庫的引用，例如：

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

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());

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 判斷複選框是否選取

jQueryif(abc.attr("checked") == "checked")