jQuery 教學

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

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

3. Time of use

4. 19:00 – 22:00
圖片來源 mtmorriscommunitychurch

5. course content

6. course content
•
•
•
•
jQuery Introduction
jQuery Seletor
jQuery API
Javascript Online

7. jQuery Introduction

8. jQuery Introduction
What is jQuery
圖片來源
http://jquery.com/

9. jQuery Introduction - What is jQuery
jQuery是一個快速，體積小，功能豐富的
JavaScript Lib。
易於使用的API 處理 HTML DOM 遍歷操作，事
件處理，動畫和Ajax，並簡單處理多種瀏覽器
的問題。
圖片來源
http://jquery.com/

10. jQuery Introduction - download
版本
1.9.x
此版本很多舊方法因效能問題被棄
用，若有使用套件請注意套件使用
版本
１.10.x
不使用舊方法可使用最心版本
2.x
不支援 IE 6 7 8
http://jquery.com/download/

11. jQuery Introduction – 如何運作
$("div").addClass("special");

12. jQuery 基礎 – 如何運作
$("div").addClass("special");
選取的元素

13. jQuery 基礎 – 如何運作
要做的事情
$("div").addClass("special");
選取的元素

14. jQuery Selector

15. jQuery 基礎 –選取元素
$(您想選擇的元素)

16. jQuery 基礎 –選取元素
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>

17. jQuery 基礎 –選取元素
$("div")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取所有DIV

18. jQuery 基礎 –選取元素
$("#body")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
取 id 為 body 的元素

19. jQuery 基礎 –選取元素
$("div#body")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取 id 為 body 的 <div>

20. jQuery 基礎 –選取元素
$(".contents")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取 class 為 contents 的元素

21. jQuery 基礎 –選取元素
$("div.contents p")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取 class 為 contents 的 <div> 底下任何一層的 <p>

22. jQuery 基礎 –選取元素
$("div > div")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取被 <div> 包住的下一層 <div>

23. jQuery 基礎 –選取元素
$("div:has(div)")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
和前一個範例相反
選取至少有包住一個 <div> 的 <div>

24. jQuery 基礎 –選取元素
$("div[id]")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
查找所有含有 id 属性的div元素

25. jQuery 基礎 –選取元素
$("div[class='contents']")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
查找屬性 class 為contents 的 div 元素。

26. jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded

27. jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded
當準備好DOM Tree 就會觸發

28. jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded
當準備好DOM Tree 就會觸發
window.onload
所有文件內的元件，包含圖檔等等全部
下載完成後才會觸發

29. jQuery 基礎 – Ready 事件
$(document).ready(function() {
//do something
});

30. jQuery 基礎 – Ready 事件
縮寫
$(function() {
//do something
});

31. jQuery API

32. jQuery API
Category
• AJAX

33. jQuery API
Category
• AJAX
• Attributes

34. jQuery API
Category
• AJAX
• Attributes
• CSS

35. jQuery API
Category
•
•
•
•
AJAX
Attributes
CSS
Data

36. jQuery API
Category
•
•
•
•
•
AJAX
Attributes
CSS
Data
Effects

37. jQuery API
Category
•
•
•
•
•
AJAX
Attributes
CSS
Data
Effects
• Events

38. jQuery API
Category
•
•
•
•
•
AJAX
Attributes
CSS
Data
Effects
• Events
• Forms

39. jQuery API
Category
•
•
•
•
•
AJAX
Attributes
CSS
Data
Effects
• Events
• Forms
• Traversing

40. jQuery API
Category
•
•
•
•
•
AJAX
Attributes
CSS
Data
Effects
•
•
•
•
Events
Forms
Traversing
Selectors

41. jQuery API
API 查詢
http://api.jquery.com/

42. jQuery API
API 查詢
http://jqapi.com/

43. jQuery API
Do Someting

44. jQuery API – Do Something
.show()
.hide()
.toggle()

45. jQuery API – Do Something
.show()
顯示元素
.hide()
.toggle()

46. jQuery API – Do Something
.show()
顯示元素
.hide()
隱藏元素
.toggle()

47. jQuery API – Do Something
.show()
顯示元素
.hide()
隱藏元素
.toggle()
切換顯示或隱藏

48. jQuery API – Do Something
.css()
.addClass()
.removeClass()
. toggleClass()

49. jQuery API – Do Something
.css()
設定樣式
.addClass()
.removeClass()
. toggleClass()

50. jQuery API – Do Something
.css()
設定樣式
.addClass()
新增 class
.removeClass()
. toggleClass()

51. jQuery API – Do Something
.css()
設定樣式
.addClass()
新增 class
.removeClass()
移除 class
. toggleClass()

52. jQuery API – Do Something
.css()
設定樣式
.addClass()
新增 class
.removeClass()
移除 class
. toggleClass()
切換 class

53. jQuery API – Do Something
. append()
.html()
.text()

54. jQuery API – Do Something
. append()
設定樣式
.html()
.text()

55. jQuery API – Do Something
. append()
設定樣式
.html()
設定html
.text()

56. jQuery API – Do Something
. append()
設定樣式
.html()
設定html
.text()
設定Text 標籤語言無效只當作文字

57. jQuery API – Do Something
.click()
.bind()

58. jQuery API – Do Something
.click()
點擊事件
.bind()

59. jQuery API – Do Something
.click()
點擊事件
.bind()
綁定事件
.unbind()
移除綁定事件

60. jQuery API
example

61. jQuery API – Do Something
選取最後一個 <p>，並且修 class 屬性
原始的 HTML
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>

62. jQuery API – Do Something
選取最後一個 <p>，並且修 class 屬性
原始的 HTML
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
$( "p:last" ).addClass( "selected highlight" );

63. jQuery API – Do Something
選取最後一個 <p>，並且修 class 屬性
執行結果的 HTML
<p>Hello</p>
<p>and</p>
<p class="selected highlight">Goodbye</p>
$( "p:last" ).addClass( "selected highlight" );

64. jQuery API – Do Something
選取 id 為 contents 的元素，並且修 css 屬性
原始的 HTML
<div id="contents">
...
</div>

65. jQuery API – Do Something
選取 id 為 contents 的元素，並且修 css 屬性
原始的 HTML
<div id="contents">
...
</div>
$("#contents").css({
border: “2px solid red",
height: “60px"
});

66. jQuery API – Do Something
選取 id 為 contents 的元素，並且修 css 屬性
執行結果的 HTML
<div id="contents” style="border: 2px solid red; height: 60px" >
...
</div>
$("#contents").css({
border: “2px solid red",
height: “60px"
});

67. jQuery API – Do Something
選取所有有 target 屬性的<a>
並且在其節點下加入一段文字
原始的 HTML
<a href="http://homakimi.com">Homakimi</a>
<a href="http://google.com" target="_blank">Google</a>
<a href="http://yahoo.com" target="_blank">Yahoo</a>

68. jQuery API – Do Something
選取所有有 target 屬性的<a>
並且在其節點下加入一段文字
原始的 HTML
<a href="http://homakimi.com">Homakimi</a>
<a href="http://google.com" target="_blank">Google</a>
<a href="http://yahoo.com" target="_blank">Yahoo</a>
$("a[target]").append(" (blank)");

69. jQuery API – Do Something
選取所有有 target 屬性的<a>
並且在其節點下加入一段文字
執行結果的 HTML
<a href="http://homakimi.com">Homakimi</a>
<a href="http://google.com" target="_blank">Google (blank)</a>
<a href="http://yahoo.com" target="_blank">Yahoo (blank)</a>
$("a[target]").append(" (blank)");

70. jQuery API – Do Something
選取<div>
並修改HTML
原始的 HTML
<span>Hello</span>
<div></div>

71. jQuery API – Do Something
選取<div>
並修改HTML
原始的 HTML
<span>Hello</span>
<div></div>
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );

72. jQuery API – Do Something
選取<div>
並修改HTML
執行結果的 HTML
<span>Hello</span>
<div><span class='red'>Hello <b>Again</b></span></div>
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );

73. jQuery API – Do Something
選取<div>
並修改Text
原始的 HTML
<span>Hello</span>
<div></div>

74. jQuery API – Do Something
選取<div>
並修改Text
原始的 HTML
<span>Hello</span>
<div></div>
$( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );

75. jQuery API – Do Something
選取<div>
並修改Text
執行結果的 HTML
<span>Hello</span>
<div>&lt;span class='red'&gt;Hello
&lt;b&gt;Again&lt;/b&gt;&lt;/span&gt;</div>
$( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );

76. jQuery API – Do Something
選取<div>
並修改Text
執行結果的 HTML
<span>Hello</span>
<div>&lt;span class='red'&gt;Hello
&lt;b&gt;Again&lt;/b&gt;&lt;/span&gt;</div>
$( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );
.html() 和 .text() 最大的不同
Text輸入的資料不會被執行 （避免XSS )

77. jQuery API – Do Something
選取<button>
並設定click事件
原始的 HTML
<button>I'm a Button</button>

78. jQuery API – Do Something
選取<button>
並設定click事件
原始的 HTML
<button>I'm a Button</button>
$("button").click(function(){
alert(“You Just Clicked on a Button");
});

79. Javascript Online

80. Javascript Online
http://jsfiddle.net/

81. Javascript Online
http://codepen.io/

82. Javascript Online
http://jsbin.com/

83. jQuery API
practice

84. jQuery API
http://goo.gl/JwAUZD
show & hide
http://codepen.io/phate/pen/sGAzl
toggle
http://codepen.io/phate/pen/pKtsu
addClass & removeClass
http://codepen.io/phate/pen/CEazJ
toggleClass
http://codepen.io/phate/pen/KAdEq
css
http://codepen.io/phate/pen/mErxt
append／prepend
http://codepen.io/phate/pen/AnKys
html / text
http://codepen.io/phate/pen/nHEDi

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