邊做邊學jQuery教學系列，初登場
 |  | 52 |  |  |
一切起源於微軟正式在產品中採用了jQuery...
話說去年底某一天，微軟的魔力長官忽然找上中年人，問有沒有辦法製作一系列介紹如何在微軟環境下應用jQuery開發的錄影教學短片及文章？當時不知為何鬼迷心竅、又或者是初牛之犢(誤... 快40歲的小牛?)不畏虎，加上與jQuery陷入熱戀被沖昏了頭，就這麼胡里胡塗地一口答應下來。
平日常在不少場合看過講師們在台上口沫橫飛口若懸河，配合生動的展示範例將玄妙的技術娓娓道來，實際做一遭才知道什麼叫"台上十分鐘、台下十年功"。總之，實際上撰寫教學文章、設計範例、展示錄影比想像中困難許多，需要投入的時間也多得嚇人。尤其是錄影時得一氣喝成流暢地講解，明明平日講話碎碎念可以比美連珠砲，在家錄影又不像研討會需要面對上百觀眾，對著螢幕自言自語居然也常搞到腦中空白一片不知所云...
無論如何，【素人講師】很努力地在工作家庭之餘設法擠出時間，著手製作一系列"邊做邊學jQuery"教學，適合對象是"已具備粗淺Javascript基礎且想學習jQuery的開發人員"，雖然品質水準不能與專業講師相提並論，大家偶爾看看清新脫俗青澀純樸的素人演出當作苦悶生活的調劑也不錯... (事到如今，只能這麼安慰自己了)
每篇文章都不長(患有資訊焦慮症的我看到文章太長就會放棄閱讀，算是將心比心)、展示錄影時間也短短的約5-10分鐘(再長周公就要到府上串門子了)，大家可抱著輕鬆的心情看看。畢竟，"喂! 寫程式的，用jQuery是一件很快樂的事。"
要看到中年人的博命演出，大家可以在MSDN的邊做邊學系列影片網頁找到連結，另外在MSDN ASP.NET Developer Center的右方也有連結。目前已完成二集: (基於MSDN平台的限制，文章網頁原本用的SyntaxHighlighter顯示功能被換掉，程式碼的呈現效果大打折扣，請大家見諒)
有興趣的朋友可以連上去看看，並歡迎給予批評指教，有什麼建議可在此留言，我會虛心領教，並在後續的教學中盡力改善，謝謝大家。
(邊做邊學jQuery系列將有15集，這下可好，今年年假可充實了... 鳴~~~)
Comments
# by Zzz
影片好小啊，真的有人看得到裏面在操作什麼嗎？ 可以請MS好心點提供高解析的版本嗎？ 不然只能看文字內容了.
# by 星寂
播放的工具列右邊有可以放大的按鈕啊@@" 我覺得很清楚說。 話說，Jeffrey 大大的聲音還蠻好聽的耶XD
# by Zzz
原來有放大鈕啊 0.0 我之前按了沒反應，還以為那個鈕沒有用 =.= 感謝^^
# by 小熊子
不錯聽，加油…
# by Will 保哥
聲音不像你耶.. 呵呵..
# by leem
Jeffrey大一直說自己是中年人，不過我聽了聲音感覺很年輕耶~ 我現在正在學jQuery，謝謝您提供的教學，期待您後續一系列的教學~謝謝!
# by james
我的網站最近從prototype改到jQuery了，本週會做一次jQuery Theme的分享，看到有人也在寫教學，終於有人可以一起討論了:)
# by sheyuan
Jeffrey大大，最近才開始接觸jQuery 有個問題不知能否跟您請教 我下載jQuery1.3.2後，照您的教學操作 但是發現我在<script type="text/javascript"></script>內，打$字號時卻不會顯示出來如$get...等，$字號開頭的intellisense出來，打"$("也沒intellisense的反應，是我少裝的什麼東西嗎?但是確定寫的jQuery是可以run的，只是沒有intellisense跳出來 我系統是vista，VS2008 SP1，如果您知道，請教我一下，謝謝
# by Jeffrey
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在解析語法失敗時就會整個停擺。 參考: http://blog.darkthread.net/blogs/darkthreadtw/archive/2008/11/09/jquery-intellisense.aspx, http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/04/22/js-intellisense-error.aspx
# by sheyuan
Jeffrey大大，我已經試出來了，謝謝指導
# by jim
你好，謝謝你詳細的教學文章。 我在看的過程中，發現一個使用上的問題，想請問你。 在邊做邊學Jquery 教學系列5，最後一個範例有提到 取得 input 的值。 我實際使用後，發現 radio 的取值範例，無法正確取到值。 alert("Radio: " + $("#rdo input").val()); 如果改成這樣 alert("Radio: " + $("#rdo input:checked").val()); 就可以正確執行了 我是用jquery 1.3.1 在 IE8 上執行的
# by jim
你好，謝謝你寫的教學文章，幫助我很多。 我想請問在 jQuery 教學系列5 ，最後一個範例 radio 好像不能正確抓到值 alert("Radio: " + $("#rdo input").val()); 換成 alert("Radio: " + $("#rdo input:checked").val()); 就行了，不知道是不是和browser有關，我是用 IE8
# by Jeffrey
to jim, $("#rdo input")會抓到<div id="rdo">下的所有<input>(不管有沒有選取)，你可以試試alert($("#rdo input").length)，應會得到2，此時.val()只會傳回第一個<input>的值。故要抓到當下的選取值，需加上:checked，第五集文章的範例漏寫了，謝謝你的指正。
# by 卡卡西
有下載版的影片及簡報Demo 程式嗎？
# by Jeffrey
to 卡卡西, 我在SkyDrive上有放課程資料(含影片)，如果你需要的話可以下載回去參考。http://cid-34a34dc8eacf9f63.skydrive.live.com/browse.aspx/jQueryTutorial
# by 卡卡西
Dear Jeffrey 感謝您的分享 不過如果可以在分享簡報的話那會更好 ..感謝...
# by lin
在網路上找到了利用 $.get(path.value, function(data){ alert(data); }); 這樣可以去讀取local的文字檔,那想請問是否有可以存檔的方法呢? 還是只能用ActiveXObject 來存了? 畢竟光是讀檔JQuery的方法就方便多了
# by Ark
存server? ajax send string 到webservice 在用System.IO 將string寫到自己要放的地方 form submit 在用System.IO 拉request.file[0] 去存
# by lin
存local, 所以目前只找到ActiveXObject + IE 的方法來存..
# by Jeff
黑大您好~拜讀您的大作,學習了很多東西..非常感謝... 現在在邊做邊學系列裡想要下載範例檔.但都無法下載. http://www.longsun.net/mscomtw/msdn/jquery/jQueryDemo15.zip 不知道能不能MAIL全部範例檔給我呢?還是有其他地方可供下載!! 我的MAIL是 jeffhuang99@gmail.com
# by Jeff
黑大..不好意思.更正一下.. 9,11,12,13,14,15 <---這幾篇的範例檔無法下載.. http://www.longsun.net/mscomtw/msdn/jquery/jQueryDemo9.zip http://www.longsun.net/mscomtw/msdn/jquery/jQueryDemo11.zip http://www.longsun.net/mscomtw/msdn/jquery/jQueryDemo12.zip http://www.longsun.net/mscomtw/msdn/jquery/jQueryDemo13.zip http://www.longsun.net/mscomtw/msdn/jquery/jQueryDemo14.zip http://www.longsun.net/mscomtw/msdn/jquery/jQueryDemo15.zip
# by Jeffrey
to Jeff, 我已將Demo程式碼的ZIP檔也上傳到SkyDrive: http://cid-34a34dc8eacf9f63.skydrive.live.com/browse.aspx/jQueryTutorial 。另外，下載連結失效的部分也會向微軟反應。
# by Jeff
黑大...太感謝了..
# by Kan
Dear Jeffrey大大 感謝您的文章 每次有所疑惑總是能在您的文章中找到解答~ 小的才疏學淺 最近在找研討會補充知識 不曉得 Jeffrey大大 都去哪找研討會，參加哪些研討會呢?
# by Jeffrey
to Kan, 微軟舉辦的研討會資訊都會發佈在台灣微軟網站: http://www.microsoft.com/taiwan/events/events_list.aspx。除此之外，在COSCUP、WebConf等大型會議中也常會有精彩的JavaScript及jQuery議程，我多半是經由幾位高手、神人的噗浪或FB得知消息。 你如果有FB帳號，可以加入黑暗執行緒FB社群(https://www.facebook.com/groups/darkthread/)，遇有類似盛會時將會提供相關資訊。
# by cit
小弟是在男丁格爾知道大大的。 想問一下大大，有哪個slider可以在php下使用？ 就是在網站中進入後端管理頁面，可以增加slider的圖片。 試過nivo slider，有些換場特效會失效。 小弟是php初學者，請大大多多指教。
# by Jeffrey
to cit, Nivo Slider是純Client端的外掛，只要動態組合出<div class="nivoSlider">下的<img>[參考: http://www.minwt.com/html/5031.html ]，這部分應可透過PHP動態組裝HTML達成，至於有無現成的PHP圖檔管理模組可以套用，我對PHP的了解很有限，就比較幫不上忙囉~
# by 蟹老闆
想請教一下，今天無意間Run你文章中的西洋棋盤 發現一點有個小問題一直搞不清楚 jQuery的find() VS selector 空格 的差異是甚麼?? 我以為他們是一樣的，結果卻差很大... 以下是我Run的Demo: http://jsfiddle.net/27cP4/ http://jsfiddle.net/VcBCd/
# by Jeffrey
to 蟹老闆, $("tr td:even")會先找到所有"tr td"，再進行篩選":even"，相當於$("tr td").filter(":even")，等於在25個<td>中挑出偶數者。 而$("tr").find("td:even")等於先找出5列<tr>，再一一對其進行.find()，挑出其所屬<td>集合的第偶數個，故結果是每一列的0,2,4格被塗黑。 希望以上的說明夠清楚，若OK的話，可以送我一個美味蟹堡嗎? XD
# by 蟹老闆
原來如此!!! 如果沒有無意間run到，可能一輩子都以為是先找tr再找td:even 謝謝黑大熱心解惑XD
# by neko
大大寫得超棒（感激），可惜影片要有silverlight才能播，可是想用手機跟平版看就看不到⋯不知道有沒有youtube之類其他的連結呢？
# by Jeffrey
to neko, YouTube版: https://www.youtube.com/playlist?list=PLpRG_zGZAavj3aztURYe_Sq286-Sl8PtR
# by 223
http://msdn.microsoft.com/zh-tw/aa336522 影片到底在哪...........................
# by Jeffrey
to 223, 據了解。微軟網站的影片連結毁損，已在處理中，在修復前可以暫時改用YouTube備份: https://www.youtube.com/playlist?list=PLpRG_zGZAavj3aztURYe_Sq286-Sl8PtR
# by abin
你好可以請教一個問題，我用remove 動態移除行，然後用$("#sdim_price").append(str);動態新增一行。 但是移除一行後 再新新增一行。 我用$("#sdim_price > td").length 查詢有幾行，但是回傳不是現有幾行，是我新增一行減少一行再新增一行，他會回傳長度2。但是畫面只有一行。請問有什麼jquery函數可以 把length一起歸零。
# by Jeffrey
to abin, 無法從你的描述還原情境，我做了個類似的http://jsbin.com/dolot ，你再改成可重現問題的樣子。(說不定修改過程就會找出問題)
# by Witcher
HI Jeffrey 請問jQuery3的相關內容， 在瀏覽器彈出的視窗中，前兩個都正常顯示，但在第三個 它卻顯示 undefined:Hello World! 而不像你影片中的 Jeffery:Hello World! Code內容和影片內的都一樣，請問這是甚麼原因呢?
# by Jeffrey
to Witcher, 能提供你測試有問題的完整程式碼嗎？有程式碼應該可以很快找到原因。
# by Witcher
to Jeffrey 程式碼如下~ 使用的瀏覽器是Google Chrome var p = new Object(); p.Name = "Jeffery"; p.Age = 12; p.Say = SayFunc; function SayFunc(m) {alert(this.Names + " : " + m);} alert(p.Name); alert(p.Age); p.Say("Hello World!!");
# by Jeffrey
to Witcher, 看起來問題出在alert(this.Names+...)的Names多了一個"s"
# by Witcher
to Jeffrey 非常感謝~!!
# by 阿呆
您好 邊做邊學jQuery7 裡面提到把bind改成live可以運作 但jquery 1.9後就沒有live了 要用on 我把原本的改掉 但還是不能運作 可以請您幫我看看是哪裡不對嗎？ 會是每次所append的div id都一樣的關係嗎？ 我用的版本是jquery-1.11.3.js 謝謝 //原本的 $("#xxx").live("click", function () { alert("YA!"); }); $("input:button").click(function () { $("body").append("<div id=\"xxx\">XXX</div>"); }); //後來的 $("#xxx").on("click", function () { alert("YA!"); }); $("input:button").click(function () { $("body").append("<div id=\"xxx\">XXX</div>"); });
# by 阿呆
我剛剛發現 只要把底下這行改一下就可以了 不過我不知道原因 我看官方的網頁說明 是filter 但為什麼不能只抓#xxx 不要filter 而是要先抓document或"body" 再去filter出#xxx呢？ // 原本的 不ＯＫ $("#xxx").on("click", function () { alert("YA!"); }); // 這樣寫ＯＫ $("body").on("click", "#xxx", function () { alert("YA!"); }); // 這樣寫也ＯＫ $(document).on("click", "#xxx", function () { alert("YA!"); });
# by Jeffrey
to 阿呆，$("#xxx").click()在執行的當下檢查有沒有id="xxx"存在，若存在才掛上click事件，由於<div id="xxx">XXX</div>在$("#xxx").click()執行之後才動態載入，故此寫法無效。 $(document).on("click","#xxx"...)或$("body").on("click","#xxx"...)會在document或body上的任何元素（包含後來動態加入的<div id="xxx">)被點擊時觸發，jQuery會檢查被點擊的元素是不是id="xxx"（就是你說的filter效果），若是，就執行函式中的動作。
# by Tien
從https://msdn.microsoft.com/zh-tw/dd310332.aspx#jQuery點擊影片後都會被導至http://www.asp.net/耶，是影片被刪除了嗎
# by Jeffrey
to Tien, MSDN內容如有問題，可改往課程備援網站: https://www.darkthread.net/jQuery
# by Gladys
請問老師: Demo 5當中的Matrix1 中的<script> //將表格所有其他<tr>塗綠 tr.siblings().find("td:nth-child(" + nthChild + ")") .css("background-color", "green"); 當中nthChild前後的加號含意是什麼? 為什麼去掉之後完全無法執行?
# by Jeffrey
to Gladys, nthChild是個數字變數，"td:nth-child(" + nthChild + ")"寫法是串接字串與變數的意思。當nthChild=2，會得到"td:nth-child(2)"，當nthChild=4，結果為"td:nth-child(4)"。
# by Gladys
To Jeffrey: 啊,看懂了!非常感謝!
# by Lucien
MSDN和課程備援網站: http://www.darkthread.net/jquery 都掛了,不知是否還有能夠觀看影片的地方
# by Jeffrey
to Lucien, 正確網址應為 https://www.darkthread.net/jQuery，文章原連結有誤，謝謝提醒。
# by Lucien
感謝黑大! 終於可以看影片增進功力了