JavaScript Basic For 6 Weeks（5/6)

jQuery Basic(1)

Transcript

1. RAILS GIRLS WEEKLY JAVASCRIPT BASIC week 5 2015-10-13 Win Wu
2. JQUERY • 跨瀏覽器的 JavaScript 函式庫 (Library)，簡化 JavaScript 操作 DOM 的⽅方式。 • ⺫⽬目前最受歡迎的 JavaScript 函式庫 (Library)。 http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results The State of Front-End Tooling – 2015
3. source from: http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results The State of Front-End Tooling – 2015
4. • 原作者 John Resign (http://ejohn.org/) • 開發者 jQuery Team • 穩定版本 2.1.4 • 編程語⾔言 JavaScript • MIT License • jquery.com http://ejohn.org/about/
6. 下載 JQUERY 的幾種⽅方式 1. 直接從網路下載 jQuery 的 JavaScript 2. 使⽤用 CDN 載⼊入 jQuery 3. ⽤用 Bower 下載 4. ⽤用 git 下載 註: Bower(http://bower.io/) 是⼀一個 web package 的管理⼯工具，可以透過 Bower 下載第三⽅方的 JavaScript 套件。
7. 1. 直接從網路下載 JQUERY 的 JAVASCRIPT • 如直接另存 http://code.jquery.com/jquery-1.11.3.min.js 現有的 jQuery JavaScript 檔案，放到⾃自⼰己的網站資料夾，在⾴頁⾯面中透過 <script> 標籤引⼊入到⾴頁⾯面使⽤用。 • jQuery JavaScript 有分 min 跟沒有 min 的，差別在於有沒有壓縮 過⽽而已。當然有壓縮過就⽐比較輕量。
8. 2. 使⽤用 CDN 載⼊入 JQUERY • CDN (Content Delivery Network)，⼜又名內容傳遞網路。這是⼀一種 內容在網路上傳輸的快取機制。 • 其實就是相當於連線到別⼈人的主機取得 jQuery 的檔案。 • 缺點是⼀一定要有網路。 • 優點是加速網站瀏覽的速度，可有效分散流量，提升網站穩定 度, 節省網路頻寬。
9. 2. 使⽤用 CDN 載⼊入 JQUERY • 常⾒見提供 CDN 的公司像是: ✓ MaxCDN (jQuery 使⽤用) ✓ Google CDN ✓ Microsoft CDN ✓ CDNJS CDN ✓ jsDelivr CDN • ⽤用法: • 直接在 <script> 標籤的 src 使⽤用 CDN 商的 jQuery 網址。
10. 3. 使⽤用 BOWER • ⾸首先你要先安裝 Bower 這個⼯工具 • 在你的專案下設定 bower.json 或是使⽤用 bower init 去建⽴立⼀一個 bower.json 設定檔案。 • 使⽤用 Bower 指令下載 jQuery: bower install jquery • 預設情況下會放到 bower_components 的資料夾
11. ⽰示意圖: 在已經有安裝過 bower 的環境下安裝 jQuery
12. 4. 使⽤用 GIT 下載 • 從 Github clone 下來
 git clone git://github.com/jquery/jquery.git
13. JQUERY 的特點 • 跨瀏覽器的DOM元素選擇 • DOM 巡訪與更改：⽀支援CSS • 事件（Events） • CSS 操作 • 特效和動畫（移動、淡⼊入、淡出等等） • Ajax • JavaScript Plugin • 輕量
14. 準備可以執⾏行 JQUERY 的⾴頁⾯面 1. 只要⾴頁⾯面有載⼊入 jQuery 就可以。 2. 確認確實載⼊入 jQuery 3. 注意載⼊入的時機點 http://stackoverflow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false
15. JQUERY 語法 • jQuery 的精神就是找到某樣你想操作的東⻄西(選取 Query HTML 的元 素)，然後對它做事情。 $("#test").hide() $( 選取想要抓到的物件 ) hide() 是 jQuery 的 API ⽤用來隱藏被選取的物件 • 範例: 針對 id 是 test 的 DOM 做隱藏
16. JQUERY 語法 $(selector).method() $ 代表的是 jQuery，像是 $(‘body’ ) 也能⽤用 jQuery(‘body’) 表⽰示，$ 是個簡化的表⽰示。 selector 代表的是要被抓到的 DOM 元素 method 針對被選取起來的 DOM 做操作
17. JQUERY ⽂文件就緒函式 (常⾒見) $(document).ready(function(){ // 把程式放在這邊 }); 為了防⽌止⾴頁⾯面還沒渲染完就執⾏行 jQuery 程式， 可以利⽤用 $(document).ready(function(){ }) 函式， 此函式代表著會等⽂文件都就緒後再執⾏行裡⾯面的程 式。
18. 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
19. JQUERY 事件 事件是 jQuery 核⼼心的功能。像前⾯面提到的 $(document).ready(function(){ })，ready 也是⼀一個事件。 jQuery 的事件處理分為以下這幾種類別: (以官網為主) Browser Events Document Loading Event Handler Attachment Event Object Form Events Keyboard Events Mouse Events
20. 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
21. JQUERY 事件 範例: 當 <body> 被 click 時，執⾏行⼀一個 function http://jsbin.com/pifiguqopi/edit?html,css,js,output
22. JQUERY API
23. JQUERY 隱藏跟顯⽰示 隱藏 $(selector).hide( ) 顯⽰示 $(selector).show( ) 試試看: http://jsbin.com/rububebedu/edit?html,js,output
24. JQUERY 淡⼊入跟淡出 淡⼊入 $(selector).fadeIn( ) 淡出 $(selector).fadeOut( ) 試試看: http://jsbin.com/nihuleripu/edit?html,css,js,output
25. JQUERY SLIDE 滑動 slideDown() slideUp() slideToggle() 試試看: http://jsbin.com/lanileyona/edit?html,css,js,output (練習有雷 :P)
26. JQUERY 取得 DOM 的內容 text() 設定或是取得所選元素的內容 html() 設定或是取得所選元素的內容 val() 設定或是取得表單⽤用的 DOM 值
27. JQUERY 取得 DOM 的內容 text() 設定或是取得所選元素的內容
28. JQUERY 取得 DOM 的內容 html() 設定或是取得所選元素的內容
29. JQUERY 取得 DOM 的內容 val() 設定或是取得表單元素的值 http://jsbin.com/topijowabe/edit?js,console,output
30. 學會多看⽂文件 http://api.jquery.com/addClass/
31. 回家作業 http://webdesignerwall.com/tutorials/jquery-tutorials-for- designers
32. THANK YOU!