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
270
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
90
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
76
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
250
Google Analytics 分享 1 - 基礎知識篇
winwu
0
330
HTML_CSS_前端基礎講座-4.pdf
winwu
0
420
HTML/CSS 前端基礎講座-3
winwu
0
440
HTML/CSS 前端基礎講座-2
winwu
0
460
2016 HTML CSS 前端基礎講座-1
winwu
1
530
2016 中正大學 weic.tw - RWD
winwu
3
950
Other Decks in Programming
See All in Programming
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
13
2.3k
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
Amazon Nova Reelの可能性
hideg
0
200
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
テストコード書いてみませんか?
onopon
2
340
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
880
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
0
110
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
1
460
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Building Adaptive Systems
keathley
38
2.4k
Writing Fast Ruby
sferik
628
61k
Designing Experiences People Love
moore
139
23k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
Building Applications with DynamoDB
mza
93
6.2k
GitHub's CSS Performance
jonrohan
1030
460k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
The Cult of Friendly URLs
andyhume
78
6.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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