標籤：style blog class code java ext
一、主流 javascript 庫
除 jQuery 外，還有 Prototype、Dojo、YUI、ExtJS、MooTools ，其中 Prototype 較老，結構設計較為鬆散，ExtJS 介面很棒但需要商業授權，MooTools 也是值得學習的一個 js 庫，Dojo 有一些特殊功能，也可以考慮學習，YUI 的文檔很完備，文法也規範。對我個人而言，選擇性依次為 jQuery > MooTools > ExtJS > Dojo > YUI > Prototype。
jQuery 的口號是 "write less,do more."。它的優點是使用了鏈式操作和隱式迭代大量減少了代碼量，將行為操作從 html 代碼中剝離出來利於分工合作和後期維護，此外強大的選取器也是其一大優勢。
jQuery 的介面庫有 jQuery UI 和 easy UI，學完 jQuery 可以去考慮繼續學習這兩個。
二、欲善其事，先利其器
先選擇一個便於學習 jQuery 的 IDE，可以使用 Dreamweaver 8，它擁有一個可以智能提示 jquery 書寫的外掛程式，叫 jQuery_API .mxp，通過 Dreamwearver 的 "命令"——>"擴充管理" 可以安裝使用。Dreamweaver 8 是 Macromedia 公司出的最後一版，然後 Macromedia 公司被 Adobe 公司收購，Dreamweaver 開始從 CS3 開始命令，使用最新的 CS6 版本即內建支援 jQuery 智能提示。
其次，並不一定要去下載 jQuery 庫到本地，可以直接使用下面兩個線上連結地址：
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.jshttp://ajax.microsoft.com/ajax/jquery/jquery-1.11.0.min.jshttp://ajax.microsoft.com/ajax/jquery/jquery-2.1.0.min.js
從上面可以看出，jQuery 提供了 1.x 和 2.x 的版本，區別在於，2.x 版本不再支援 IE 6/7/8 ，所以體積更小。不過考慮到現在 xp 和 win8 上的預設 IE 版本仍然在這個區間，還是建議使用 1.x 的庫，而 jQuery 團隊也聲明未來將同時支援 1.x 和 2.x 的升級。
三、第一個 jQuery 代碼
<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script></head><body> <script> $(document).ready(function(){ $("body").html("Hello,World!"); }); </script></body></html>
這裡有兩個問題需要提一下：一是以前的寫法是 <script type="text/javascript"></script>，但在 HTML5 中 javascript 已經是預設指令碼，不必寫出； 二是關於 $(document).ready(function(){ ... }); 函數的意義，表示等待所有文檔載入完成，再執行裡面的代碼。它還可以簡寫成如下形式： $(function(){ ... });
四、關於 DOM 對象和 jQuery 對象
簡單粗暴的說，jQuery 對象就是 DOM 對象 的集合，jQuery 隱式迭代的特性就是建立在此基礎之上。 簡單例子如下：
<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var dom_obj = document.getElementById(‘id‘); var jquery_obj = $(‘#id‘); alert(dom_obj.innerHTML); alert(jquery_obj.html()); alert(jquery_obj[0].innerHTML); //將 jquery 對象轉化成 dom 對象 alert($(dom_obj).html()); //將 dom 對象轉化成 jquery 對象 }); </script></head><body> <span id=‘id‘>Hello,World!</span></body></html>
上面四個 alert 語句輸出的都是 "Hello,World!"，可見 DOM 對象和 jQuery 對象是可以互相轉化的，這樣在需要的時候，我們就可以結合兩者來快速完成一些功能。需要注意的是，使用 if(document.getElementById(‘id‘)){} 這樣的代碼可以判斷該元素是否存在，而使用 if($(‘#id‘)){} 則不可以，它永遠返回一個對象，當元素不存在時，只是長度為0的集合對象罷了，所以要麼轉化成 dom 對象來判斷，要麼根據其 jquery 對象的長度來判斷。
五、參考資料
官方文檔已經非常詳盡：http://api.jquery.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
