Post on 09-May-2015
description
咩星征服計劃
用 JS 征服地球 Part II
羊小咩 Lamb MeiLamb-mei@homakimi.comlamb@lamb-mei.com
現任 禾米數位創意 Consultant
Time of use
course content
course content
• jQuery Introduction • jQuery Seletor• jQuery API• Javascript Online
jQuery Introduction
jQuery Introduction - What is jQuery
圖片來源 http://jquery.com/
jQuery 是一個快速，體積小，功能豐富的JavaScript Lib 。
易於使用的 API 處理 HTML DOM 遍歷操作，事件處理，動畫和 Ajax ，並簡單處理多種瀏覽器的問題。
jQuery Introduction - download
http://jquery.com/download/
版本1.9.x此版本很多舊方法因效能問題被棄用，若有使用套件請注意套件使用版本１ .10.x不使用舊方法可使用最心版本2.x不支援 IE 6 7 8
jQuery Introduction – 如何運作
$("div").addClass("special");
jQuery 基礎 – 如何運作
$("div").addClass("special");
選取的元素
jQuery 基礎 – 如何運作
$("div").addClass("special");
選取的元素
要做的事情
jQuery Selector
jQuery 基礎 –選取元素
$( 您想選擇的元素 )
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div")
選取所有 DIV
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("#body")
取 id 為 body 的元素
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div#body")
選取 id 為 body 的 <div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$(".contents")
選取 class 為 contents 的元素
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div.contents p")
選取 class 為 contents 的 <div> 底下任何一 層的 <p>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div > div")
選取被 <div> 包住的下一層 <div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div:has(div)")
和前一個範例相反 選取至少有包住一個 <div> 的 <div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div[id]")
查找所有含有 id 属性的 div元素
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div[class='contents']")
查找屬性 class 為 contents 的 div 元素。
jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded 當準備好 DOM Tree 就會觸發
jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded 當準備好 DOM Tree 就會觸發
window.onload所有文件內的元件，包含圖檔等等全部下載完成後才會觸發
jQuery 基礎 – Ready 事件
$(document).ready(function() {
//do something});
jQuery 基礎 – Ready 事件
$(function() {//do something
});
縮寫
jQuery API
Category
jQuery API
• AJAX
Category
jQuery API
• AJAX• Attributes
Category
jQuery API
• AJAX• Attributes• CSS
Category
jQuery API
• AJAX• Attributes• CSS• Data
Category
jQuery API
• AJAX• Attributes• CSS• Data• Effects
Category
jQuery API
• AJAX• Attributes• CSS• Data• Effects
• Events
Category
jQuery API
• AJAX• Attributes• CSS• Data• Effects
• Events• Forms
Category
jQuery API
• AJAX• Attributes• CSS• Data• Effects
• Events• Forms• Traversing
Category
jQuery API
• AJAX• Attributes• CSS• Data• Effects
• Events• Forms• Traversing• Selectors
Do Someting
jQuery API
jQuery API – Do Something
.show()
.hide()
.toggle()
jQuery API – Do Something
.show()
顯示元素
.hide()
.toggle()
jQuery API – Do Something
.show()
顯示元素
.hide()
隱藏元素
.toggle()
jQuery API – Do Something
.show()
顯示元素
.hide()
隱藏元素
.toggle()
切換顯示或隱藏
jQuery API – Do Something
.css()
.addClass()
.removeClass()
. toggleClass()
jQuery API – Do Something
.css()設定樣式
.addClass()
.removeClass()
. toggleClass()
jQuery API – Do Something
.css()設定樣式
.addClass()
新增 class
.removeClass()
. toggleClass()
jQuery API – Do Something
.css()設定樣式
.addClass()
新增 class
.removeClass()
移除 class
. toggleClass()
jQuery API – Do Something
.css()設定樣式
.addClass()
新增 class
.removeClass()
移除 class
. toggleClass()切換 class
jQuery API – Do Something
. append()
.html()
.text()
jQuery API – Do Something
. append()設定樣式
.html()
.text()
jQuery API – Do Something
. append()設定樣式
.html()
設定 html
.text()
jQuery API – Do Something
. append()設定樣式
.html()
設定 html
.text()
設定 Text 標籤語言無效只當作文字
jQuery API – Do Something
.click()
.bind()
jQuery API – Do Something
.click()點擊事件
.bind()
jQuery API – Do Something
.click()點擊事件
.bind()
綁定事件
.unbind()
移除綁定事件
example
jQuery API
jQuery API – Do Something
選取最後一個 <p> ，並且修 class 屬性
原始的 HTML
<p>Hello</p><p>and</p><p>Goodbye</p>
jQuery API – Do Something
選取最後一個 <p> ，並且修 class 屬性
原始的 HTML
<p>Hello</p><p>and</p><p>Goodbye</p>
$( "p:last" ).addClass( "selected highlight" );
jQuery API – Do Something
選取最後一個 <p> ，並且修 class 屬性
執行結果的 HTML
<p>Hello</p><p>and</p><p class="selected highlight">Goodbye</p>
$( "p:last" ).addClass( "selected highlight" );
jQuery API – Do Something
選取 id 為 contents 的元素，並且修 css 屬性
<div id="contents"> ... </div>
原始的 HTML
jQuery API – Do Something
<div id="contents"> ... </div>
選取 id 為 contents 的元素，並且修 css 屬性
原始的 HTML
$("#contents").css({ border: “2px solid red", height: “60px" });
jQuery API – Do Something
<div id="contents” style="border: 2px solid red; height: 60px" > ... </div>
選取 id 為 contents 的元素，並且修 css 屬性
執行結果的 HTML
$("#contents").css({ border: “2px solid red", height: “60px" });
jQuery API – Do Something
<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>
選取所有有 target 屬性的<a> 並且在其節點下加入一段文字
原始的 HTML
jQuery API – Do Something
$("a[target]").append(" (blank)");
<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>
選取所有有 target 屬性的<a> 並且在其節點下加入一段文字
原始的 HTML
jQuery API – Do Something
$("a[target]").append(" (blank)");
<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>
選取所有有 target 屬性的<a> 並且在其節點下加入一段文字
執行結果的 HTML
jQuery API – Do Something
<span>Hello</span><div></div>
選取<div> 並修改 HTML
原始的 HTML
jQuery API – Do Something
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
<span>Hello</span><div></div>
選取<div> 並修改 HTML
原始的 HTML
jQuery API – Do Something
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
<span>Hello</span><div><span class='red'>Hello <b>Again</b></span></div>
選取<div> 並修改 HTML
執行結果的 HTML
jQuery API – Do Something
<span>Hello</span><div></div>
選取<div> 並修改 Text
原始的 HTML
jQuery API – Do Something
<span>Hello</span><div></div>
選取<div> 並修改 Text
原始的 HTML
$( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );
jQuery API – Do Something
選取<div> 並修改 Text
$( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );
執行結果的 HTML
<span>Hello</span><div><span class='red'>Hello <b>Again</b></span></div>
jQuery API – Do Something
選取<div> 並修改 Text
$( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );
執行結果的 HTML
<span>Hello</span><div><span class='red'>Hello <b>Again</b></span></div>
.html() 和 .text() 最大的不同 Text 輸入的資料不會被執行 （避免 XSS )
jQuery API – Do Something
選取<button> 並設定 click 事件
<button>I'm a Button</button>
原始的 HTML
jQuery API – Do Something
選取<button> 並設定 click 事件
<button>I'm a Button</button>
原始的 HTML
$("button").click(function(){ alert(“You Just Clicked on a Button");
});
Javascript Online
Javascript Online
http://jsfiddle.net/
practice
jQuery API
show & hidehttp://codepen.io/phate/pen/sGAzl
togglehttp://codepen.io/phate/pen/pKtsu
addClass & removeClasshttp://codepen.io/phate/pen/CEazJ
toggleClasshttp://codepen.io/phate/pen/KAdEq
csshttp://codepen.io/phate/pen/mErxt
append／ prependhttp://codepen.io/phate/pen/AnKys
html / texthttp://codepen.io/phate/pen/nHEDi
jQuery APIhttp://goo.gl/JwAUZD
羊小咩 Lamb MeiLamb-mei@homakimi.comlamb@lamb-mei.com
2014 / 01 / 02
Thank You!