咩星征服計劃用 js 征服地球 part ii

咩星征服計劃

用 JS 征服地球 Part II

羊小咩 Lamb [email protected]@lamb-mei.com

現任禾米數位創意 Consultant

mailto:[email protected]




Time of use

19:00 – 22:00

圖片來源 mtmorriscommunitychurch

http://www.mtmorriscommunitychurch.org/

course content

course content

• jQuery Introduction • jQuery Seletor• jQuery API• Javascript Online

jQuery Introduction

jQuery Introduction

圖片來源 http://jquery.com/

What is jQuery

http://jquery.com/

jQuery Introduction - What is jQuery

圖片來源 http://jquery.com/

jQuery 是一個快速，體積小，功能豐富的JavaScript Lib 。

易於使用的 API 處理 HTML DOM 遍歷操作，事件處理，動畫和 Ajax ，並簡單處理多種瀏覽器的問題。

http://jquery.com/

jQuery Introduction - download

http://jquery.com/download/

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

jQuery Introduction – 如何運作

$("div").addClass("special");

jQuery 基礎 – 如何運作


選取的元素

jQuery 基礎 – 如何運作


選取的元素

要做的事情

jQuery Selector

jQuery 基礎 –選取元素

$( 您想選擇的元素 )


<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>



$("div")

選取所有 DIV



$("#body")

取 id 為 body 的元素



$("div#body")

選取 id 為 body 的 <div>



$(".contents")

選取 class 為 contents 的元素



$("div.contents p")

選取 class 為 contents 的 <div> 底下任何一層的 <p>



$("div > div")

選取被 <div> 包住的下一層 <div>



$("div:has(div)")

和前一個範例相反選取至少有包住一個 <div> 的 <div>



$("div[id]")

查找所有含有 id 属性的 div元素



$("div[class='contents']")

查找屬性 class 為 contents 的 div 元素。

jQuery 基礎 – Ready 事件

jQuery Ready 是 DOMContentLoaded



DOMContentLoaded 當準備好 DOM Tree 就會觸發



DOMContentLoaded 當準備好 DOM Tree 就會觸發

window.onload所有文件內的元件，包含圖檔等等全部下載完成後才會觸發


$(document).ready(function() {

//do something});


$(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


• Events

Category

jQuery API


• Events• Forms

Category

jQuery API


• Events• Forms• Traversing

Category

jQuery API


• Events• Forms• Traversing• Selectors

API 查詢jQuery API

http://api.jquery.com/

http://api.jquery.com/

jQuery API

http://jqapi.com/

API 查詢

http://jqapi.com/

Do Someting

jQuery API

jQuery API – Do Something

.show()

.hide()

.toggle()


.show()

顯示元素

.hide()

.toggle()


.show()

顯示元素

.hide()

隱藏元素

.toggle()


.show()

顯示元素

.hide()

隱藏元素

.toggle()

切換顯示或隱藏


.css()

.addClass()

.removeClass()

. toggleClass()


.css()設定樣式

.addClass()

.removeClass()

. toggleClass()


.css()設定樣式

.addClass()

新增 class

.removeClass()

. toggleClass()


.css()設定樣式

.addClass()

新增 class

.removeClass()

移除 class

. toggleClass()


.css()設定樣式

.addClass()

新增 class

.removeClass()

移除 class

. toggleClass()切換 class


. append()

.html()

.text()


. append()設定樣式

.html()

.text()



.html()

設定 html

.text()



.html()

設定 html

.text()

設定 Text 標籤語言無效只當作文字


.click()

.bind()


.click()點擊事件

.bind()


.click()點擊事件

.bind()

綁定事件

.unbind()

移除綁定事件

example

jQuery API


選取最後一個 <p> ，並且修 class 屬性

原始的 HTML

<p>Hello</p><p>and</p><p>Goodbye</p>



原始的 HTML

<p>Hello</p><p>and</p><p>Goodbye</p>

$( "p:last" ).addClass( "selected highlight" );



執行結果的 HTML

<p>Hello</p><p>and</p><p class="selected highlight">Goodbye</p>

$( "p:last" ).addClass( "selected highlight" );


選取 id 為 contents 的元素，並且修 css 屬性

<div id="contents"> ... </div>

原始的 HTML


<div id="contents"> ... </div>


原始的 HTML

$("#contents").css({ border: “2px solid red", height: “60px" });


<div id="contents” style="border: 2px solid red; height: 60px" > ... </div>



$("#contents").css({ border: “2px solid red", height: “60px" });


<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


$("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>


原始的 HTML


$("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>




<span>Hello</span><div></div>

選取<div> 並修改 HTML

原始的 HTML


$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );



原始的 HTML


$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );

<span>Hello</span><div><span class='red'>Hello <b>Again</b></span></div>





選取<div> 並修改 Text

原始的 HTML




原始的 HTML

$( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );






.html() 和 .text() 最大的不同 Text 輸入的資料不會被執行（避免 XSS )


選取<button> 並設定 click 事件

<button>I'm a Button</button>

原始的 HTML


選取<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/




Javascript Online

http://codepen.io/

http://codepen.io/

http://codepen.io/

Javascript Online

http://jsbin.com/

http://jsbin.com/

http://codepen.io/

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

http://codepen.io/phate/pen/sGAzl

http://codepen.io/phate/pen/pKtsu

http://codepen.io/phate/pen/CEazJ

http://codepen.io/phate/pen/KAdEq

http://codepen.io/phate/pen/mErxt

http://codepen.io/phate/pen/AnKys

http://codepen.io/phate/pen/nHEDi

羊小咩 Lamb [email protected]@lamb-mei.com

2014 / 01 / 02

Thank You!





咩星征服計劃 用 js 征服地球 part ii

Technology

咩星征服計劃用 js 征服地球 part ii