javascript 和 jquery 語法上的一些區別

jQuery 能大大簡化 Javascript 程序的編寫，我最近花時間了解了一下 jQuery，把我上手過程中的筆記和大家分享出來，希望對大家有所幫助。
要使用 jQuery，首先要在 HTML 代碼最前面加上對 jQuery 庫的引用，比如：

1. <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

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

1 定位元素

1. // JS
2. document.getElementById("abc")
3. // jQuery
4. $("#abc") //通過id定位
5. $(".abc") //通過class定位
6. $("div") //通過標簽定位

 

2 改變元素的內容

1. // JS
2. abc.innerHTML = "test";
3. // jQuery
4. abc.html("test");

 

3 顯示隱藏元素

1. // JS
2. abc.style.display = "none";
3. abc.style.display = "block";
4. // jQuery
5. abc.hide();
6. abc.show();
7. abc.toggle(); //在顯示和隱藏之間切換

 

4 獲得焦點

1. // JS和jQuery是一樣的
2. abc.focus();

 

5 為表單賦值

1. // JS
2. abc.value = "test";
3. // jQuery
4. abc.val("test");

 

6 獲得表單的值

1. // JS
2. alert(abc.value);
3. // jQuery
4. alert(abc.val());

 

7 設置元素不可用

1. // JS
2. abc.disabled = true;
3. // jQuery
4. abc.attr("disabled", true);

 

8 修改元素樣式

1. // JS
2. abc.style.fontSize=size;
3. // jQuery
4. abc.css('font-size', 20);
5. // JS
6. abc.className="test";
7. // JQuery
8. abc.removeClass();
9. abc.addClass("test");

 

9 Ajax

1. // JS
2. 自己創建對象，自己處理瀏覽器兼容等亂七八糟的問題，略去不表
3. // jQuery
4. $.get("abc.php?a=1&b=2", recall);
5. postvalue = "a=b&c=d&abc=123";
6. $.post("abc.php", postvalue, recall);
7. function recall(result) {
8. alert(result);
9. //如果返回的是json，則如下處理
10. //result = eval('(' + result + ')');
11. //alert(result);
12. }

 

10 判斷復選框是否選中

1. // jQuery
2. if(abc.attr("checked") == "checked")

 

 來源：http://www.ferecord.com/different-between-javascript-and-jquery.html