jQuery easy use

jQueryBear Lee

11

jQuery?

其實Flash花俏的樣子，其中最重要的Action Script正是很類似javascript的，他們都屬於ECMA Script

22

jQuery?

然而javascript不像Flash是一個被打包好的東西，所以解釋它的東西不是它自己。

開放標準總是會遇到這種事情。

33

jQuery?

jQuery是Javascript的Library中的一種。

它讓我們能更輕易的透過它幫忙解決掉跨瀏覽

器的Javascript差異。

44

only jQuery?

除了jQuery外事實上，javascript Library不只有jQuery而已，還有諸如Yahoo UI(YUI),Prototype, Mootool, Ext.js 等等

55

only jQuery?


jQuery擅長處理Dom結構。

55

only jQuery?


jQuery擅長處理Dom結構。

輕巧、社群持續活躍。

55

jquerybgf_

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

66

http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js




f_h[YUa`Z

<script src=”js/your.js”></script>

77

in your.js

$(document).ready(function() {

頁面載入後你要寫的js內容

});

88

in your.js

$(document).ready(function() {

頁面載入後你要寫的js內容

});

DOMContentLoaded

88

$

$() = jQuery()

99

$

$() = jQuery()

var $j = jQuery.noConflict();

$j(document).ready(function({ 內容 });

99

k^ca

$("div")

選取的方式用很多種，大部分CSS中先進的選取器都支援

1010

eWaTl

#bear>li>a

1111

eWaTl

#bear>li>a

#bear:first #bear:last

1111

eWaTl

#bear>li>a


#bear:first-child #bear:last-child

1111

eWaTl

#bear>li>a



#bear:odd奇數 #bear:even偶數

1111

eWaTl

#bear>li>a



#bear:odd奇數 #bear:even偶數

#bear:conains(fish)

1111

k^ca

#bear[href] 有href的#bear

#bear[href=fish.png]值是fish.png

#bear[href^= ‘fi’]以fi開頭

#bear[href$= ‘.png’] 以.png結尾

1212

k^ca

#bear[href] 有href的#bear

#bear[href=fish.png]值是fish.png

#bear[href^= ‘fi’]以fi開頭

#bear[href$= ‘.png’] 以.png結尾

#bear[href*= ‘fish’] 只要有fish

1212

dT]\

$("#bear").addClass(“gss”);

<div id=”bear” class=”gss”>(･ั(�)･ั)</div>

1313

jViX

$("#bear").css(‘height’,‘100px’);

$("#bear").css( { ‘background-color’ : 'yellow', ‘font-size’ : '120%' });

1414

animate

$("#bear").animate( {opacity:’0’,width:‘960px’},{queue:false,duration:300});

先控制要它變得css,接著寫執行的過程時間queue:false代表後面若有動作會同時執行

1515

click

$('#bear').click(function(){ 點了之後要他做的事 } );

1616

toggle,Hover

$('#bear').toggle(! ! ! function(){$(this).addClass("star-off");$(this).removeClass("star-on");},! ! ! ! function(){$(this).addClass("star-on"); ! ! ! $(this).removeClass("star-off"); });

1717

append

$('#bear').append( ‘<div class=”sport”> (･ั(�)･ั) </div>’

);直接給Bear一個新的東西

1818

append

var fish = $(‘#fish’);$(document).ready(function() {

$('#bear').append(fish);});

給Bear一個頁面中的東西，會帶走餵給Bear

1919

plugin

這是一點我比較常用到的。

接著我們看一些jQuery Plugin

2020

superfish

http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started 2121

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 2121

Lightbox

http://planetozh.com/projects/lightbox-clones/

2222

TOp up

http://gettopup.com/

2323

TOp up

http://gettopup.com/

2323

Coda-sliderhttp://www.ndoherty.biz/demos/coda-slider/2.0/

2424

Spritelyhttp://spritely.net/download/

2525

Spritelyhttp://spritely.net/download/

$('#bird') .sprite({fps: 8, no_of_frames: 3}) .spRandom({ top: 70, left: 100, right: 200, bottom: 340, speed: 4000, pause: 3000 });

2525

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/

2626

so

jQuery讓我們做到很多特別的動態效果甚至是CSS選擇器，

一些還未支援的CSS3技術也能模擬支援

然而JS的效能依然不能用過頭。

特別是jQuery這類工具，在不夠了解JS的情況下亦會大大拖垮網站效能。

2727

Internet

jQuery easy use