緣起
小喵經常會在各個技術blog中閒逛,有次逛到黑暗執行緒大大的網站,看到了一篇【jQuery, I LOVE YOU~~~】文章,文章中說了他發給【ASP.NET AJAX Client Library】好人卡,並且移情別戀轉而跟【jQuery】在一起的經過。讓小喵留下了深刻的印象。不過,這時小喵還是不曉得jQuery是什麼。
後來有次小喵剛好要買幾本書,在逛【書店】的時候的時候(小喵目前已經很少跑真正的書店,逛得只是書店的網站),還差一點就可免運費,所以順便找找看是否有什麼新書可以買。剛好看到jQuery有本新的中文書出版。於是小喵就把它放入購物車。從此開始與jQuery結緣。本來買了書後,打算先翻翻看看這個東西到底是什麼,能讓黑暗執行緒大大隊ASP.NET AJAX Client Library發出好人卡。沒想到這個迷死人不償命的小寶貝,竟然開始勾引小喵。
jQuery是什麼??
jQuery是一組JavaScript的library,而且是免費的library。使用的時候也只需要指定<Script src="jQuery.js"></Script>就可以開始引用了。因此無論是用什麼樣的網頁開發程式(ASP,ASP.NET,JSP,PHP,CGI,....),甚至只需要HTML就可以使用。因此要測試jQuery,甚至不必上網,只需要記事本撰寫html就可以測試使用了。
下載
先說明要準備使用jQuery之前,需要些什麼:
首先需要把jQuery帶回家。有個繁體中文的網址【jQuery: 寫得少, 做得多, JavaScript 程式庫】不過也僅止於這麼少少的幾頁,可以把最新版本的jQuery下載回來。下載的部分他分為三種:
- GZip的版本(Minified):js經過GZip壓縮過,檔案最小,適合放在正式環境中,1.26版大約16kb
- 未壓縮版本(Uncompressed):適用於測試開發學習。1.26版大約97kb
- 包裝版(Packed):給沒有辦法解GZip瀏覽器用的版本1.26版大約30kb
其實就算是使用Uncompressed的版本,大小也只有97kb,檔案非常的小(可能網頁中隨便一張圖就比這個大了)。而小喵自己則是取中庸的Packed版本使用。
測試
接下來開始重頭戲,我們初體驗的實際運作範例。也開始體驗一下為何這個小東西會勾引小喵的原因。首先來個範例,小喵產生一個html檔案在畫面上安排了個兩個按鈕(<input type="button")以及一個img並且指向一個jpg。
現在假設要設定,一開始要把img1圖形隱藏,按下按鈕後,希望可以把他顯示出來,再按一次按鈕,又可以把他隱藏。這個對於已經熟悉JavaScript的人,應該不難。小喵寫個簡單的
<html> <head> <script Language="JavaScript"> <!-- function window_onload(){ var img1=window.document.getElementById('img1'); img1.style.display='none'; } function btn1_click(){ var img1=window.document.getElementById('img1'); if(img1.style.display=='none') { img1.style.display=''; } else { img1.style.display='none'; } } //--> </script> </head> <body onload="window_onload()"> <input type="button" id="btn1" name="btn1" value="JavaScript按鈕" onclick="btn1_click()" /> <br /> <img id="img1" src="topcat.jpg" /> </body> </html>
而以上的動作,如果希望由jQuery來處理的話,那又如何呢
<html> <head> <Script Language="JavaScript" src="jQuery.js"></Script> <script Language="JavaScript"> <!-- $(document).ready(function(){ $('#img1').hide(); $('#btn2').click(function(){ $('#img1').toggle(); }) }) //--> </script> </head> <body> <input type="button" id="btn2" name="btn2" value="jQuery按鈕" /> <br /> <img id="img1" src="topcat.jpg" /> </body> </html>
一樣的動作,發現了嗎??程式碼精簡到不行。真是太神奇了!!
再來另外一個範例
假設我的畫面中有一個<table>希望,<table>裡面的資料在顯示的時候,可以用不同底色交錯顯示,這樣方便在瀏覽的時候可以方便看。我們用固定的<table>當作示範,我們希望讓偶數行能夠加上class,這樣的要用Javascript有多麻煩各位可以想像一下。但是在jQuery來說確是很簡單的
我們有Style設定
<style> .TrEven1{background-color:pink;} .TrEven2{background-color:blue;color:white;} </style>
在畫面中有兩個Table小喵用asp的方式表式:
table1 <table id="tbl1" border="1"> <%For y = 1 to 10%> <tr> <td><%=y%></td> <td>aa</td> <td>bb</td> <td>cc</td> <td>dd</td> <td>ee</td> <td>ff</td> </tr> <%Next%> </table> table2 <table id="tbl2" border="1"> <%For y2 = 1 to 10%> <tr> <td><%=y2%></td> <td>aa</td> <td>bb</td> <td>cc</td> <td>dd</td> <td>ee</td> <td>ff</td> </tr> <%Next%> </table>
接著,先想像一下如果要用JavaScript要怎麼寫??然後再來看看用jQuery怎麼做
$(document).ready(function(){ $('#tbl1 tr:even').addClass('TrEven1'); $('#tbl2 tr:even').addClass('TrEven2'); })
看到了他的魔力了嗎??短短的一行【$('#tbl1 tr:even').addClass('TrEven1');】就可以處理了耶!!有沒有那種被【黯然消魂掌】擊中的感覺。
初體驗就到此先告一段落,有機會在跟網友們分享jQuery的語法與使用方式。在此先介紹個不錯的網站,可以把他當作是jQuery使用時的一個操作說明【http://jquery.org.cn/visual/cn/index.xml】
Microsoft MVP ASP/ASP.NET |
topcat |