今天是哥們我學習JQuery的第二天，昨天發了篇《老程序員從頭開始學JQuery的讀書筆記》，引來了一些朋友的圍觀。我想許多年輕的朋友，是因為想看看老程序員是什么樣的，所以才進來想看個究竟，而不是我博客內容的本身會對其有什么幫助。也有些朋友幫我推薦了一些不錯的教程，在此表示感謝。
1.一點題外話
昨天有個朋友留言說“寫了十多年了，還寫代碼？”，是的，我還在寫，而且應該會一直寫下去。可能寫程序對於許多人只是一種工作形式，但對我來說可能早已成了一種生活方式，我無法想像沒有代碼可寫的日子。雖然在公司已經不進行具體的代碼編寫工作，但是如果沒有扎實的代碼基礎，不了解團隊成員常用的技術，那么所設計出的方案可能會成為整個項目的噩夢。順便做個廣告：我和同事正在開發的是“EasyCode.Net代碼生成器”升級版本，雖然是一款收費軟件，但仍得到了許多朋友的支持，內心真的非常激動與感激。有興趣的朋友也可以試用一下，有什么想法和意見可以直接和我QQ或電話聯系。
言歸正傳，今天並沒有閱讀教程中新的內容，而是對着教程將案例重新來了遍。炒剩飯的感覺固然不好，不過剩飯都懶的炒，想必也很難直接將生米煮成熟飯。於是乎花了近一個小時重做書中案例，及4個自己想到的應用場景，因為從沒有學習過JQuery，所以覺得還是有一些收獲的。寫將開來，希望對一些朋友能有所幫助。
2.第一個演示
個人認為JQuery中的選擇器功能是十分強大的，應該熟練掌握，所以動手做了4個演示，以強化對這方面知識的理解和掌握。先上一圖：
很簡單，雖然Asp.Net中的DataGridView或Repeater控件也都可以定義，不過還是感覺JQuery的更方便一點。使用JQuery實現表格中的奇數行、偶數行不同的顯示樣式，基本上兩行代碼搞定，但是表格的標題也屬於<tr>，所以可以靈活運用not標記來區分開來，代碼兩行如下：
1 $(document).ready(function() { //當DOM文檔結構加載完成時（不必等圖像加載完畢） 2 $('#Table01 tr:odd:not(.TableHeader)').addClass('OddRow'); //選擇Table01中的除“標題行”外的所有奇數行，加上指定樣式 3 $('#Table01 tr:even:not(.TableHeader)').addClass('EvenRow'); //選擇Table01中的除“標題行”外的所有偶數行，加上指定樣式 4 });
3.第二個演示
如果表格中的“人員狀態”為“休假”就用紅色字體顯示，雖然也很簡單。不過如果用Asp.Net的Repeater控件還是有些麻煩的，我在以前的設計中，會將Employee實體類中加個屬性如“ColorName”，其中只有一個Get方法。如：
1 public string ColorName 2 { 3 get 4 { 5 //如果人員狀態的名稱為“休假” 6 if (this.Status.StatusName = "休假") 7 { 8 return "Red"; 9 } 10 return "Normal"; 11 } 12 }
然后前台再綁定這個“多余”的屬性，有了JQuery這個問題似乎簡單多了，不過也會帶來一些新的問題，比如修改人員狀態中關鍵字，假設增加一個“病假”需要用藍色顯示，那么要維護后台cs與前台js兩處的代碼了，不過也應該可以通過系統初始化重新動態生成js腳本來完成。回到原本的話題，我是用了contains("休假")關鍵字，來查找指定的td，代碼如下：
1 $('#Table02 tr:odd:not(.TableHeader)').addClass('OddRow'); //選擇Table02中的除“標題行”外的所有奇數行，加上指定樣式 2 $('#Table02 tr:even:not(.TableHeader)').addClass('EvenRow'); //選擇Table02中的除“標題行”外的所有偶數行，加上指定樣式 3 $('#Table02 td:contains("休假")').addClass('RedText'); //選擇Table02中人員狀態為“休假”的列，指定單元格的字體顏色 4 $('#Table02 td:contains("休假")').parent().addClass('RedRow'); //選擇Table02中人員狀態為“休假”的行，指定行背景色
4.第三個演示
如果表格中工資列中數據大於4000就用綠色顯示其中的數值，查找了下JQuery中好像沒有這樣的表達式可以直接查詢出元素（如果有朋友知道更好的方法請不吝賜教），所以寫了段腳本如下：
1 $('#Table03 tr:odd:not(.TableHeader)').addClass('OddRow'); //選擇Table03中的除“標題行”外的所有奇數行，加上指定樣式 2 $('#Table03 tr:even:not(.TableHeader)').addClass('EvenRow'); //選擇Table03中的除“標題行”外的所有偶數行，加上指定樣式 3 $('#Table03 tr:not(.TableHeader)').each(function(){ //遍歷除“標題行”外的所有行 4 var money = parseInt($(this).children('td').eq(3).text()); //取得工資列的數據 5 if(money>4000) { //判斷是否大於4000 6 $(this).children('td').eq(3).addClass('GreenText'); 7 } 8 });
5.第四個演示
與前面的演示基本相同，這次換成了根據時間大小來分色顯示，實在是沒找到這樣的查詢表達式，難道這種常用方法，JQuery不應該直接提供嗎？汗！具體代碼如下：
1 $('#Table04 tr:odd:not(.TableHeader)').addClass('OddRow'); //選擇Table04中的除“標題行”外的所有奇數行，加上指定樣式 2 $('#Table04 tr:even:not(.TableHeader)').addClass('EvenRow'); //選擇Table04中的除“標題行”外的所有偶數行，加上指定樣式 3 $('#Table04 tr:not(.TableHeader)').each(function(){ //遍歷除“標題行”外的所有行 4 var birthDate = new Date($(this).children('td').eq(4).text().replace(/-/g,"/")); //取得出生日期列的數據 5 var lineDate = new Date("1980-01-01".replace(/-/g,"/")); //定義80后的界限 6 if(birthDate >lineDate) { //判斷是否為80后 7 $(this).children('td').eq(4).addClass('GreenText'); 8 } 9 });
6.收獲及感悟
今天的兩個小時還是有所收獲的，雖然沒有閱讀新的內容，不過掌握了諸如人員狀態、工資、出生年月等不同數據類型，如何使用JQuery在前端實現不同樣式的顯示。考慮到之前一直采用為實體類定義個“多余”的屬性，感覺使用JQuery也許會更簡單直接一點，不過JQuery的使用也可能帶來需多處維護業務代碼的可能，所以還需細細思考出更好的方案，以便於今后更好的完成項目設計工作。