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
280
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
120
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
100
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
330
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
HTML_CSS_前端基礎講座-4.pdf
winwu
0
440
HTML/CSS 前端基礎講座-3
winwu
0
460
HTML/CSS 前端基礎講座-2
winwu
0
490
2016 HTML CSS 前端基礎講座-1
winwu
1
560
2016 中正大學 weic.tw - RWD
winwu
3
1k
Other Decks in Programming
See All in Programming
Testing Trophyは叫ばない
toms74209200
0
890
Swift Updates - Learn Languages 2025
koher
2
510
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
API Platform 4.2: Redefining API Development
soyuka
0
220
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
4.3k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Code Reviewing Like a Champion
maltzj
525
40k
RailsConf 2023
tenderlove
30
1.2k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Making Projects Easy
brettharned
117
6.4k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
A designer walks into a library…
pauljervisheath
207
24k
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