Soumettre la recherche
Mettre en ligne
Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3
•
6 j'aime
•
1,006 vues
Kuro Hsu
Suivre
Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3 2016/06/21
Lire moins
Lire la suite
Formation
Signaler
Partager
Signaler
Partager
1 sur 46
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3
Kuro Hsu
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Kuro Hsu
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
Kuro Hsu
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
[朝陽科大] D3.js 資料視覺化入門
[朝陽科大] D3.js 資料視覺化入門
Kuro Hsu
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
2015年4月TDOH幹部訓
2015年4月TDOH幹部訓
Vincent Chi
Recommandé
Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 1/3
Kuro Hsu
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Rails Girls Weekly - 初探前端網頁技術 JavaScript 3/3
Kuro Hsu
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
[JSDC 2015] Turf.js - 地理資訊的分析與地圖視覺化
Kuro Hsu
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
[朝陽科大] D3.js 資料視覺化入門
[朝陽科大] D3.js 資料視覺化入門
Kuro Hsu
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
2015年4月TDOH幹部訓
2015年4月TDOH幹部訓
Vincent Chi
5分鐘建立第一個Bluemix網站
5分鐘建立第一個Bluemix網站
Pei-Ru Shih
如何選擇合適的網站製作平台
如何選擇合適的網站製作平台
Hui Chieh Chiu
連淡水阿嬤都聽得懂的機器學習入門 scikit-learn
連淡水阿嬤都聽得懂的機器學習入門 scikit-learn
Cicilia Lee
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
Marie Chang
十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術
鍾誠 陳鍾誠
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Tim (文昌)
Contenu connexe
En vedette
5分鐘建立第一個Bluemix網站
5分鐘建立第一個Bluemix網站
Pei-Ru Shih
如何選擇合適的網站製作平台
如何選擇合適的網站製作平台
Hui Chieh Chiu
連淡水阿嬤都聽得懂的機器學習入門 scikit-learn
連淡水阿嬤都聽得懂的機器學習入門 scikit-learn
Cicilia Lee
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
Marie Chang
十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術
鍾誠 陳鍾誠
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Tim (文昌)
En vedette
(6)
5分鐘建立第一個Bluemix網站
5分鐘建立第一個Bluemix網站
如何選擇合適的網站製作平台
如何選擇合適的網站製作平台
連淡水阿嬤都聽得懂的機器學習入門 scikit-learn
連淡水阿嬤都聽得懂的機器學習入門 scikit-learn
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
十分鐘讓程式人搞懂雲端平台與技術
十分鐘讓程式人搞懂雲端平台與技術
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3
1.
Rails Girls Weekly -
week 2 Kuro Hsu 2016/06/21
2.
about me • Kuro
Hsu • • kurotanshi [at] gmail.com • http://kuro.tw
3.
4.
5.
https://jsbin.com/ JS BIN
6.
jQuery $('#header') // id="header" $('.header')
// class="header" $('div') // <div> $('div, p') // <div> <p> $('body > .tag') // body div $('body div') // body div ( ) $('div.body') // class="body" div
7.
jQuery jQuery jQuery
8.
jQuery jQuery jQuery
9.
.css( ) DOM
10.
event • JavaScript • ( ) •
( ) -> ( )
11.
$(SELECTOR).on( , callback); .btn
[ ] —> alert('Hello') [ ]
12.
this this DOM $() jQuery
jQuery http://goo.gl/tebAOR
13.
jQuery
14.
• A B
15.
jQuery Effects Lab
Page https://goo.gl/ktdOD2
16.
http://goo.gl/22hOij
17.
.show() / .hide() • $('.block').show(); $('.block').hide(); $('.block').show(500); $('.block').show('slow'); $('.block').show('high'); $('.block').hide(500);
18.
http://goo.gl/0wiW5q
19.
fadeIn() / fadeOut() $('.block').fadeIn(); $('.block').fadeOut(); $('.block').fadeIn(500); $('.block').fadeIn('slow'); $('.block').fadeIn('high'); $('.block').fadeOut(500); •
20.
http://goo.gl/0wiW5q
21.
.toggle() / .fadeToggle() $('.block').toggle(); $('.block').fadeToggle();
22.
[ ] https://goo.gl/GrnV8J
23.
slideDown() / slideUp()
/ slideToggle() • / / $('.block').slideDown(); $('.block').slideUp(); $('.block').slideDown(500); $('.block').slideDown('slow'); $('.block').slideToggle();
24.
[ ] http://goo.gl/ook3xo
25.
jQuery animate $(selector).animate( {
CSS }, [ ], [ ], [callback]); $("div").animate({ 'left': '150px', 'bottom': '100px' }, 1000);
26.
$("div").animate({ 'height': '50px'
}, 600); $("div").animate({ 'width': '150px' }, 1000); $("div").animate({ 'opacity': 0.5 }, 600); • jQuery animate http://goo.gl/QGrgOh
27.
http://goo.gl/d8tnaX
28.
29.
30.
http://goo.gl/HGYlUS
31.
https://goo.gl/lWz1eq
32.
: if -
else if ( A ) { …… } else{ …… }
33.
: if -
else if ( 10 > 100 ) { alert('A'); } else{ alert('B'); }
34.
35.
.position() • top left $('.block').position(); $('.block').position().top; $('.block').position().left;
36.
.stop() $('div').on('click', function(){ $(this).stop() .animate({'height':
'+=50px'}, 1000); }); • .stop() http://goo.gl/1BjU7p
37.
jQuery Easing Plugin https://github.com/gdsmith/jquery.easing
38.
$('div').on('click', function(){ $(this).animate( {'height': '200px'},
1000, 'easeOutBack'); }); http://goo.gl/oLM2vy
39.
jQuery Advanced Effects
Lab https://goo.gl/yfTCZp
40.
• easing • Easing
http://easings.net/zh-tw
41.
week 2 - •
jQuery • show / hide / toggle • fadeIn / fadeOut / fadeToggle • slideDown / slideUp / slideToggle • jQuery Easing
42.
43.
44.
45.
46.
Thanks
Télécharger maintenant