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
100
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
89
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
300
Google Analytics 分享 1 - 基礎知識篇
winwu
0
340
HTML_CSS_前端基礎講座-4.pdf
winwu
0
430
HTML/CSS 前端基礎講座-3
winwu
0
450
HTML/CSS 前端基礎講座-2
winwu
0
470
2016 HTML CSS 前端基礎講座-1
winwu
1
550
2016 中正大學 weic.tw - RWD
winwu
3
980
Other Decks in Programming
See All in Programming
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
100
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
130
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
670
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
0
130
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
1
280
抽象データ型について学んだ
ryounasso
0
210
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
人には人それぞれのサービス層がある
shimabox
3
460
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
41
2.6k
BBQ
matthewcrist
88
9.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
KATA
mclloyd
29
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Being A Developer After 40
akosma
91
590k
Agile that works and the tools we love
rasmusluckow
329
21k
Six Lessons from altMBA
skipperchong
28
3.8k
YesSQL, Process and Tooling at Scale
rocio
172
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
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