JavaScript Basic For 6 Weeks（5/6)

RAILS GIRLS WEEKLY JAVASCRIPT BASIC week 5 2015-10-13 Win Wu

JQUERY • 跨瀏覽器的 JavaScript 函式庫 (Library)，簡化 JavaScript 操作 DOM 的⽅方式。
• ⺫⽬目前最受歡迎的 JavaScript 函式庫 (Library)。 http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results The State of Front-End Tooling – 2015

source from: http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results The State of Front-End Tooling – 2015

• 原作者 John Resign (http://ejohn.org/) • 開發者 jQuery Team •
穩定版本 2.1.4 • 編程語⾔言 JavaScript • MIT License • jquery.com http://ejohn.org/about/

下載 JQUERY 的幾種⽅方式 1. 直接從網路下載 jQuery 的 JavaScript 2. 使⽤用
CDN 載⼊入 jQuery 3. ⽤用 Bower 下載 4. ⽤用 git 下載註: Bower(http://bower.io/) 是⼀一個 web package 的管理⼯工具，可以透過 Bower 下載第三⽅方的 JavaScript 套件。

1. 直接從網路下載 JQUERY 的 JAVASCRIPT • 如直接另存 http://code.jquery.com/jquery-1.11.3.min.js 現有的 jQuery
JavaScript 檔案，放到⾃自⼰己的網站資料夾，在⾴頁⾯面中透過 <script> 標籤引⼊入到⾴頁⾯面使⽤用。 • jQuery JavaScript 有分 min 跟沒有 min 的，差別在於有沒有壓縮過⽽而已。當然有壓縮過就⽐比較輕量。

2. 使⽤用 CDN 載⼊入 JQUERY • CDN (Content Delivery Network)，⼜又名內容傳遞網路。這是⼀一種
內容在網路上傳輸的快取機制。 • 其實就是相當於連線到別⼈人的主機取得 jQuery 的檔案。 • 缺點是⼀一定要有網路。 • 優點是加速網站瀏覽的速度，可有效分散流量，提升網站穩定度, 節省網路頻寬。

2. 使⽤用 CDN 載⼊入 JQUERY • 常⾒見提供 CDN 的公司像是: ✓
MaxCDN (jQuery 使⽤用) ✓ Google CDN ✓ Microsoft CDN ✓ CDNJS CDN ✓ jsDelivr CDN • ⽤用法: • 直接在 <script> 標籤的 src 使⽤用 CDN 商的 jQuery 網址。

3. 使⽤用 BOWER • ⾸首先你要先安裝 Bower 這個⼯工具 • 在你的專案下設定 bower.json
或是使⽤用 bower init 去建⽴立⼀一個 bower.json 設定檔案。 • 使⽤用 Bower 指令下載 jQuery: bower install jquery • 預設情況下會放到 bower_components 的資料夾

⽰示意圖: 在已經有安裝過 bower 的環境下安裝 jQuery

4. 使⽤用 GIT 下載 • 從 Github clone 下來  git
clone git://github.com/jquery/jquery.git

JQUERY 的特點 • 跨瀏覽器的DOM元素選擇 • DOM 巡訪與更改：⽀支援CSS • 事件（Events） •
CSS 操作 • 特效和動畫（移動、淡⼊入、淡出等等） • Ajax • JavaScript Plugin • 輕量

準備可以執⾏行 JQUERY 的⾴頁⾯面 1. 只要⾴頁⾯面有載⼊入 jQuery 就可以。 2. 確認確實載⼊入 jQuery
3. 注意載⼊入的時機點 http://stackoverﬂow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false

JQUERY 語法 • jQuery 的精神就是找到某樣你想操作的東⻄西(選取 Query HTML 的元素)，然後對它做事情。 $("#test").hide()
$( 選取想要抓到的物件 ) hide() 是 jQuery 的 API ⽤用來隱藏被選取的物件 • 範例: 針對 id 是 test 的 DOM 做隱藏

JQUERY 語法 $(selector).method() $ 代表的是 jQuery，像是 $(‘body’ ) 也能⽤用 jQuery(‘body’)
表⽰示，$ 是個簡化的表⽰示。 selector 代表的是要被抓到的 DOM 元素 method 針對被選取起來的 DOM 做操作

JQUERY ⽂文件就緒函式 (常⾒見) $(document).ready(function(){ // 把程式放在這邊 }); 為了防⽌止⾴頁⾯面還沒渲染完就執⾏行 jQuery 程式，
可以利⽤用 $(document).ready(function(){ }) 函式，此函式代表著會等⽂文件都就緒後再執⾏行裡⾯面的程式。

body { } JQUERY SELECTOR 選擇器 jQuery 使⽤用 CSS Selector
選取 HTML 元素。 #container ul > li { } CSS $(‘body) $(‘#container’) $(‘ul > li’) jQuery Selector 給會寫 css 的朋友: 只要你知道怎麼透過 css 選到東⻄西，你就會知道怎麼⽤用 jQuery 的 selector 選到該樣東⻄西。參考更多: http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

JQUERY 事件事件是 jQuery 核⼼心的功能。像前⾯面提到的 $(document).ready(function(){ })，ready 也是⼀一個事件。 jQuery 的事件處理分為以下這幾種類別:
(以官網為主) Browser Events Document Loading Event Handler Attachment Event Object Form Events Keyboard Events Mouse Events

JQUERY 事件事件⽅方法會觸發被選取的元素的事件，或使⽤用⼀一個函式 (function) 綁到⼀一個事件去。常⾒見的事件⽤用法: $(document).ready(function) $(selector).click(function) $(selector).load(function)
$(selector).focus(function) $(selector).mouseover(function) http://www.w3school.com.cn/jquery/jquery_ref_events.asp

JQUERY 事件範例: 當 <body> 被 click 時，執⾏行⼀一個 function http://jsbin.com/piﬁguqopi/edit?html,css,js,output

JQUERY API

JQUERY 隱藏跟顯⽰示隱藏 $(selector).hide( ) 顯⽰示 $(selector).show( ) 試試看: http://jsbin.com/rububebedu/edit?html,js,output

JQUERY 淡⼊入跟淡出淡⼊入 $(selector).fadeIn( ) 淡出 $(selector).fadeOut( ) 試試看: http://jsbin.com/nihuleripu/edit?html,css,js,output

JQUERY SLIDE 滑動 slideDown() slideUp() slideToggle() 試試看: http://jsbin.com/lanileyona/edit?html,css,js,output (練習有雷 :P)

JQUERY 取得 DOM 的內容 text() 設定或是取得所選元素的內容 html() 設定或是取得所選元素的內容 val() 設定或是取得表單⽤用的
DOM 值

JQUERY 取得 DOM 的內容 text() 設定或是取得所選元素的內容

JQUERY 取得 DOM 的內容 html() 設定或是取得所選元素的內容

JQUERY 取得 DOM 的內容 val() 設定或是取得表單元素的值 http://jsbin.com/topijowabe/edit?js,console,output

學會多看⽂文件 http://api.jquery.com/addClass/

回家作業 http://webdesignerwall.com/tutorials/jquery-tutorials-for- designers

THANK YOU!

JavaScript Basic For 6 Weeks（5/6)

JavaScript Basic For 6 Weeks（5/6)

winwu

More Decks by winwu

Other Decks in Programming

Featured

Transcript

RAILS GIRLS WEEKLY JAVASCRIPT BASIC week 5 2015-10-13 Win Wu

JQUERY • 跨瀏覽器的 JavaScript 函式庫 (Library)，簡化 JavaScript 操作 DOM 的⽅方式。

source from: http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results The State of Front-End Tooling – 2015

• 原作者 John Resign (http://ejohn.org/) • 開發者 jQuery Team •

下載 JQUERY 的幾種⽅方式 1. 直接從網路下載 jQuery 的 JavaScript 2. 使⽤用

1. 直接從網路下載 JQUERY 的 JAVASCRIPT • 如直接另存 http://code.jquery.com/jquery-1.11.3.min.js 現有的 jQuery

2. 使⽤用 CDN 載⼊入 JQUERY • CDN (Content Delivery Network)，⼜又名內容傳遞網路。這是⼀一種

2. 使⽤用 CDN 載⼊入 JQUERY • 常⾒見提供 CDN 的公司像是: ✓

3. 使⽤用 BOWER • ⾸首先你要先安裝 Bower 這個⼯工具 • 在你的專案下設定 bower.json

⽰示意圖: 在已經有安裝過 bower 的環境下安裝 jQuery

4. 使⽤用 GIT 下載 • 從 Github clone 下來  git

JQUERY 的特點 • 跨瀏覽器的DOM元素選擇 • DOM 巡訪與更改：⽀支援CSS • 事件（Events） •

準備可以執⾏行 JQUERY 的⾴頁⾯面 1. 只要⾴頁⾯面有載⼊入 jQuery 就可以。 2. 確認確實載⼊入 jQuery

JQUERY 語法 • jQuery 的精神就是找到某樣你想操作的東⻄西(選取 Query HTML 的元素)，然後對它做事情。 $("#test").hide()

JQUERY 語法 $(selector).method() $ 代表的是 jQuery，像是 $(‘body’ ) 也能⽤用 jQuery(‘body’)

JQUERY ⽂文件就緒函式 (常⾒見) $(document).ready(function(){ // 把程式放在這邊 }); 為了防⽌止⾴頁⾯面還沒渲染完就執⾏行 jQuery 程式，

body { } JQUERY SELECTOR 選擇器 jQuery 使⽤用 CSS Selector

JQUERY 事件事件是 jQuery 核⼼心的功能。像前⾯面提到的 $(document).ready(function(){ })，ready 也是⼀一個事件。 jQuery 的事件處理分為以下這幾種類別:

JQUERY 事件事件⽅方法會觸發被選取的元素的事件，或使⽤用⼀一個函式 (function) 綁到⼀一個事件去。常⾒見的事件⽤用法: $(document).ready(function) $(selector).click(function) $(selector).load(function)

JQUERY 事件範例: 當 <body> 被 click 時，執⾏行⼀一個 function http://jsbin.com/piﬁguqopi/edit?html,css,js,output

JQUERY API

JQUERY 隱藏跟顯⽰示隱藏 $(selector).hide( ) 顯⽰示 $(selector).show( ) 試試看: http://jsbin.com/rububebedu/edit?html,js,output

JQUERY 淡⼊入跟淡出淡⼊入 $(selector).fadeIn( ) 淡出 $(selector).fadeOut( ) 試試看: http://jsbin.com/nihuleripu/edit?html,css,js,output

JQUERY SLIDE 滑動 slideDown() slideUp() slideToggle() 試試看: http://jsbin.com/lanileyona/edit?html,css,js,output (練習有雷 :P)

JQUERY 取得 DOM 的內容 text() 設定或是取得所選元素的內容 html() 設定或是取得所選元素的內容 val() 設定或是取得表單⽤用的

JQUERY 取得 DOM 的內容 text() 設定或是取得所選元素的內容

JQUERY 取得 DOM 的內容 html() 設定或是取得所選元素的內容

JQUERY 取得 DOM 的內容 val() 設定或是取得表單元素的值 http://jsbin.com/topijowabe/edit?js,console,output

學會多看⽂文件 http://api.jquery.com/addClass/

回家作業 http://webdesignerwall.com/tutorials/jquery-tutorials-for- designers

THANK YOU!