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
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
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
技術同人誌をMCP Serverにしてみた
74th
1
640
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
800
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
4 Signs Your Business is Dying
shpigford
184
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Docker and Python
trallard
44
3.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How to Ace a Technical Interview
jacobian
278
23k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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