邊做邊學jQuery教學系列，初登場

        

一切起源於微軟正式在產品中採用了jQuery...

 

話說去年底某一天，微軟的魔力長官忽然找上中年人，問有沒有辦法製作一系列介紹如何在微軟環境下應用jQuery開發的錄影教學短片及文章？當時不知為何鬼迷心竅、又或者是初牛之犢(誤... 快40歲的小牛?)不畏虎，加上與jQuery陷入熱戀被沖昏了頭，就這麼胡里胡塗地一口答應下來。

 

平日常在不少場合看過講師們在台上口沫橫飛口若懸河，配合生動的展示範例將玄妙的技術娓娓道來，實際做一遭才知道什麼叫"台上十分鐘、台下十年功"。總之，實際上撰寫教學文章、設計範例、展示錄影比想像中困難許多，需要投入的時間也多得嚇人。尤其是錄影時得一氣喝成流暢

地講解，明明平日講話碎碎念可以比美連珠砲，在家錄影又不像研討會需要面對上百觀眾，對著螢幕自言自語居然也常搞到腦中空白一片不知所云...

 

無論如何，【素人講師】很努力地在工作家庭之餘設法擠出時間，著手製作一系列"邊做邊學jQuery"教學，適合對象是"已具備粗淺Javascript基礎且想學習jQuery的開發人員"，雖然品質水準不能與專業講師相提並論，大家偶爾看看清新脫俗青澀純樸的素人演出當作苦悶生活的調劑也不錯... (事到如今，只能這麼安慰自己了)

 

每篇文章都不長(患有資訊焦慮症的我看到文章太長就會放棄閱讀，算是將心比心)、展示錄影時間也短短的約5-10分鐘(再長周公就要到府上串門子了)，大家可抱著輕鬆的心情看看。畢竟，"喂! 寫程式的，用jQuery是

一件很快樂的事。"

 

要看到中年人的博命演出，大家可以在MSDN的邊做邊學系列影片網頁找到連結，另外在MSDN ASP.NET Developer Center的右方也有連結。目前已完成二集: (基於MSDN平台的限制，文章網頁原本用的SyntaxHighlighter顯示功能被換掉，程式碼的呈現效果大打折扣，請大家見諒)

 

 
• 初識 jQuery 
• 讓網頁 jQuery 起來 

 

有興趣的朋友可以連上去看看，並歡迎給予批評指教，有什麼建議可在此留言，我會虛心領教，並在

後續的教學中盡力改善，謝謝大家。

 

(邊做邊學jQuery系列將有15集，這下可好，今年年假可充實了... 鳴~~~)

       

歡迎推文分享: 推到噗浪

Published 23 January 2009 09:12 AM 由 Jeffrey                         Filed under: jQuery

     

 

   

意見

               
                   

            #

            Zzz
                        said on

                22 January, 2009 05:46 PM
                   

           

               

影片好小啊，真的有人看得到裏面在操作什麼嗎？

可以請MS好心點提供高解析的版本嗎？

不然只能看文字內容了.

                   
                       
                   

               
                   

            #

            星寂
                        said on

                22 January, 2009 06:00 PM
                   

           

               

播放的工具列右邊有可以放大的按鈕啊@@"

我覺得很清楚說。

話說，Jeffrey 大大的聲音還蠻好聽的耶XD

                   
                       
                   

               
                   

            #

            Zzz
                        said on

                22 January, 2009 06:22 PM
                   

           

               

原來有放大鈕啊 0.0

我之前按了沒反應，還以為那個鈕沒有用 =.=

感謝^^

                   
                       
                   

               
                   

            #

            小熊子
                        said on

                23 January, 2009 04:19 AM
                   

           

               

不錯聽，加油…

                   
                       
                   

               
                   

            #

            Will 保哥
                        said on

                23 January, 2009 05:29 AM
                   

           

               

聲音不像你耶.. 呵呵..

                   
                       
                   

               
                   

            #

            leem
                        said on

                30 January, 2009 01:56 AM
                   

           

               

Jeffrey大一直說自己是中年人，不過我聽了聲音感覺很年輕耶~

我現在正在學jQuery，謝謝您提供的教學，期待您後續一系列的教學~謝謝!

                   
                       
                   

               
                   

            #

            james
                        said on

                09 February, 2009 08:45 PM
                   

           

               

我的網站最近從prototype改到jQuery了，本週會做一次jQuery Theme的分享，看到有人也在寫教學，終於有人可以一起討論了:)

                   
                       
                   

               
                   

            #

            sheyuan
                        said on

                17 June, 2009 04:07 AM
                   

           

               

Jeffrey大大，最近才開始接觸jQuery

有個問題不知能否跟您請教

我下載jQuery1.3.2後，照您的教學操作

但是發現我在內，打$字號時卻不會顯示出來如$get...等，$字號開頭的intellisense出來，打"$("也沒intellisense的反應，是我少裝的什麼東西嗎?但是確定寫的jQuery是可以run的，只是沒有intellisense跳出來

我系統是vista，VS2008 SP1，如果您知道，請教我一下，謝謝

                   
                       
                   

               
                   

            #

            Jeffrey
                        said on

                17 June, 2009 09:54 AM
                   

           

               

to sheyuan, 建議檢查幾個東西:

1) 是否安裝了Hotfix?

2) 有將jquery-1.3.2-vsdoc.js放在jquery-1.3.2.js同目錄下?

3) 確定所有include的js及自己寫的Javascript沒有語法錯誤(VS2008 IDE的Error List出現Error updating JScript IntelliSense的訊息)，JScript Intellisense在解析語法失敗時就會整個停擺。

參考: blog.darkthread.net/.../jquery-intellisense.aspx, blog.darkthread.net/.../js-intellisense-error.aspx

                   
                       
                   

               
                   

            #

            sheyuan
                        said on

                17 June, 2009 11:59 PM
                   

           

               

Jeffrey大大，我已經試出來了，謝謝指導

                   
                       
                   

               
                   

            #

            jim
                        said on

                24 July, 2009 03:40 AM
                   

           

               

你好，謝謝你詳細的教學文章。

我在看的過程中，發現一個使用上的問題，想請問你。

在邊做邊學Jquery 教學系列5，最後一個範例有提到 取得 input 的值。

我實際使用後，發現 radio 的取值範例，無法正確取到值。

alert("Radio: " + $("#rdo input").val());    

如果改成這樣

alert("Radio: " + $("#rdo input:checked").val());

就可以正確執行了

我是用jquery 1.3.1 在 IE8 上執行的

                   
                       
                   

               
                   

            #

            jim
                        said on

                24 July, 2009 03:45 AM
                   

           

               

你好，謝謝你寫的教學文章，幫助我很多。

我想請問在  jQuery 教學系列5 ，最後一個範例

radio 好像不能正確抓到值

alert("Radio: " + $("#rdo input").val());    

換成

alert("Radio: " + $("#rdo input:checked").val());    

就行了，不知道是不是和browser有關，我是用 IE8

                   
                       
                   

               
                   

            #

            Jeffrey
                        said on

                24 July, 2009 07:53 AM
                   

           

               

to jim, $("#rdo input")會抓到

下的所有(不管有沒有選取)，你可以試試alert($("#rdo input").length)，應會得到2，此時.val()只會傳回第一個的值。故要抓到當下的選取值，需加上:checked，第五集文章的範例漏寫了，謝謝你的指正。

                   
                       
                   

               
                   

            #

            卡卡西
                        said on

                17 August, 2009 04:01 AM
                   

           

               

有下載版的影片及簡報Demo 程式嗎？

                   
                       
                   

               
                   

            #

            Jeffrey
                        said on

                17 August, 2009 10:51 PM
                   

           

               

to 卡卡西, 我在SkyDrive上有放課程資料(含影片)，如果你需要的話可以下載回去參考。cid-34a34dc8eacf9f63.skydrive.live.com/.../jQueryTutorial

                   
                       
                   

               
                   

            #

            卡卡西
                        said on

                19 August, 2009 01:56 AM
                   

           

               

Dear Jeffrey 感謝您的分享　不過如果可以在分享簡報的話那會更好 ..感謝...

                   
                       
                   

               
                   

            #

            lin
                        said on

                11 October, 2009 05:18 AM
                   

           

               

在網路上找到了利用

$.get(path.value, function(data){

  alert(data);

});  

這樣可以去讀取local的文字檔,那想請問是否有可以存檔的方法呢?

還是只能用ActiveXObject 來存了?

畢竟光是讀檔JQuery的方法就方便多了

                   
                       
                   

               
                   

            #

            Ark
                        said on

                11 October, 2009 06:47 AM
                   

           

               

存server?

ajax send string 到webservice

在用System.IO 將string寫到自己要放的地方

form submit

在用System.IO 拉request.file[0] 去存

                   
                       
                   

               
                   

            #

            lin
                        said on

                11 October, 2009 12:42 PM
                   

           

               

存local, 所以目前只找到ActiveXObject  + IE 的方法來存..

                   
                       
                   

               
                   

            #

            Jeff
                        said on

                24 December, 2010 11:27 AM
                   

           

               

黑大您好~拜讀您的大作,學習了很多東西..非常感謝...

現在在邊做邊學系列裡想要下載範例檔.但都無法下載.

www.longsun.net/.../jQueryDemo15.zip

不知道能不能MAIL全部範例檔給我呢?還是有其他地方可供下載!!

我的MAIL是 jeffhuang99@gmail.com

                   
                       
                   

               
                   

            #

            Jeff
                        said on

                24 December, 2010 11:37 AM
                   

           

               

黑大..不好意思.更正一下..

9,11,12,13,14,15 <---這幾篇的範例檔無法下載..

www.longsun.net/.../jQueryDemo9.zip

www.longsun.net/.../jQueryDemo11.zip

www.longsun.net/.../jQueryDemo12.zip

www.longsun.net/.../jQueryDemo13.zip

www.longsun.net/.../jQueryDemo14.zip

www.longsun.net/.../jQueryDemo15.zip

                   
                       
                   

               
                   

            #

            Jeffrey
                        said on

                24 December, 2010 05:54 PM
                   

           

               

to Jeff, 我已將Demo程式碼的ZIP檔也上傳到SkyDrive: cid-34a34dc8eacf9f63.skydrive.live.com/.../jQueryTutorial 。另外，下載連結失效的部分也會向微軟反應。

                   
                       
                   

               
                   

            #

            Jeff
                        said on

                25 December, 2010 09:16 AM
                   

           

               

黑大...太感謝了..

                   
                       
                   

               
                   

                        你的看法呢?
                   

                       

標題 (必要的)*

                       

                       

姓名 (必要的)*

                       

                       

你的URL (選擇性的)

                       

                       

意見 (必要的)*

                       

                       

Remember Me?

           

                       

(提醒: 因快取機制，您的留言幾分鐘後才會顯示在網站，請耐心稍候)

                       

                       
                       

   

        CAPTCHA /
        驗證碼 :
   

   

    22 - 18 =
       
       
   

                   

搜尋