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(6/6)
Search
winwu
October 19, 2015
Programming
0
260
JavaScript Basic For 6 Weeks(6/6)
jquery 2
winwu
October 19, 2015
Tweet
Share
More Decks by winwu
See All by winwu
Google Data Studio 分享
winwu
0
87
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
72
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
230
Google Analytics 分享 1 - 基礎知識篇
winwu
0
330
HTML_CSS_前端基礎講座-4.pdf
winwu
0
420
HTML/CSS 前端基礎講座-3
winwu
0
430
HTML/CSS 前端基礎講座-2
winwu
0
450
2016 HTML CSS 前端基礎講座-1
winwu
1
530
2016 中正大學 weic.tw - RWD
winwu
3
930
Other Decks in Programming
See All in Programming
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Outline View in SwiftUI
1024jp
1
340
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
240
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
subpath importsで始めるモック生活
10tera
0
320
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
150
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Featured
See All Featured
Writing Fast Ruby
sferik
627
61k
Scaling GitHub
holman
458
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fireside Chat
paigeccino
34
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Why Our Code Smells
bkeepers
PRO
334
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Transcript
JavaScript Basic Week 6 Rails Girls Weekly 2015-10-20 Win Wu
.eq( ) 取得第幾個匹配元素的物件 http://api.jquery.com/eq/ $(‘li’).eq(2); 從 li 元素中,找到第三個 <li> 類似的還有
lt(), gt() ….
:even 選取偶數的元素。 常⽤用在列表, 或是 table 的 tr 上。 同樣的,也有 :odd
可以⽤用。
.css() 改變元素的 css。 ⼀一個參數,代表要取得某元素的某個 css 屬性。 (getter) 兩個參數,代表要設定該元素的某種 css 屬性。(setter)
$(‘body').css('background-color'); // “rgba(0, 0, 0, 0)” 取得 body 的背景 $(‘body’).css(‘background-color', ‘red’); // 將 body 的背景設定為紅⾊色
.css() 同時你也可以同時為某個元素設定好幾個 css 屬性。 $('body').css( { 'background-color': 'red', 'font-size': '18px'
} );
.addClass() 為某個元素增加 css class name。 $(‘body’).addClass(‘isMobile’); .removeClass() 為某個元素移除 css class
name。 $(‘body’).removeClass(‘isMobile’);
jQuery.noConflict() 與其他 JavaScript Library 名稱衝突解決⽅方案。 像是 prototypejs 也是⽤用 $ 代表⾃自⼰己,
假如你想要同時使⽤用兩者就會造成 $ 名稱使⽤用上的衝突。 noConflict 可以讓你修改 jQuery 的別名。 var $jq = jQuery.noConflict(); $jq('body').css('background', 'blue');
.remove() 刪除⼀一個元素。 $(‘#somethis’).remove(); .hide() 跟 .remove() 都可以把元素變不⾒見。 但是只有眼睛看到的結果是⼀一樣的, hide() 是把元素藏起來,實際上還存在
DOM 裡。 remove 會把整個元素從 DOM 裡刪掉。
jQuery Ajax jQuery 的 ajax 有很多種⽅方式: $.get(), $.post(), $.ajax(), $.getJSON….
AJAX 是與 server 交換數據的⽅方式,可以不⽤用重新 載⼊入網⾴頁的情況下,更新網⾴頁的內容。
鏈結 少寫⼀一點,多做⼀一點 http://jsbin.com/qapezufocu/edit?js,output
jQuery Plugin 套件
套件? When ? 官⽅方提供的 method 少了你需要的功能。 When ? ⼀一樣的功能⾃自⼰己寫⽐比較花時間,所以透過適 當的套件,可以達到⼀一樣的效果,還可以⽐比較節省時
間。 Good ? 快速,直覺,⽅方便。 but? 不是所有的 plugin 都能提供 100% 客製化的 功能,很多情況還是需要怎麼改寫套件的 css,或是 知道怎麼使⽤用套件的事件監聽等等。
注意事項 要使⽤用 jQuery 的 plugin,⼀一定要先載⼊入 jQuery,再載⼊入 jQuery plugin 的 JavaScript。否則會先因為讀不到
jQuery ⽽而 先出錯。 看⽂文件,讀範例程式碼。 剛開始套⽤用套件時,盡量將 selector 跟範例的⼀一樣,等套⽤用成功 之後,再來慢慢優化成⾃自⼰己要的樣⼦子。 若相同的功能有好幾種 Plugin,以專案需求跟優缺點來決定使⽤用 哪種。 有些 plugin 除了 js 檔案之外,也要載⼊入官⽅方提供的 css 檔案。
http://t4t5.github.io/sweetalert/ SweetAlert
http://www.jacklmoore.com/colorbox/ ColorBox 類似關鍵字 colorbox, fancybox, popup, modal http://cornel.bopp-art.com/lightcase
Form Validator https://github.com/posabsolute/jQuery-Validation-Engine Demo: http://www.position-relative.net/creation/formValidator/demos/demoRegExp.html 表單驗證是蠻常需要的套件 jQuery.validationEngine 也是⼀一種表單驗證的套件。
Fullpage.js 以 section 單元性的⽅方式填滿整⾴頁畫⾯面的滾動換⾴頁效果。 http://alvarotrigo.com/fullPage/
superscrollorama 滾動視差 (學習曲線⾼高!) http://johnpolacek.github.io/superscrollorama/
Masonry 瀑布流效果 http://masonry.desandro.com/ isotope http://isotope.metafizzy.co/layout-modes/masonry.html
Slideshow google: jquery slide plugin http://www.slidesjs.com/ http://bxslider.com/ http://responsiveslides.com/
Learning Tip! 需要社群好朋友 :P 實際找⼀一個 project 來做 :P
3Q!
contact me win⽼老⿏鼠urad.com.tw Win Wu