jQuery 實戰經驗講座
   更進一步瞭解 jQuery
你所知道的 jQuery
jQuery 的特色?
你用 jQuery 做過什麼?
你沒用過,但你知道的功能
    有哪些?
習題說明
Unobtrusive JavaScript
Chaining
Anonymous Function
this


•在函式裡代表?
•在 jQuery Event Handler 裡代表?
closure


簡單來說,就是用到了外部
function 所定義的變數的匿名函式
AJAX
$(selector).load()
        &
     $.get()
        &
     $.post()
$.ajax()
      &
$.ajaxSetup()
JSON
  vs.
 XML
  vs.
HTML
  vs.
 Text
API Reference
官方手冊
(http://remysharp.com/jquery-api/)


     &
 jQuery API
(http://remysharp.com/jquery-api/)
易搞混的 Selector 與
   method
ancestor descendant
         vs.
   parent > child
         vs.
    prev + next
         vs.
   prev ~ siblings
:not(selector)
      =
.not(selector)
:eq(index)
     =
.eq(index)
:has(selector)
       vs.
:contains(text)
:parent
        vs.
 .parent(selector)
        vs.
.parents(selector)
$(selector)[index]
          =
$(selector).get(index)
:enabled, :disabled
        &
:checked, :selected
      (only form element)
:hidden
             &
          :visible
(1.3.2: offsetWidth or offsetHeight = 0 ?)
.after()
      vs.
.insertAfter()
.before()
      vs.
.insertBefore()
.append()
     vs.
.appendTo()
.prepend()
     vs.
.prependTo()
1.3 新特色
(http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/01/15/jquery-1-3.aspx)
Sizzle Selector 引擎
     (http://sizzlejs.com/)
.live()
[@attr=xxx]
     to
 [attr=xxx]
.closest(selector)
.isArray()
Plugins
blockUI
(http://www.malsup.com/jquery/block/)
Form
(http://www.malsup.com/jquery/form/)
checkboxes
(http://www.texotela.co.uk/code/jquery/checkboxes/)
selectboxes
(http://www.texotela.co.uk/code/jquery/select/)
mousewheel
(http://brandonaaron.net/code)
UI
(http://ui.jquery.com)
特別的技巧
如何做出可開合的頁首目錄?
   (http://codeigniter.com/user_guide/)
如何做出移過表格列時,出
 現編輯選單的效果?
   (WordPress 後台編輯文章列表)
如何產生動態下拉選單?
   (http://www.ocar.com.tw/)
如何將頁面以 Ajax 方式載
入到 blockUI ,並加入拖曳
        效果?
    (http://demo.wabow.com/ecmail/)
還缺什麼?
你的想像力!
課後練習
請試著在 AJAX 要求啟動時,透過 blockUI 把頁
面遮閉起來;然後當 AJAX 要求結束時,再解除
blockUI 。
在「如何產生動態下拉選單?」範例中有個隱藏
欄位「 fullIdPath 」,指得是頁面載入時,下拉
選單依次會選到的項目。請試著完成這部份的功
能。
請試著結合「如何做出移過表格列時,出現編輯
選單的效果?」及「如何將頁面以Ajax 方式載入
到blockUI,並加入拖曳效果?」兩個範例的效
果,也就是當點選「修改」後,會出現修改的彈
出視窗。
下課
Upcoming SlideShare
Loading in...5
×

jQuery 實戰經驗講座

2,250

Published on

哇寶內部教育訓練用教材

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,250
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery 實戰經驗講座

  1. 1. jQuery 實戰經驗講座 更進一步瞭解 jQuery
  2. 2. 你所知道的 jQuery
  3. 3. jQuery 的特色?
  4. 4. 你用 jQuery 做過什麼?
  5. 5. 你沒用過,但你知道的功能 有哪些?
  6. 6. 習題說明
  7. 7. Unobtrusive JavaScript
  8. 8. Chaining
  9. 9. Anonymous Function
  10. 10. this •在函式裡代表? •在 jQuery Event Handler 裡代表?
  11. 11. closure 簡單來說,就是用到了外部 function 所定義的變數的匿名函式
  12. 12. AJAX
  13. 13. $(selector).load() & $.get() & $.post()
  14. 14. $.ajax() & $.ajaxSetup()
  15. 15. JSON vs. XML vs. HTML vs. Text
  16. 16. API Reference
  17. 17. 官方手冊 (http://remysharp.com/jquery-api/) & jQuery API (http://remysharp.com/jquery-api/)
  18. 18. 易搞混的 Selector 與 method
  19. 19. ancestor descendant vs. parent > child vs. prev + next vs. prev ~ siblings
  20. 20. :not(selector) = .not(selector)
  21. 21. :eq(index) = .eq(index)
  22. 22. :has(selector) vs. :contains(text)
  23. 23. :parent vs. .parent(selector) vs. .parents(selector)
  24. 24. $(selector)[index] = $(selector).get(index)
  25. 25. :enabled, :disabled & :checked, :selected (only form element)
  26. 26. :hidden & :visible (1.3.2: offsetWidth or offsetHeight = 0 ?)
  27. 27. .after() vs. .insertAfter()
  28. 28. .before() vs. .insertBefore()
  29. 29. .append() vs. .appendTo()
  30. 30. .prepend() vs. .prependTo()
  31. 31. 1.3 新特色 (http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/01/15/jquery-1-3.aspx)
  32. 32. Sizzle Selector 引擎 (http://sizzlejs.com/)
  33. 33. .live()
  34. 34. [@attr=xxx] to [attr=xxx]
  35. 35. .closest(selector)
  36. 36. .isArray()
  37. 37. Plugins
  38. 38. blockUI (http://www.malsup.com/jquery/block/)
  39. 39. Form (http://www.malsup.com/jquery/form/)
  40. 40. checkboxes (http://www.texotela.co.uk/code/jquery/checkboxes/)
  41. 41. selectboxes (http://www.texotela.co.uk/code/jquery/select/)
  42. 42. mousewheel (http://brandonaaron.net/code)
  43. 43. UI (http://ui.jquery.com)
  44. 44. 特別的技巧
  45. 45. 如何做出可開合的頁首目錄? (http://codeigniter.com/user_guide/)
  46. 46. 如何做出移過表格列時,出 現編輯選單的效果? (WordPress 後台編輯文章列表)
  47. 47. 如何產生動態下拉選單? (http://www.ocar.com.tw/)
  48. 48. 如何將頁面以 Ajax 方式載 入到 blockUI ,並加入拖曳 效果? (http://demo.wabow.com/ecmail/)
  49. 49. 還缺什麼?
  50. 50. 你的想像力!
  51. 51. 課後練習
  52. 52. 請試著在 AJAX 要求啟動時,透過 blockUI 把頁 面遮閉起來;然後當 AJAX 要求結束時,再解除 blockUI 。
  53. 53. 在「如何產生動態下拉選單?」範例中有個隱藏 欄位「 fullIdPath 」,指得是頁面載入時,下拉 選單依次會選到的項目。請試著完成這部份的功 能。
  54. 54. 請試著結合「如何做出移過表格列時,出現編輯 選單的效果?」及「如何將頁面以Ajax 方式載入 到blockUI,並加入拖曳效果?」兩個範例的效 果,也就是當點選「修改」後,會出現修改的彈 出視窗。
  55. 55. 下課
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×