jQuery是 個輕量級的JavaScript程式庫,輕量級的意思是它的程式庫極其精簡且很容易的能被使用,整合到現有程式裡也很簡便:只要在網頁程 式<head>區加入<script src="/js存放路徑/jquery.js"></script>即可,而因應不同的環境,jquery.js檔案有幾種不同的格 式可供使用:
js檔名 檔案大小 用途
jquery-1.2.1.js 78.6KB 使用於開發環境
jquery-1.2.1-pack.js 27KB 使用Packer壓縮過的檔案,適用於正式運行環境;Xuite內使用的就是pack格式的檔案
jquery-1.2.1-min.js 45.3KB 適用於正式運行環境; 似乎Server要搭配GZip才能達到更小的檔案大小

和傳統的JavaScript寫法相比,我覺得使用jQuery有幾個效益:
  • 大幅簡化存取DOM的要素的寫法;我們以取得Xuite的部落格名稱做範例
    • Xuite的部落格名稱並未指定ID,而是用class來定義:
<div>
<a href="/emisjerry/tech">簡睿隨筆 《科技篇》</a>
<span></span>
<span></span>
</div>
  •  
    • 如果有指定ID的要素,可以直接用document.getElementById(ID)就取到,但在沒有ID的狀況下就必須用 document.getElementsByTagName("div")先找出所有的div標籤,再用迴圈比對className,才能找 到<div>,即使把這些動作整理成一個函數來處理,也是頗為麻煩。
    • 而jQuery只要用CSS或XPath的語法很容易就能取到代表<div>的jQuery物件: $(".blogname")
      • $( )是jQuery的函數,會回傳jQuery物件,透過此物件的諸多method,就能很輕易的存取DOM要素。例如用$(".blogname").children()可取出<div>裡的子要素
      • CSS的類別放在StyleSheet的檔案裡是用點(.)開頭,ID是以井號(#)開頭,jQuery裡也是使用相同的寫法,例如 用".blogname"表示類別blogname,$("#linksLeft")則存取ID為linksLeft的要素:<div id="linksLeft">
  • 簡化網頁特效的寫法;jQuery提供了許多特效method,例如toggle() (要素的顯示/隱藏切換)、slideToggle() (滑動式顯示/隱藏切換)等等
  • 簡化要素事件的寫法
    • 一般的寫法比較繁複一些:
  document.getElementById("linksLeft").onclick = function() {
alert("左邊Panel clicked!");
}
  •  
    • jQuery的寫法:
  $("linksLeft").click(function() {
alert("左邊Panel clicked!");
});
  •  
    •  
      • 驅動事件的onXXXX的on不必寫,把要處理的程式用匿名函數傳入
  • 簡化AJAX的處理寫法:這是原本使用jQuery的最主要原因,要自行處理AJAX的所有細節有點太浪費生命了,還是使用Open source的程式庫較好

莊子 發表在 痞客邦 PIXNET 留言(0) 人氣()