jQuery Seletor (Advanced) jQuery Effect

1. 咩星征服計劃
用 JS 征服地球 Part III

2. 羊小咩 Lamb Mei
Lamb-mei@homakimi.com
lamb@lamb-mei.com
現任 禾米數位創意 Consultant

3. course content

4. course content
• jQuery Seletor (Advanced)
• jQuery Effect
• Practice

5. jQuery Seletor (Advanced)

6. 打的雖然是進階

7. 但不是代表很難的意思
你騙人

8. 只是用動作方式
再選擇一次

9. jQuery Seletor (Advanced)
. find()
由目前已經搜索到的元素，再使用一次搜索器

10. jQuery Seletor (Advanced)
$( "div" ).find( "span" )
<div>
<p>
<span>Hello</span>, how are you?
</p>
<span>I’m fine.</span>
</div>

11. jQuery Seletor (Advanced)
$( "div" ).find( "span" )
<div>
<p>
<span>Hello</span>, how are you?
</p>
<span>I’m fine.</span>
</div>

12. jQuery Seletor (Advanced)
$( "div" ).find( "span" )
<div>
<p>
<span>Hello</span>, how are you?
</p>
<span>I’m fine.</span>
</div>

13. jQuery Seletor (Advanced)
. children()
由目前已經搜索到的元素，再使用一次搜索器
與 .find() 相似但.children 只單往下搜索一個層級

14. jQuery Seletor (Advanced)
$( "div" ). children()
<div>And One Last
<span>Time</span>
</div>

15. jQuery Seletor (Advanced)
$( "div" ). children()
<div>And One Last
<span>Time</span>
</div>

16. jQuery Seletor (Advanced)
$( "div" ). children()
<div>And One Last
<span>Time</span>
</div>

17. jQuery Seletor (Advanced)
$( "div" ). children("span" )
<div>
<p>
<span>Hello</span>, how are you?
</p>
<span>I’m fine.</span>
</div>

18. jQuery Seletor (Advanced)
$( "div" ). children("span" )
<div>
<p>
<span>Hello</span>, how are you?
</p>
<span>I’m fine.</span>
</div>

19. jQuery Seletor (Advanced)
$( "div" ). children("span" )
<div>
<p>
<span>Hello</span>, how are you?
</p>
<span>I’m fine.</span>
</div>

20. jQuery Seletor (Advanced)
. parent()
與 . children () 相反往上搜索一個層級

21. jQuery Seletor (Advanced)
$( "p" ) .parent( ".selected" )
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>

22. jQuery Seletor (Advanced)
$( "p" ) .parent( ".selected" )
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>

23. jQuery Seletor (Advanced)
$( "p" ) .parent( ".selected" )
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>

24. jQuery Seletor (Advanced)
. siblings()
取得相似兄弟姊妹的元素

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. 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. 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. jQuery Seletor (Advanced)
. next()
取得相似元素的下一個

29. jQuery Seletor (Advanced)
.prev()
取得相似元素的上一個

30. jQuery Seletor (Advanced)
.eq()
指定索引中的元素

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. 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. 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. 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. 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. 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. jQuery Seletor (Advanced)
.filter()
這個…很複雜所以不解釋

38. jQuery Seletor (Advanced)
.filter()
這個…很複雜所以不解釋
可自訂選擇方式過濾器

39. jQuery Effect

40. jQuery Effect
淡入淡出

41. jQuery Effect －淡入淡出
.fadeIn()
淡入元素
. fadeOut()
淡出元素

42. jQuery Effect
滑動

43. jQuery Effect －滑動
. slideDown()
向下滑動
.slideUp()
向上滑動
. slideToggle()
滑動切換

44. jQuery Effect
動畫

45. jQuery Effect －動畫
. animate(properties);
製定CSS動畫
Properties 為CSS 屬性

46. jQuery Effect －動畫
.animate(
properties
[, duration ]
[, easing ]
[, complete ]
)

47. jQuery Effect －動畫
$( "#book" ).animate(
{ opacity: 0.25, left: "+=50”}
);

48. jQuery Effect －動畫
$( "#book" ).animate(
{ opacity: 0.25, left: "+=50”},
5000,
function() {
// Animation complete.
}
);

49. Practice

50. Practice
下拉選單

51. Practice -下拉選單
下拉選單 - 練習網址
http://goo.gl/fmBRh1

52. Practice -下拉選單
滑入menu 背景變色

53. Practice -下拉選單
滑入menu 背景變色
使用
.hover( ) .css( )
{background:"#AAAACC"}

54. Practice -下拉選單
滑入menu 背景變色
使用
.hover( ) .css( )
{background:"#AAAACC"}
完整範例 http://goo.gl/L9VNnf

55. Practice -下拉選單
滑入menu 顯示submenu

56. Practice -下拉選單
滑入menu 顯示submenu
使用
.hover( ) .stop( )
.slideDown() .slideUp()

57. Practice -下拉選單
滑入menu 顯示submenu
使用
.hover( ) .stop( )
.slideDown() .slideUp()
完整範例 http://goo.gl/t1yZku

58. Practice
顯示效果

59. Practice -下拉選單
顯示效果 - 練習網址
http://goo.gl/WeJ4uB

60. Practice -下拉選單
滑入menu 顯示submenu
使用
.hover() . animate()

61. Practice -下拉選單
滑入menu 顯示submenu
使用
.hover() . animate()
完整範例 http://goo.gl/GnqnzN

62. Thank You!
羊小咩 Lamb Mei
Lamb-mei@homakimi.com
lamb@lamb-mei.com
2014 / 01 / 09