為什麼使用jQquery

jQuery是一套以javascript開發的函式庫(開發框架)，但這套函式庫的用法及背後的觀念與javascript大不相同，jQquery的開發概念就以直覺、容易使用做為開發的目標，所以使用起來非常容易上手，只要熟悉jQuery的用法及使用概念，會被jQuery精簡的程式碼及直覺的設計方式吸引，jQuery是一套容易上手的javascript函式庫。

網路上有非常多的javascript開發框架，許多的開放源碼套件都會採用這些開發框架，使用這些javascript​的開發框架，可以省去不少自行撰寫函式庫的時間，不用重頭再去撰寫功能相同功能的函式庫。jQquery、prototype、dojo這些javascript​的開發框架讓我們可以只使用jQuery或是prototype或是dojo的語法就與不同的瀏覽器溝通，而不同的瀏覽器表現的行為會是相同的，如果直接以javascript撰寫這些功能，就必須考慮不同的瀏覽器所表現出的結果會是不相同的，必須判斷瀏覽器的種類再分別撰寫相同的功能，使用jQeury這類開發框架，可以讓我們省去這道步驟，jQuery這類開發框架，已經幫我們處理掉這些問題，我們只要專心寫程式邏輯，而不用去考慮瀏覽器的種類及版本的問題，使用這類開發框架，可以輕易跨越瀏覽器的鴻溝，讓client程式天生就有跨越瀏覽器平台的基因。

許多的開發框架，其實並不容易親近，看了dojo的文件，我覺得與原本的javascript相比，其實一樣麻煩，並沒有減少多少撰寫程式碼所需花的功夫。jQuery的設計原則就大不相同了，基本上，撰寫jQuery程式只要把握兩個原則，第一個原則就是要找到你要叫他做事情的瀏覽器物件，這個物件可能是一個文字輸入框、一個超連結，找這些瀏覽器物件的方式，是使用css的物件階層架構，第二個原則就是發生了什麼事件後，這些你找到的瀏覽器物件，要做什麼事，我們撰寫的邏輯，就是在選定的物件及事件內，寫程式，叫瀏覽器做事情，清楚明白，不用跟一堆迴圈奮戰，節省很多寫程式的時間。

jQquery的plugin非常多，官方的ui plugin套件，功能非常強悍，許多client端的功能都已經做進去了，使用文件豐富，很容易上手，非官方的plugin更不得了，太多了，要用的功能不用自己重頭寫，找一找，非尚豐富的，許多的plugin也是非常有質感的，可以快速套用到自己的程式中。

使用jQuery的人非常多，現在還有中文書籍可以參考，大陸的參考資料更多，線上文件也很豐富，我的第一個jQuery程式就是看線上文件寫出來的，如果不想買書，直接看線上文件也可以很容易學會這套易學易用的javascript開發框架。

jQuery的身份證驗證plugin

/**
* 驗證身份證字號是否正確的jquery plugin
* 用法：jQuery('身份證字號的id').idCheck();
* 傳回值：
* 合法---傳回true
* 非法---傳回false
* 作者：羅仁治
* 版本：1.0
* 版權：隨你使用，但須保留這段說明文字。
*/
jQuery.fn.idCheck = function(){
var real_id = this.val();
real_id = real_id.toUpperCase();


var pattern = /^[A-Z]{1}[0-9]{9}$/;
if (!pattern.test(real_id)) {
return false;
}

if (check(real_id)) {
return true;
}
else {
return false;
}


function check(real_id){
var first = real_id.substr(0, 1);
switch (first) {
case 'A':
first = '10';
break;
case 'B':
first = '11';
break;
case 'C':
first = '12';
break;
case 'D':
first = '13';
break;
case 'E':
first = '14';
break;
case 'F':
first = '15';
break;
case 'G':
first = '16';
break;
case 'H':
first = '17';
break;
case 'I':
first = '34';
break;
case 'J':
first = '18';
break;
case 'K':
first = '19';
break;
case 'L':
first = '20';
break;
case 'M':
first = '21';
break;
case 'N':
first = '22';
break;
case 'O':
first = '35';
break;
case 'P':
first = '23';
break;
case 'Q':
first = '24';
break;
case 'R':
first = '25';
break;
case 'S':
first = '26';
break;
case 'T':
first = '27';
break;
case 'U':
first = '28';
break;
case 'V':
first = '29';
break;
case 'W':
first = '32';
break;
case 'X':
first = '30';
break;
case 'Y':
first = '31';
break;
case 'Z':
first = '33';
break;
}

var value = first.concat(real_id.substr(1, 8));

var sum = parseInt(value.substr(0, 1));

for (var i = 1; i <= 9; i++) {
sum = sum + parseInt(value.substr(i, 1)) * (10 - i);
}

single = 10 - (sum % 10);

if (parseInt(real_id.substr(9, 1)) == single) {
return true;
}
else {
return false;
}
}
};

樹狀目錄plugin

http://abeautifulsite.net/notebook.php?article=58

上面這個網址的jquery的plugin可以顯示目錄下的檔案結構，還附上php程式碼，可以直接拿來用在網站上，如果要改寫，應該不難，只要php檔輸出的格式跟css檔難搭到就可以了。

css:負責外貌
php:負責內容輸出
jquery plugin:負責取回php輸出的資料並將資料顯示或隱藏

jQuery編輯器

http://www.aptana.com/node/187
http://www.aptana.com/docs/index.php/Plugging_Aptana_into_an_existing_Eclipse_configuration

安裝aptana的eclipse plugin

安裝這個plugin後，編輯css,javascript,html比較方便，編輯器會以不同顏色顯示函數、變數等不同屬性的語句，如果不小心打錯字，或是記錯物件名稱，或是語法有錯誤，就會出現紅色的警告錯誤訊息，比較容易找到哪個地方出錯，可以方便地進行除錯。

左邊視窗有專案裡頭的檔案列表，可以方便地檢視專案裡頭的檔案及目錄列表，可以清楚掌握目前有哪些檔案在專案裡頭，如果要增刪檔案或是修改檔名，也是在同一個作業環境下進行，不用再切換到其他的檔案管理軟體進行作業，比較方便。

aptana的plugin有支援jQuery等許多的javascript的framework，尤其是支援jQuery，真的是太好了，因為jQuery最簡單了，其他的javascript的framework，只要光看語法，就讓我頭暈，不像jQuery的語法那麼直覺，上次研習，介紹了YUI這套framework，語法比起jQuery，簡直就是文言文跟白話文的對比，YUI的語法實在繁複，後來上網找另一套framework—dojo，也是覺得沒有jQuery那麼親切，後來還是決定用jQuery，整個jQuery的語法簡潔明瞭，就像網站上的slogan說的--write less, do more，而且現在jQuery發展一套UI，可以很方便的套用，試用了一下，真的是方便啊，最適合我這種懶人了。

安裝流程
文件開頭的第二個網址就列出了安裝步驟，而且是圖文並茂的詳細步驟。

開啟eclipse

點選help->software updates->Find and Install->search for new features to install->next

填入下載網址:http://update.aptana.com/install/studio/3.2/ 及name

再來看看畫面，一直按下一步就裝好了。