Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Basic For 6 Weeks(5/6)
Search
winwu
October 12, 2015
Programming
0
670
JavaScript Basic For 6 Weeks(5/6)
jQuery Basic(1)
winwu
October 12, 2015
Tweet
Share
More Decks by winwu
See All by winwu
Google Data Studio 分享
winwu
0
110
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
97
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
310
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
HTML_CSS_前端基礎講座-4.pdf
winwu
0
430
HTML/CSS 前端基礎講座-3
winwu
0
460
HTML/CSS 前端基礎講座-2
winwu
0
480
2016 HTML CSS 前端基礎講座-1
winwu
1
560
2016 中正大學 weic.tw - RWD
winwu
3
990
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Goで作る、開発・CI環境
sin392
0
230
PipeCDのプラグイン化で目指すところ
warashi
1
270
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Adopting Sorbet at Scale
ufuk
77
9.5k
Done Done
chrislema
184
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A designer walks into a library…
pauljervisheath
207
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Six Lessons from altMBA
skipperchong
28
3.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How GitHub (no longer) Works
holman
314
140k
Transcript
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/
None
下載 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://stackoverflow.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/pifiguqopi/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!