http://jquery.com/
這本書是以jQuery 1.2.1版為基礎

ch.1 Introuducing jQuery 
jQuery概略介紹

ch.2 Creating the wrapped element set 
建立elements set

ch.3 Bringing pages to life with jQuery 
讓頁面上的東西更生動

ch.4 Events are where it happens! 
events的操作

ch.5 Sprucing up with animations and effects 
動畫及效果

ch.6 jQuery utility functions 
通用函式

ch.7 Extending jQuery with custom plugins 
自訂擴充plugin

ch.8 Talk to the server with Ajax 
ajax介紹

ch.9 Prominent, powerful,and practical plugins
plugin介紹
http://docs.jquery.com/Plugins 
http://jquery.com/plugins/most_popular 

簡單地說明了ajax運作的過程

首先先介紹jQuery中ajax最簡單的一個command

url是要求的網址
parameters是以object形式帶入的參數
如果有值是使用POST method，省略的話則是使用GET method
callback是當load好的值已經被放入elements後執行的function
這個function有三個參數 response text、the status code跟the XHR instance

$('.injectMe').load('/someResource #div');

這個例子會讀取/someResource頁面的東西
並將內容填入所有class=injectMe的elements中
有一點可以提的是 在url這個參數中 如果只是要取得該頁面上部份的內容時
可以在後面加上selector
像這個例子就是取得/someResource中<div>裡的內容

而如果要使用表單中的值帶入參數
可以利用serialize()來將要傳送的值轉成query string

<form id="form1" name="form1">
<input type="text" name="myname" value="joe">
<input type="text" name="age" value="18">
<input type="text" name="city" value="taipei">
</form>

var str = $("#form1").serialize();
//str會轉成這樣
// myname=joe&age=18&city=taipei

而serializeArray()則是會返回一個object

var myobj = $("#form1").serializeArray();

myobj會轉成這樣
[{name: 'myname', value:'joe'},{name: 'age', value:'18'},{name: 'city', value:'taipei'}]

舉一個賣鞋的頁面來練習load()

以get method連線

$.get(
	'getmydata.php',
	{a:1, b:2, c:3},
	function(data){alert(data);}
);

url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status

url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status
與$.get()相同 但是是返回JSON形式的值

以post method連線
url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status

前一節介紹的是簡易的ajax連線方式
這節則是會介紹比較詳細 可以設定較多細節的方式

可以帶的參數很多
這裡舉較常使用的三個
其他的可以到docs看

$.ajax({
  url: "test.js",
  type: "GET",
  dataType: "script"
});

url是要求的網址
type是POST或是GET
dataType是返回值的形式 可以填入的有xml、xml、xml、json、jsonp、text

$.ajaxSetup()設定同一個頁面中$.ajax()可以共用的參數
可以帶入的參數也就是前一小節(8.4.1)所說的參數
這個不會影響到load()
而設定type時也不會影響到$.get()跟$.post()

除了可以用$.ajaxSetup()預設參數外
還有在ajax連線中的不同階段可以使用的function
ajaxStart()、ajaxSend()、ajaxSuccess()、ajaxError()、ajaxComplete()、ajaxStop()
可以到docs看

是一個綜合練習的例子

使用自訂擴充的plugin可以讓程式及設計有一致性
而且建立重複使用的設計有很多優點
繼承進而擴充了jQuery裡原本就存在的功能更是可以讓事情變得更簡單

要建立自訂擴充的plugin需要一定的規範及規則
以確保可以與其他plugin甚至是其他js lib正常地運作
Extending jQuery包含了像是Utility functions或是Methods兩種形式

為了避免plugin的檔名與原本已經在使用或是其他人建立的檔名重複
這邊提了三點建議
1.以jquery為開頭(可以避免與不是以jQuery為基礎的其他js檔重複)
2.接著可以寫這個plugin的名字
3.最後以.js結尾
以書中的例子來說
如果要寫一個名為Fred的plugin
其檔名可以命名為jquery.fred.js

另一個有用的方法 可以上jQuery收集plugin的地方找找看
如果看到相同的名字就可以避免重複囉

同樣的避免function名字與別人重複到
也是一樣的方法

jQuery('#myitem').show();

如果是自己在寫jQuery的script時
常常會使用$來代替jQuery的寫法
但是在寫plugin時
則是可以使用jQuery來寫
以避免不確定性(例如同頁面有使用prototype.js)囉
或是如前一章6.2所提的

(function($){
//
// 在這裡使用$
//
})(jQuery);

寫在這裡面時就可以用$囉

在使用plugin時可能會需要傳入不同的參數來運用
但是有時只需要用預設值就好了

//例如有一個function有7個參數
function complex(p1,p2,p3,p4,p5,p6,p7) {/* ... */}
//
//但有時只需要填入p1或是p7的值來使用
complex(valueA,null,null,null,null,null,valueB);
//
//甚或是這樣
complex(valueA,null,valueC,valueD,null,null,valueB);

這樣會造成傳入及讀取參數的複雜度
所以可以使用下面的方法來取代

complex(valueA, {
  p3: valueC,
  p4: valueD,
  p7: valueB
});

將一定要傳入的參數如同之前一樣的設定置放
而把其他有時候可以省略的參數合併放在一個object中
這樣便不用在意是第幾個參數省略
或是傳入了多少個參數了

在plugin裡要使用參數的時候
可以利用6.3.6講到的$.extend()

function complex(p1,options){
  var settings = $.extend({
    option1: defaultValue1,
    option2: defaultValue2,
    option3: defaultValue3,
    option4: defaultValue4,
    option5: defaultValue5,
    option6: defaultValue6
  },options||{});
  //其他script
}

因為$.extend()裡排在後面的object會把前面的object中有相同的property值蓋過去
所以如果有填入參數 就會使用填入的參數
不然就是使用預設的參數
而有一點要注意的是||{}這個地方
當完全沒有填入參數時
就都使用plugin中的預設值

(function($){
//
// 在這裡使用$
//
})(jQuery);

就如同7.2.2講的
如果在plugin中有大量使用到jQuery自己本身的method
可以使用上面這樣的方法
就可以在裡面使用$ 而不受到干擾

這兩小節各別有一個Utility functions類型的自訂擴充練習

要建立wrapper methods是使用$.fn
下面是一個簡單的例子

(function($){
  $.fn.makeItBlue = function() {
    return this.css('color','blue');
  }
})(jQuery);

通常來說 除非是特殊需要
否則return的值仍是該wrapped set
這樣才能繼續在chain中使用這組elements

這兩小節各別有一個wrapper method類型的自訂擴充練習

(function($){
  //將settings定義在這裡 才能讓其他的methods(如下面的showPhoto)使用到
  var settings;
  //主要的plugin
  $.fn.photomatic = function(callerSettings) {
    //如同7.2.3所講的參數用法一樣
    settings = $.extend({
      photoElement: '#photomaticPhoto',
      lastControl: null
    }, callerSettings || {});
    //plugin所執行的功能
    settings.thumbnails = this.filter('img');
    settings.thumbnails.click(function(){ showPhoto(this.index); });
    //如果有需要 可以給一個初始值
    showPhoto(0);
    //返回同樣的wrapped set
    return this;
  };
  //將重複性的功能另外寫一個method
  var showPhoto = function(index) {
    settings.photoElement
      .attr('src',settings.transformer(settings.thumbnails[index].src));
    settings.current = index;
  };
})(jQuery);

在7.4.2中 講解的例子架構大概是上面這樣(有刪掉部份的東西)

這章會介紹除了操作elements外的utility functions

這節要介紹三個jQuery flags
$.browser
$.boxModel
$.styleFloat

檢測使用者所用的瀏覽器
一開始是先介紹使用判斷method的方法

if (element.attachEvent) {
  element.attachEvent('onclick',someHandler);
}
else if (element.addEventListener) {
  element.addEventListener('click',someHandler);
}
else {
  throw new Error('event handling not supported');
}

而這個可能發生的問題是 method可以使用
但是裡面帶的參數因為不同的瀏覽器而有不同的意義
所以jQuery提供了一個辨識瀏覽器的方法

if($.browser.msie){
	alert('這是IE瀏覽器');
}

會有下面幾個值
$.browser.msie
$.browser.mozilla
$.browser.safari
$.browser.opera
$.browser.version
前面四個返回的是boolean值
是將瀏覽器歸類到四大類
如果為該類即返回true
其餘會是false
而有些瀏覽器因為版本不同 也可能會有差異 所以$.browser.version是使用的版本

建議是method方法也無法判別了才使用$.browser

$.boxModel返回一個boolean值
當是使用W3C standard box model時返回true
而使用IE box model(或是說traditional box model)時返回false
這個需要用到的時機
書中提到的是關於width跟height的解釋
使用W3C standard box model時
計算width跟height不會包含padding跟border的pixels
而IE box model則會包含
所以可能會造成elements的大小在不同瀏覽器看起來會不太一樣

在不同的瀏覽器對於float有不同的名字
在IE是styleFloat 其他的則是cssFloat
所以使用$.styleFloat就不用擔心這個問題了

element.style[$.styleFloat] = 'left';

不過通常使用css(‘float’)就可以了
$.styleFloat主要是給plugins或是extensions製作的人使用

在Ch1有稍微提到
如果在同個頁面上要使用其他的javascript library
可以使用$.noConflict()來避免衝突

var $j = jQuery.noConflict();

這樣就可以使用$j來代替jQuery或是$了

或是可以使用下面這樣

//要注意有帶參數$喔
(function($) { /* function body here */ })(jQuery);
//或是下面這個ready function
jQuery(function($){alert('$ = '+ $);});

在裡面就還是可以使用$來操作囉

$('#someField').val($.trim($('#someField').val()));

就像PHP中trim()的函式
將字串前後的空白都消除掉
在表單驗證中很常用到

對一個array或object中的值依序作處理

var anArray = ['one','two','three'];
$.each(anArray,function(n,value) {
  //do something here
});
var anObject = {one:1, two:2, three:3};
$.each(anObject,function(name,value) {
  //do something here
});

container是要處理的array或是object
callback是作處理的function
這個function會有兩個參數 第一個是index 第二個是value

以某個條件過濾一個array以生成另一個新的array

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
var newarr = $.grep(arr, function(n, i){
					      return (n > 5);
					    });
//新生成的newarr會是 [9, 8, 6, 9, 7, 8, 6, 9]

第一個參數array很明顯的就是要處理的array
第二個參數callback是作處理的function 會有兩個參數 第一個是value 第二個是index
第三個參數invert是個boolean值
如果省略invert或是填寫false時 當callback返回值為true的話 就會將這個值放進新生成的array中
如果invert填入true 則當callback返回值為false才會將這個值放進新生成的array中

var bigNumbers = $.grep(originalArray,'a>100');
//這時jQuery會自己建立一個function
function(a,i){return a>100;}
//而a就是value ,i就是index

如上所示 callback也可以簡寫為一個string

對一個array作處理並生成為一個新array
第一個參數array是要處理的array
第二個參數callback是作處理的function 會有兩個參數 第一個是value 第二個是index

//將array中的每個值都+1
var oneBased = $.map([0,1,2,3,4],function(value){return value+1;});
//callback如同$.grep()一樣 也是可以寫成一個string
var oneBased = $.map([0,1,2,3,4],'a+1');

而有一點要注意的是
如果callback返回值為null或是undefined
則這個值就不會被放進新array中
所以新的array元素個數是有可能比原本的array少

var characters = $.map(
  ['that','other thing'],
  function(value){return value.split('');}
);
//characters會是['t','h','a','t','o','t','h','e','r',' ','t','h','i','n','g']

如上所示 另一個可以提的是
如果callback處理值完之後 回傳的是一個array
則會將這些所有回傳的array都和在同一個新的array中

判斷一個array中有沒有某個值

var index = $.inArray(2,[1,2,3,4,5]);
//會返回1

第一個參數value是要判斷的值
當第二個參數array中遇到第一個值為value的時候 會返回其index
找不到的時候則會返回-1

var images = document.getElementsByTagName("img");
//這樣是一個NodeList

將一個array-like object(像是一個NodeList)轉換成array

將array中相同的值剔除掉

將數個object合併
下面是一個簡單的例子

var target =  { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { e: 7, f: 8, g: 9 };
$.extend(target,source1,source2);

如果沒有返回給一個新的object
則是會合併在第一個參數target
而這個例子中 target會變為{a: 1, b: 2, c: 4, d: 5, e: 7, f: 8, g: 9}
有一點要注意的是
如果objects中有相同的property 則後面的object的會蓋過前面的
(這個例子就是source1的c:4會蓋過target的c:4，source2的e:7會蓋過source1的e:6)

依據條件或是情況下再讀取其他的外部script 而不是在頁面load時就讀取script
第一個參數url是要讀取的script的路徑
第二個參數是讀取script完成後會執行的function

要簡單地顯示或隱藏elements 是使用show()以及hide()這兩個方法

$("#myimg").hide();
$("#myimg").show();

這裡還有提到一點就是
如果頁面上某個element要預設成隱藏
書裡推薦的是在頁面load完後再使用hide()將他隱藏
會比直接在style裡加display:none;好

這個小節利用一個巢狀列表 以顯示或是隱藏裡面的資訊來練習show()及hide()

還有一個可以切換顯示或是隱藏elements的方法 toggle()

$("#myimg").toggle();

當elements是隱藏的時候 使用toggle()會將他顯示 相反也是一樣

這節是要介紹比較不突兀的顯示或隱藏elements的方法
利用一些effect來讓這個動作比較平滑

$("#myimg").show('fast');
$("#myimg").hide(2000);

第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast)
如果省略的話 則是會像上節講的一樣直接隱藏
第二個參數callback是擺一個function 當這個動作完成時會執行

同樣的 show()跟toggle()的用法也是一樣
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast)
第二個參數callback是擺一個function 當這個動作完成時會執行

另一種顯示或隱藏的方法是改變elements的透明度直到完全透明或是完全顯示
fadeIn()跟fadeOut()

$("#myimg").fadeOut('fast');

(與show()、hide()、toggle()的參數用法一樣)
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數callback是擺一個function 當這個動作完成時會執行

另一個方法fadeTo()則是可以調整elements的透明度

$("#myimg").fadeTo('fast',0.5);

第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數opacity是透明度 他的範圍可以填入0.0 ~ 1.0
第三個參數callback是擺一個function 當這個動作完成時會執行

還有另一種顯示或隱藏的方法是將elements慢慢向上收回或是慢慢向下展開
slideDown()跟slideUp()及切換的slideToggle()

$("#myimg").slideDown(1000);
$("#myimg").slideToggle('slow');

(與show()、hide()、toggle()的參數用法一樣)
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數callback是擺一個function 當這個動作完成時會執行

當要停止某個elements的動作時 要使用stop()

jQuery提供了一個方法animate() 可以讓我們自己設計想要elements作的動作

$('#animateMe').animate(
	{opacity:0,top:0}
  ,'slow'
  ,function(){ $(this).hide(); }
);

properties是填入一個object 而這個object要包含所有最後要達到css stlye
(例如elements的寬度要達到600px 之類的)
duration可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
easing是漸變的方式 有兩種內建的方式linear(線性)、swing(搖擺)
callback是擺一個function 當這個動作完成時會執行
options是填入一個object 而這個object則是可以填入上面講過的duration、easing跟complete(也就是上面說的callback)
還有另一個可以填入的是queue 如果設定為false 則這個動作會立即被執行(也就是如果後面也跟著另一個animate() 這個動作會同時執行)
[update]
如果要設定顏色的漸變 還要再裝plugin

先介紹一個改變尺寸的例子

$('.animateMe').each(function(){
	$(this).animate(
		{
			width: $(this).width() * 2,
			height: $(this).height() * 2
		},
		2000
	);
});

將class=animateMe的elements在2秒(2000毫秒)的時間內將長寬都各別變大為兩倍

介紹一個drop的例子

$('.animateMe').each(function(){
	$(this)
		.css('position','relative')
		.animate(
			{
				opacity: 0,
				top: $(window).height() - $(this).height() - $(this).position().top
			},
			'slow',
			function(){ $(this).hide(); });
});

要先將elements的position設定為relative(因為這樣才能動)
改變class=animateMe的elements的透明度及高度
最後會被移到畫面的底部 並且透明度會變0(也就是完全透明)
然後再將elements隱藏起來

有一點可以提的是
如果將opacity:0改成opacity:"hide"
這個動作最後完成時會直接將elements隱藏
同時也不需要最後的callback的function

一個擴散並消失的例子
將前兩小節的功能結合在一起

$('.animateMe').each(function(){
	var position = $(this).position();
	$(this)
		.css({position:'absolute',top:position.top,
					left:position.left})
		.animate(
			{
        opacity: 'hide',
        width: $(this).width() * 5,
        height: $(this).height() * 5,
        top: position.top - ($(this).height() * 5 / 2),
        left: position.left - ($(this).width() * 5 / 2)
      },
      'normal');
});

因為在擴散的過程中 elements的位置會向右下方長大
所以同時也要改變位置 讓看起來的位置像沒有變一樣(真繞舌)
首先要改變position為absolute 並給定目前的top跟left
然後最終要到達的狀態是
opacity就跟前一小節講的一樣 hide的意思就是最後會隱藏起來
寬度跟高度則是變為原來的五倍
top跟left則是要計算成會讓elements的中心點像是沒有變一樣(也就是向四方擴散)

<div style="width:300px;border:1px solid #c3c3c3;">
  <div style="float:left;">左邊 長的會像這樣</div>
  <div style="float:right;">右邊</div>
  <div style="clear:both;"></div>
</div>

其實是堪用的

不過我找到的用法是這樣

<div style="width:300px;border:1px solid #c3c3c3;">
  <div style="float:right;">右邊</div>
  <div>左邊 效果是這樣</div>
</div>

兩個效果好像一樣喔
但是碼簡潔了不少
記上一筆~~~

<script src="plane/plane.js" type="text/javascript"></script>

就有飛機飛囉~
(如果網頁有作網址rewrite 就可能要把此js檔的路徑跟js檔中圖檔的路徑改成絕對路徑才會正常動作喔)

有時候會卡卡的 應該就是. . .瀏覽器的關係
用google chrome看會飛很快XD

========分隔線===========分隔線========分隔線=============

以下是有用到的相關原理
一共需要4種東西

首先是要加入load事件
可以參考這個

var oldOnload=window.onload||function(){};
window.onload=function(){
oldOnload();
//do something
}

這樣如果頁面上已經有其他onload的函式 就不會被蓋掉了

再來呢
因為要讓飛機從最右邊開始飛
所以要取得可視螢幕的寬度大小
可以參考這裡
而需要這段程式也是因為IE比較XXX的關係
所以要判斷是不是IE

function getSize(){
  var myWidth=0;
  if(typeof(window.innerWidth)=='number'){//Non-IE
    myWidth=window.innerWidth;
  }else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){//IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  }else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){//IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

第三點呢
則是只有當圖片是png才需要的
因為IE6之前的瀏覽器 不支援透明的png圖片(會顯示一塊灰色的)
所以如果當圖片是png的時候
需要用到一點css hack
下面是函式中的片段

var img_src="plane/plane.png";
var img2_src="plane/transparent.gif";
var img_w=45;
var img_h=45;
var img=document.createElement("img");
if(navigator.appName=="Microsoft Internet Explorer"){
	img.src=img2_src;
	img.width=img_w;
	img.height=img_h;
	img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img_src+", sizingmethod=scale);";
}
else{
	img.src=img_src;
}

如果為IE的話 則是先將原本的圖片替換成一張透明的圖片
並設定這張透明的圖片寬度高度 使寬高跟原本的圖片一樣
再加上IE特有的filter
便完成了

最後一點就是讓飛機動起來～
先將這個<img>的position設定為absolute
並設定好top跟left
再利用setTimeout()改變他的left
結果就會很像在動囉~

如果要看完整的js檔 可以在該下載檔案裡面看到喔

這個例子沒有用到javascript library(如jQuery)
所以碼不是太簡潔
如果利用jQuery的話 會更簡單
下次再試試看XD

IE6 position:fixed bug (固定窗口方法)
跨浏览器的CSS固定定位{position:fixed}
CSS Fixed Positioning
position:fixed for Internet Explorer
position: fixed in Internet Explorer
讓你的頁面在ie6也能玩position:fixed