SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
jQuery
Bear Lee
1
1
jQuery?
其實Flash花俏的樣子,其中最重要的Action
Script正是很類似javascript的,他們都屬於
ECMA Script
2
2
jQuery?
然而javascript不像Flash是一個被打包好的東
西,所以解釋它的東西不是它自己。
開放標準總是會遇到這種事情。
3
3
jQuery?
jQuery是Javascript的Library中的一種。
它讓我們能更輕易的透過它幫忙解決掉跨瀏覽
器的Javascript差異。
4
4
only jQuery?
除了jQuery外事實上,javascript Library不只
有jQuery而已,還有諸如
Yahoo UI(YUI),Prototype, Mootool, Ext.js 等等
5
5
only jQuery?
除了jQuery外事實上,javascript Library不只
有jQuery而已,還有諸如
Yahoo UI(YUI),Prototype, Mootool, Ext.js 等等
jQuery擅長處理Dom結構。
5
5
only jQuery?
除了jQuery外事實上,javascript Library不只
有jQuery而已,還有諸如
Yahoo UI(YUI),Prototype, Mootool, Ext.js 等等
jQuery擅長處理Dom結構。
輕巧、社群持續活躍。
5
5
jquery
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.1/jquery.min.js"></script>
6
6
<script src=”js/your.js”></script>
7
7
in your.js
$(document).ready(function() {
頁面載入後你要寫的js內容
});
8
8
in your.js
$(document).ready(function() {
頁面載入後你要寫的js內容
});
DOMContentLoaded
8
8
$
$() = jQuery()
9
9
$
$() = jQuery()
var $j = jQuery.noConflict();
$j(document).ready(function({
內容
});
9
9
$("div")
選取的方式用很多種,大部分CSS中先進的選取
器都支援
10
10
#bear>li>a
11
11
#bear>li>a
#bear:first #bear:last
11
11
#bear>li>a
#bear:first #bear:last
#bear:first-child #bear:last-child
11
11
#bear>li>a
#bear:first #bear:last
#bear:first-child #bear:last-child
#bear:odd奇數 #bear:even偶數
11
11
#bear>li>a
#bear:first #bear:last
#bear:first-child #bear:last-child
#bear:odd奇數 #bear:even偶數
#bear:conains(fish)
11
11
#bear[href] 有href的#bear
#bear[href=fish.png]值是fish.png
#bear[href^= ‘fi’]以fi開頭
#bear[href$= ‘.png’] 以.png結尾
12
12
#bear[href] 有href的#bear
#bear[href=fish.png]值是fish.png
#bear[href^= ‘fi’]以fi開頭
#bear[href$= ‘.png’] 以.png結尾
#bear[href*= ‘fish’] 只要有fish
12
12
$("#bear").addClass(“gss”);
<div id=”bear” class=”gss”>(・ั( )・ั)</div>
13
13
$("#bear").css(‘height’,‘100px’);
$("#bear").css(
{
‘background-color’ : 'yellow',
‘font-size’ : '120%'
}
);
14
14
animate
$("#bear").animate(
{opacity:’0’,width:‘960px’},
{queue:false,duration:300});
先控制要它變得css,接著寫執行的過程時間
queue:false代表後面若有動作會同時執行
15
15
click
$('#bear').click(function(){
點了之後要他做的事
} );
16
16
toggle,Hover
$('#bear').toggle(
! ! ! function(){
$(this).addClass("star-off");
$(this).removeClass("star-on");},
! ! ! ! function(){
$(this).addClass("star-on"); ! ! !
$(this).removeClass("star-off");
});
17
17
append
$('#bear').append(
‘<div class=”sport”> (・ั( )・ั) </div>’
);
直接給Bear一個新的東西
18
18
append
var fish = $(‘#fish’);
$(document).ready(function() {
$('#bear').append(fish);});
給Bear一個頁面中的東西,會帶走餵給Bear
19
19
plugin
這是一點我比較常用到的。
接著我們看一些jQuery Plugin
20
20
superfish
http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started
21
21
superfish
<script type="text/javascript" src="superfish.js"></script>
<script>
$(document).ready(function() {
$('ul.menu').superfish();
});
</script>
http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started
21
21
Lightbox
http://planetozh.com/projects/lightbox-clones/
22
22
TOp up
http://gettopup.com/
23
23
TOp up
http://gettopup.com/
23
23
Coda-slider
http://www.ndoherty.biz/demos/coda-slider/2.0/
24
24
Spritely
http://spritely.net/download/
25
25
Spritely
http://spritely.net/download/
$('#bird')
.sprite({fps: 8, no_of_frames: 3})
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 4000,
pause: 3000
});
25
25
More
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-
jquery-lovers/
http://masonry.desandro.com/
http://uniformjs.com/
26
26
so
jQuery讓我們做到很多特別的動態效果甚至
是CSS選擇器,
一些還未支援的CSS3技術也能模擬支援
然而JS的效能依然不能用過頭。
特別是jQuery這類工具,在不夠了解JS的情
況下亦會大大拖垮網站效能。
27
27

Contenu connexe

En vedette

אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...
אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...
אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...Elad Goldenberg
 
Street Fighting Data Science
Street Fighting Data ScienceStreet Fighting Data Science
Street Fighting Data ScienceBenedikt Köhler
 
Маркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнесМаркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнесJustine Toms
 
Virální marketing
Virální marketingVirální marketing
Virální marketingPavel Herman
 
Havis september 2014 updated
Havis september 2014 updatedHavis september 2014 updated
Havis september 2014 updatedhavissmonthly
 
My p0rtfolio in ed tech
My p0rtfolio in ed techMy p0rtfolio in ed tech
My p0rtfolio in ed techAnjaaaaa
 
ചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSI
ചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSIചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSI
ചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSIRafeek Tmk
 
სკოლების ბრენდირება
სკოლების ბრენდირებასკოლების ბრენდირება
სკოლების ბრენდირებაKhatuna Tsikhelashvili
 
"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016
"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016
"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016Emanuela Marchiafava
 
I certificati bianchi: i casi di studio, Pierantonio Fiorentino
I certificati bianchi: i casi di studio, Pierantonio Fiorentino   I certificati bianchi: i casi di studio, Pierantonio Fiorentino
I certificati bianchi: i casi di studio, Pierantonio Fiorentino AREA Science Park
 
How Change Agents Worldwide Works out Loud in the Cloud
How Change Agents Worldwide Works out Loud in the CloudHow Change Agents Worldwide Works out Loud in the Cloud
How Change Agents Worldwide Works out Loud in the CloudChange Agents Worldwide
 

En vedette (15)

אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...
אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...
אלעד גולדנברג: הופכות עולמות. נשים מובילות את תרבות המסחר העולמי החדש ב 2014 ...
 
Street Fighting Data Science
Street Fighting Data ScienceStreet Fighting Data Science
Street Fighting Data Science
 
Маркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнесМаркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнес
 
Il giro d'Italia in #80giorni
Il giro d'Italia in #80giorniIl giro d'Italia in #80giorni
Il giro d'Italia in #80giorni
 
Virální marketing
Virální marketingVirální marketing
Virální marketing
 
Ashish Nagar
Ashish NagarAshish Nagar
Ashish Nagar
 
שירותי מוסך רייך
שירותי מוסך רייךשירותי מוסך רייך
שירותי מוסך רייך
 
Havis september 2014 updated
Havis september 2014 updatedHavis september 2014 updated
Havis september 2014 updated
 
My p0rtfolio in ed tech
My p0rtfolio in ed techMy p0rtfolio in ed tech
My p0rtfolio in ed tech
 
ചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSI
ചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSIചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSI
ചാന്ദ്രദിന ക്വിസ്. GHSS PERINGOTTUKURISSI
 
სკოლების ბრენდირება
სკოლების ბრენდირებასკოლების ბრენდირება
სკოლების ბრენდირება
 
"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016
"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016
"Ora et Labora" la Via Francigena in provincia di Pavia @BIT2016
 
I certificati bianchi: i casi di studio, Pierantonio Fiorentino
I certificati bianchi: i casi di studio, Pierantonio Fiorentino   I certificati bianchi: i casi di studio, Pierantonio Fiorentino
I certificati bianchi: i casi di studio, Pierantonio Fiorentino
 
How Change Agents Worldwide Works out Loud in the Cloud
How Change Agents Worldwide Works out Loud in the CloudHow Change Agents Worldwide Works out Loud in the Cloud
How Change Agents Worldwide Works out Loud in the Cloud
 
Del viajero social al Wearable
Del viajero social al WearableDel viajero social al Wearable
Del viajero social al Wearable
 

Similaire à jQuery easy use

J query基础教程(1~2章)
J query基础教程(1~2章)J query基础教程(1~2章)
J query基础教程(1~2章)dong bichao
 
JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用EZoApp
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號鍾誠 陳鍾誠
 
JQuery Mobile 框架介紹與使用 20140713
JQuery Mobile 框架介紹與使用 20140713JQuery Mobile 框架介紹與使用 20140713
JQuery Mobile 框架介紹與使用 20140713EZoApp
 
向jquery学习
向jquery学习向jquery学习
向jquery学习jay li
 
咩星征服計劃 用 Js 征服地球Part VI
咩星征服計劃 用 Js 征服地球Part VI咩星征服計劃 用 Js 征服地球Part VI
咩星征服計劃 用 Js 征服地球Part VI羊 小咩 (lamb-mei)
 
Modern Web Development Introduction
Modern Web Development IntroductionModern Web Development Introduction
Modern Web Development IntroductionJohn Chou
 
Yahoo! 應用程式 (YAP) 在前端的開發
Yahoo! 應用程式 (YAP) 在前端的開發Yahoo! 應用程式 (YAP) 在前端的開發
Yahoo! 應用程式 (YAP) 在前端的開發Joseph Chiang
 
J Query简介及入门指南
J Query简介及入门指南J Query简介及入门指南
J Query简介及入门指南AppZ
 

Similaire à jQuery easy use (11)

jQuery入門
jQuery入門jQuery入門
jQuery入門
 
J query基础教程(1~2章)
J query基础教程(1~2章)J query基础教程(1~2章)
J query基础教程(1~2章)
 
JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用JQuery Mobile 框架介紹與使用
JQuery Mobile 框架介紹與使用
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
 
JQuery Mobile 框架介紹與使用 20140713
JQuery Mobile 框架介紹與使用 20140713JQuery Mobile 框架介紹與使用 20140713
JQuery Mobile 框架介紹與使用 20140713
 
向jquery学习
向jquery学习向jquery学习
向jquery学习
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
 
咩星征服計劃 用 Js 征服地球Part VI
咩星征服計劃 用 Js 征服地球Part VI咩星征服計劃 用 Js 征服地球Part VI
咩星征服計劃 用 Js 征服地球Part VI
 
Modern Web Development Introduction
Modern Web Development IntroductionModern Web Development Introduction
Modern Web Development Introduction
 
Yahoo! 應用程式 (YAP) 在前端的開發
Yahoo! 應用程式 (YAP) 在前端的開發Yahoo! 應用程式 (YAP) 在前端的開發
Yahoo! 應用程式 (YAP) 在前端的開發
 
J Query简介及入门指南
J Query简介及入门指南J Query简介及入门指南
J Query简介及入门指南
 

Plus de DesBear Li

符合時代的介面設計潮流
符合時代的介面設計潮流符合時代的介面設計潮流
符合時代的介面設計潮流DesBear Li
 
走在前面,看見世界的設計
走在前面,看見世界的設計走在前面,看見世界的設計
走在前面,看見世界的設計DesBear Li
 
Bear gss experiences shareing
Bear gss experiences shareingBear gss experiences shareing
Bear gss experiences shareingDesBear Li
 
GSS Cloud Services Portal new design introduction
GSS Cloud Services Portal new design introductionGSS Cloud Services Portal new design introduction
GSS Cloud Services Portal new design introductionDesBear Li
 
2014 GSS solution day - ID Bear
2014 GSS solution day - ID Bear2014 GSS solution day - ID Bear
2014 GSS solution day - ID BearDesBear Li
 
GSS FED 別亂來交給我們來 Bear
GSS FED 別亂來交給我們來 Bear GSS FED 別亂來交給我們來 Bear
GSS FED 別亂來交給我們來 Bear DesBear Li
 
Videgree-新增工作
Videgree-新增工作Videgree-新增工作
Videgree-新增工作DesBear Li
 
Videgree-首頁說明
Videgree-首頁說明Videgree-首頁說明
Videgree-首頁說明DesBear Li
 
愛顧客 分享茶會 感動行銷
愛顧客 分享茶會 感動行銷愛顧客 分享茶會 感動行銷
愛顧客 分享茶會 感動行銷DesBear Li
 
中小企業使用經驗分享 愛報告茶會 Alan_20120112
中小企業使用經驗分享 愛報告茶會 Alan_20120112中小企業使用經驗分享 愛報告茶會 Alan_20120112
中小企業使用經驗分享 愛報告茶會 Alan_20120112DesBear Li
 
愛你業績好分享茶會 part4 不景氣的業績突圍術-2
愛你業績好分享茶會 part4 不景氣的業績突圍術-2愛你業績好分享茶會 part4 不景氣的業績突圍術-2
愛你業績好分享茶會 part4 不景氣的業績突圍術-2DesBear Li
 
愛報告 分享茶會 簡報大綱-20111212上鼎
愛報告 分享茶會 簡報大綱-20111212上鼎愛報告 分享茶會 簡報大綱-20111212上鼎
愛報告 分享茶會 簡報大綱-20111212上鼎DesBear Li
 

Plus de DesBear Li (15)

Vital UI kit
Vital UI kitVital UI kit
Vital UI kit
 
符合時代的介面設計潮流
符合時代的介面設計潮流符合時代的介面設計潮流
符合時代的介面設計潮流
 
走在前面,看見世界的設計
走在前面,看見世界的設計走在前面,看見世界的設計
走在前面,看見世界的設計
 
Bear gss experiences shareing
Bear gss experiences shareingBear gss experiences shareing
Bear gss experiences shareing
 
GSS Cloud Services Portal new design introduction
GSS Cloud Services Portal new design introductionGSS Cloud Services Portal new design introduction
GSS Cloud Services Portal new design introduction
 
2014 GSS solution day - ID Bear
2014 GSS solution day - ID Bear2014 GSS solution day - ID Bear
2014 GSS solution day - ID Bear
 
Bear RWD
Bear RWDBear RWD
Bear RWD
 
GSS FED 別亂來交給我們來 Bear
GSS FED 別亂來交給我們來 Bear GSS FED 別亂來交給我們來 Bear
GSS FED 別亂來交給我們來 Bear
 
Web basic
Web basicWeb basic
Web basic
 
Videgree-新增工作
Videgree-新增工作Videgree-新增工作
Videgree-新增工作
 
Videgree-首頁說明
Videgree-首頁說明Videgree-首頁說明
Videgree-首頁說明
 
愛顧客 分享茶會 感動行銷
愛顧客 分享茶會 感動行銷愛顧客 分享茶會 感動行銷
愛顧客 分享茶會 感動行銷
 
中小企業使用經驗分享 愛報告茶會 Alan_20120112
中小企業使用經驗分享 愛報告茶會 Alan_20120112中小企業使用經驗分享 愛報告茶會 Alan_20120112
中小企業使用經驗分享 愛報告茶會 Alan_20120112
 
愛你業績好分享茶會 part4 不景氣的業績突圍術-2
愛你業績好分享茶會 part4 不景氣的業績突圍術-2愛你業績好分享茶會 part4 不景氣的業績突圍術-2
愛你業績好分享茶會 part4 不景氣的業績突圍術-2
 
愛報告 分享茶會 簡報大綱-20111212上鼎
愛報告 分享茶會 簡報大綱-20111212上鼎愛報告 分享茶會 簡報大綱-20111212上鼎
愛報告 分享茶會 簡報大綱-20111212上鼎
 

jQuery easy use