咩星征服計劃 用 Js 征服地球 Part III

514 views

Published on

jQuery Seletor (Advanced)
jQuery Effect

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
514
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

咩星征服計劃 用 Js 征服地球 Part III

  1. 1. 咩星征服計劃 用 JS 征服地球 Part III
  2. 2. 羊小咩 Lamb Mei Lamb-mei@homakimi.com lamb@lamb-mei.com 現任 禾米數位創意 Consultant
  3. 3. course content
  4. 4. course content • jQuery Seletor (Advanced) • jQuery Effect • Practice
  5. 5. jQuery Seletor (Advanced)
  6. 6. 打的雖然是進階
  7. 7. 但不是代表很難的意思 你騙人
  8. 8. 只是用動作方式 再選擇一次
  9. 9. jQuery Seletor (Advanced) . find() 由目前已經搜索到的元素,再使用一次搜索器
  10. 10. jQuery Seletor (Advanced) $( "div" ).find( "span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
  11. 11. jQuery Seletor (Advanced) $( "div" ).find( "span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
  12. 12. jQuery Seletor (Advanced) $( "div" ).find( "span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
  13. 13. jQuery Seletor (Advanced) . children() 由目前已經搜索到的元素,再使用一次搜索器 與 .find() 相似但.children 只單往下搜索一個層級
  14. 14. jQuery Seletor (Advanced) $( "div" ). children() <div>And One Last <span>Time</span> </div>
  15. 15. jQuery Seletor (Advanced) $( "div" ). children() <div>And One Last <span>Time</span> </div>
  16. 16. jQuery Seletor (Advanced) $( "div" ). children() <div>And One Last <span>Time</span> </div>
  17. 17. jQuery Seletor (Advanced) $( "div" ). children("span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
  18. 18. jQuery Seletor (Advanced) $( "div" ). children("span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
  19. 19. jQuery Seletor (Advanced) $( "div" ). children("span" ) <div> <p> <span>Hello</span>, how are you? </p> <span>I’m fine.</span> </div>
  20. 20. jQuery Seletor (Advanced) . parent() 與 . children () 相反往上搜索一個層級
  21. 21. jQuery Seletor (Advanced) $( "p" ) .parent( ".selected" ) <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
  22. 22. jQuery Seletor (Advanced) $( "p" ) .parent( ".selected" ) <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
  23. 23. jQuery Seletor (Advanced) $( "p" ) .parent( ".selected" ) <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
  24. 24. jQuery Seletor (Advanced) . siblings() 取得相似兄弟姊妹的元素
  25. 25. jQuery Seletor (Advanced) $( "li.third-item" ).siblings() <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li>
  26. 26. jQuery Seletor (Advanced) $( "li.third-item" ).siblings() <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li>
  27. 27. jQuery Seletor (Advanced) $( "li.third-item" ).siblings() <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li>
  28. 28. jQuery Seletor (Advanced) . next() 取得相似元素的下一個
  29. 29. jQuery Seletor (Advanced) .prev() 取得相似元素的上一個
  30. 30. jQuery Seletor (Advanced) .eq() 指定索引中的元素
  31. 31. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li>
  32. 32. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li>
  33. 33. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li>
  34. 34. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> 0
  35. 35. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> 1
  36. 36. jQuery Seletor (Advanced) $( "li" ). eq( 2 ) <ul> </ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> 2
  37. 37. jQuery Seletor (Advanced) .filter() 這個…很複雜所以不解釋
  38. 38. jQuery Seletor (Advanced) .filter() 這個…很複雜所以不解釋 可自訂選擇方式過濾器
  39. 39. jQuery Effect
  40. 40. jQuery Effect 淡入淡出
  41. 41. jQuery Effect -淡入淡出 .fadeIn() 淡入元素 . fadeOut() 淡出元素
  42. 42. jQuery Effect 滑動
  43. 43. jQuery Effect -滑動 . slideDown() 向下滑動 .slideUp() 向上滑動 . slideToggle() 滑動切換
  44. 44. jQuery Effect 動畫
  45. 45. jQuery Effect -動畫 . animate(properties); 製定CSS動畫 Properties 為CSS 屬性
  46. 46. jQuery Effect -動畫 .animate( properties [, duration ] [, easing ] [, complete ] )
  47. 47. jQuery Effect -動畫 $( "#book" ).animate( { opacity: 0.25, left: "+=50”} );
  48. 48. jQuery Effect -動畫 $( "#book" ).animate( { opacity: 0.25, left: "+=50”}, 5000, function() { // Animation complete. } );
  49. 49. Practice
  50. 50. Practice 下拉選單
  51. 51. Practice -下拉選單 下拉選單 - 練習網址 http://goo.gl/fmBRh1
  52. 52. Practice -下拉選單 滑入menu 背景變色
  53. 53. Practice -下拉選單 滑入menu 背景變色 使用 .hover( ) .css( ) {background:"#AAAACC"}
  54. 54. Practice -下拉選單 滑入menu 背景變色 使用 .hover( ) .css( ) {background:"#AAAACC"} 完整範例 http://goo.gl/L9VNnf
  55. 55. Practice -下拉選單 滑入menu 顯示submenu
  56. 56. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover( ) .stop( ) .slideDown() .slideUp()
  57. 57. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover( ) .stop( ) .slideDown() .slideUp() 完整範例 http://goo.gl/t1yZku
  58. 58. Practice 顯示效果
  59. 59. Practice -下拉選單 顯示效果 - 練習網址 http://goo.gl/WeJ4uB
  60. 60. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover() . animate()
  61. 61. Practice -下拉選單 滑入menu 顯示submenu 使用 .hover() . animate() 完整範例 http://goo.gl/GnqnzN
  62. 62. Thank You! 羊小咩 Lamb Mei Lamb-mei@homakimi.com lamb@lamb-mei.com 2014 / 01 / 09

×