1. 程式人生 > >js與jQuery差別

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實際上不能用。上面這個測試過能用