哇寶內部教育訓練用教材

1. jQuery 實戰經驗講座
更進一步瞭解 jQuery

2. 你所知道的 jQuery

3. jQuery 的特色？

4. 你用 jQuery 做過什麼？

5. 你沒用過，但你知道的功能
有哪些？

6. 習題說明

7. Unobtrusive JavaScript

8. Chaining

9. Anonymous Function

10. this
•在函式裡代表？
•在 jQuery Event Handler 裡代表？

11. closure
簡單來說，就是用到了外部
function 所定義的變數的匿名函式

12. AJAX

13. $(selector).load()
&
$.get()
&
$.post()

14. $.ajax()
&
$.ajaxSetup()

15. JSON
vs.
XML
vs.
HTML
vs.
Text

16. API Reference

17. 官方手冊
(http://remysharp.com/jquery-api/)
&
jQuery API
(http://remysharp.com/jquery-api/)

18. 易搞混的 Selector 與
method

19. ancestor descendant
vs.
parent > child
vs.
prev + next
vs.
prev ~ siblings

20. :not(selector)
=
.not(selector)

21. :eq(index)
=
.eq(index)

22. :has(selector)
vs.
:contains(text)

23. :parent
vs.
.parent(selector)
vs.
.parents(selector)

24. $(selector)[index]
=
$(selector).get(index)

25. :enabled, :disabled
&
:checked, :selected
(only form element)

26. :hidden
&
:visible
(1.3.2: offsetWidth or offsetHeight = 0 ?)

27. .after()
vs.
.insertAfter()

28. .before()
vs.
.insertBefore()

29. .append()
vs.
.appendTo()

30. .prepend()
vs.
.prependTo()

31. 1.3 新特色
(http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/01/15/jquery-1-3.aspx)

32. Sizzle Selector 引擎
(http://sizzlejs.com/)

33. .live()

34. [@attr=xxx]
to
[attr=xxx]

35. .closest(selector)

36. .isArray()

37. Plugins

38. blockUI
(http://www.malsup.com/jquery/block/)

39. Form
(http://www.malsup.com/jquery/form/)

40. checkboxes
(http://www.texotela.co.uk/code/jquery/checkboxes/)

41. selectboxes
(http://www.texotela.co.uk/code/jquery/select/)

42. mousewheel
(http://brandonaaron.net/code)

43. UI
(http://ui.jquery.com)

44. 特別的技巧

45. 如何做出可開合的頁首目錄？
(http://codeigniter.com/user_guide/)

46. 如何做出移過表格列時，出
現編輯選單的效果？
(WordPress 後台編輯文章列表)

47. 如何產生動態下拉選單？
(http://www.ocar.com.tw/)

48. 如何將頁面以 Ajax 方式載
入到 blockUI ，並加入拖曳
效果？
(http://demo.wabow.com/ecmail/)

49. 還缺什麼？

50. 你的想像力！

51. 課後練習

52. 請試著在 AJAX 要求啟動時，透過 blockUI 把頁
面遮閉起來；然後當 AJAX 要求結束時，再解除
blockUI 。

53. 在「如何產生動態下拉選單？」範例中有個隱藏
欄位「 fullIdPath 」，指得是頁面載入時，下拉
選單依次會選到的項目。請試著完成這部份的功
能。

54. 請試著結合「如何做出移過表格列時，出現編輯
選單的效果？」及「如何將頁面以Ajax 方式載入
到blockUI，並加入拖曳效果？」兩個範例的效
果，也就是當點選「修改」後，會出現修改的彈
出視窗。

55. 下課