jQuery: 又一個非常優秀的 JavaScript Framework.

又一個非常優秀的 JavaScript Framework。 誠如它的官方網站所述:

jQuery: The Write Less, Do More, JavaScript Library: "jQuery is a new type of JavaScript library.

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript."

What does jQuery code look like? The quick and dirty:

$("p.surprise").addClass("ohmy").show("slow");

我喜歡及推它的原因有五個:

##CONTINUE##

一. Selector:

同大部份的 framework , jQuery 亦是使用 $ 當做選擇物件指令，然而它的 Selector 則更加的靈活及好用，它利用了 CSS3 , XPATH 做為 Selector , 所以我們可以看到以下:

$("#myDiv") => 同 document.getElementById("myDiv") 或 prototype $("myDiv")

然而，以下就神奇了:

$("ul > li ") => 找出 UL 下的 LI
$("div.posts .post") => 找出 Div Element 而 class=posts 下的 class=post element.
$("input:radio") => 找出 input type=radio 的所有物件。


二. Chainability 連鎖呼叫
看到官方的首頁例子，它就是要表達這個概念 :

$("p.surprise").addClass("ohmy").show("slow");

So, Magic!! 這就如同 Java 中的 StringBuffer 及大部份需要 Chainability 的 function 一樣，它總是傳回自已的參照，讓您可以一直串下去，一行程式搞定。

jQuery("div.posts .post").next().removeClass().addClass('comment-body-author').css("font-size", "12px;");

三. Event 及 $(document).ready

可以很容易的實作 event , 如:
$('a').click(function (e){ alert('you click');}); 為所有 a 加上 onclick event.

可以很容易加入function 到 document.onload 中，如:
$(document).ready(function(){}); 或 $(function(){});


四. 沒有覆載任何 javascript 的 build-in objects:

這點比較見人見智，但我喜歡純淨非侵入式的 framework, 如 prototype 提供了 String.trim 的擴充，在使用起來相當直覺，但對於初入門或查找 Docs 上，你會分不清哪些 method 是 build-in, 那些是被 extends 出來的。
而 jQuery 則是只在 jQuery ($) 的 namespace 下擴充，所以同樣的 trim ，是這樣表示的 $.trim(String) 。看起來對於 String Object 比較不 oo , 然而，很清楚的可見區分，這個 trim 是由 jQuery 來提供的，不用到 W3C 去找文件 :D


五. small footprint:

若是使用 normal 版本，整個 jquery.js (56K), pack 的版本，整個 jQuery(21K) 而己，且已包含大部份常用的擴充(core,ajax,fx)