範例下載

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的中心點像是沒有變一樣(也就是向四方擴散)

4.1.1 The DOM Level 0 Event Model
4.1.2 The DOM Level 2 Event Model
4.1.3 The Internet Explorer Event Model
解釋了DOM中event操作的方式
以及IE自己獨到的model
那就是這樣了 繼續讀下去
絕對不是我翻不出來XD

jQuery提供了統一的event操作方式

jQuery要對element綁定event是使用bind()

$("img").bind('click',function(event){alert('Hi there!');});

當按下<img>時 會觸發參數中的函式

eventType是event的類型(click、focus這些)
data是帶給listener的參數 可以省略
listener是觸發後執行的函式 如果第二個參數data省略的話 這就會變成第二個參數

而對於常用的event jQuery也提供了各自的方法
例如click event 如下

$("img").click(function(){alert('Hi there!');});

按下圖片時會alert
其他可以看官網

另一個跟bind()很像的是one()

用法跟bind()一樣
但是當這個函式被觸發一次之後 就會被自動地移除掉

而要移除的話是用unbind()

如果兩個參數都省略的話 就是移除掉這個element所有的event
有寫eventType的話 是看要移除哪個event
listener則是移除掉bind()所建立的函式

jQuery在event觸發後的函式中
也有可以觀察頁面上的方法
如要檢查有沒有按下ctrl鍵、alt鍵或是任何的數字字母鍵
以及滑鼠目前的座標等等
可是我找不到官網文件哪裡有寫 ._.

$("img").keypress(function(e){alert(e.keyCode);});

判斷按下了哪個鍵(該鍵的keyCode)

event的stopPropagation()
是阻止這個event往父節點的方向越往外觸發event
preventDefault()
則是停止這個event預設的任何動作
(這兩個應該是這樣吧 總覺得好像解釋的不太對= =a js真是博大精深XD)

觸發element的event

$("form:first").trigger("submit");

像是可以submit而不用按按鍵

jQuery同樣的也提供了多個簡便的使用方法
如click()、focus()、blur()
可以像使用trigger()一樣的觸發特定的event

$("input").click();

按下<input>時會觸發click event(可以先用bind()綁定click event)

另外兩個跟操作event有關的method

交互觸發不同的listener
下面是一個簡單的例子 顯示或隱藏一個id=say的element

$('#btn').toggle(
	function(event){
		$("#say").show();
	},
	function(event){
		$("#say").hide();
	}
);

按第一下會顯示 按第二下會隱藏 依序循環

另一個常用的event是當滑鼠移入跟移出element時要觸發的event
移入時是overListener
移出時則是outListener

$('#myimg').hover(reportover,reportout);

有一點要注意的是
element裡面如果有child elements時 是不會造成移出的效果
而是要移出該element才會有

這節是運用前面所學到的知識作一個綜合運用
一個點菜菜單
其中有一個用法可以看一下

$(':checkbox').click(function(){
	$('div',$(this).parents('div:first'))
	.css('display','block');
});

這個element $(‘div’,$(this).parents(‘div:first’)) 指的是
往this的parents(也就是從父層開始往外推出去)找第一個遇到的div
而這個找到的div中的div為返回的elements
(很繞舌XD)

<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image"/>

img是tag name
其他id、src、alt、class、title是attributes
而瀏覽器會將這些轉變成DOM中的element
而且會建立一個NodeList object並指派一組properties給這個element
這個element的attributes跟properties是可以動態變化的
而且通常也會保持一致
不過有時候也會不一樣
像是當給定src的attribute為image.gif
而property則會給完整的路徑 如http://localhost/image.gif

attributes跟properties的名字大部分也是一樣的
少部份如attributes中的class 在properties中則是稱為className

在each()中 會依序操作selectors所取得的elements，會由零開始(zero-based)
在裡面可以使用this這個property來表示這個element並操作

$('img').each(function(n){
  this.alt='This is image['+n+'] with an id of '+this.id;
});

依序修改每個<img>的alt值

而如果只是要取得其中一個的值 可以使用array的index方式取得(因為selectors所取得的elements也可以當作array來使用)

var altValue = $('#myImage')[0].alt;

獲得element的屬性值

<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image" custom="some value"/>

這裡以這個img作為例子 可以看到他的屬性有一項為custom="some value"

$("#myImage").attr("custom")

可以使用attr()來取得屬性的值(這裡會取得"some value")
不過要注意的是 如果使用不是標準的屬性名稱(也就是這裡的custom) 可能會導致網頁無法正確解析或是無法取得該值

設定element的屬性值

$('*').attr('title',function(index) {
  return 'I am element ' + index + ' and my name is ' +
         (this.id ? this.id : 'unset');
});

除了可以在第二個參數直接填入要放的值
也可以填入一個function 再將這個function的返回值填入

attr()也可以一次設定多個屬性值

$('input').attr(
  { value: 'v', title: 'Please enter a value' }
);

裡面放的是一個object
這樣就可以一次設定element的value值跟title值了
這邊要注意的是IE沒辦法改變<input>的name值
所以要在IE中改變的話 要直接建立一個新的<input> 並取代原本的

移除element的屬性
使用的方式跟attr()一樣 不過這邊就是移除這個屬性
要注意的是 這邊移除的是attribute 而property仍然會存在的(但是值可能會變)
例如將readonly attribute移除
那這個element的property可能會由true變為false 但是他仍然會存在

這小節舉了兩個運用attr()的例子

$("a[href^=http://]").attr("target","_blank");

將頁面中所有的連結加上開啟在新頁面的功能

$("form").submit(function() {
  $(":submit",this).attr("disabled", "disabled");
});

對於頁面上所有表單的送出鍵 當他們被按下第一次之後 便變成disabled
(也就是只能按一次送出)

要改變一個element的外觀(style)有兩個方式
增加或拿掉css class
或是直接更改這個element的style

很容易可以瞭解這個method的用法
就是對取得的elements加上一個class
如果一次要加上多個 就以空格區隔開各class

拿掉這個class
如果一次要拿掉多個 就以空格區隔開各class

還有一個有用的method就是可以切換class

如果已經有這個class了 就拿掉這個class
如果尚未有 則是加上這個class
(在一組取得的elements裡 有可能有些element有這個class 有些沒有)

function swap(){
  $('tr').toggleClass('striped');
}

這樣可以對table中單數雙數的tr給予不同的class 來達到明顯各row區隔的效果

只改變一種(或是某幾種)style需要用到css()這個method
例如將所有<div>裡面的字都變成黑色

$('div').css('color','#000000');

第二個參數除了可以擺string、number 也可以擺一個function
例如將所有class=expandable的<div>的寬度都再加20px

$("div.expandable").css("width",function(){
   return $(this).width() + 20 + "px";
});

就如同attr()一樣 css()也可以一次設定多個style

$("p").css({color:"#ff0011","background-color":"blue"});

name如果有 – 的話要加引號(ex: background-color)

如果要取得element的style值則是如下
取得class=title的<div>的寬度

$("div.title").css("width");

這個返回值永遠是string型態
所以如果是要其他如number型態的就還要再轉換

jQuery也提供了兩個方便的method

顧名思義 這就是設定element的寬度跟高度

$("div.title").width(500);
$("div.title").css("width","500px");

這兩行的意義是一樣的

而沒加參數的則是取得寬度及高度

$("div.title").width();
$("div.title").height();

另外還有一個method是可以取得elements是否有這個class
如果有的話會返回true 反之則是false

$("p:first").hasClass("surpriseMe");

其實就等同於ch2提到的is()的一個用法

$("p:first").is(".surpriseMe");

不過就字面上來講 hasClass()可以較清楚的知道這個method的意義

如果要取得elements的所有class 在書中有提供了一個寫法

$.fn.getClassNames = function() {
  if (name = this.attr("className")) {
  	return name.split(" ");
  }
  else {
    return [];
  }
};

新增一個名叫getClassNames的method
他會返回一個包含所有class的array
如果沒有class的話 則是一個空的array

取得或是改變elements中的內容
如果有參數的話就是改變內容
沒有參數的話就是取得內容
這個用法跟innerHTML是一樣的

另一個可以獲得內容的method是text()
同樣的 有參數是改變內容 沒有的話則是取得內容
而這個取得的內容會將tag都去掉
下面是範例

<ul id="theList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

var text = $('#theList').text();
//這會取得將tag都去掉的字串：OneTwoThreeFour

如果是要改變內容
會將新內容中的<跟>轉換成&lt;跟&gt;
這樣就會將內容都顯示出來

將字串、element或是object加到elements的後面(tag裡內容的後面 不是tag的後面)
下面是個簡單的例子 將一段html碼加到每個<p>內容的後面

$('p').append('<b>some text<b>');

而將其他的element加到elements的後面則是下面這樣

$("p.appendToMe").append($("a.appendMe"));

對於append()中的elements的處理有一點要注意的是
如果目標elements( 在這裡是$("p.appendToMe") )只有一個element
則會把append()中取得的elements整個搬過去(也就是move過去)
而如果有多個elements的話 則是每個目標element都複製一個
而且原本的elements還是會留著

還有另一個跟append()相反用法的method
這是將elements加到目標elements的後面
可以對照append()來看

$("a.appendMe").appendTo($("p.appendToMe"));

同樣的 如果目標只有一個 就會move過去
目標有很多個的話 就會各複製一個 並且原本的也會留著

有將內容加到後面 當然也有加到前面的

這個則是加到內容的前面 其餘用法跟append()一樣

這個則是加到內容的前面 其餘用法跟appendTo()一樣

前面4個method說的是在目標tag中的內容
而要放置在tag之外前面或後面也有另外的method可以使用

將內容加到目標elements的tag前面

就跟append()與appendTo()的關係一樣
這是跟before()相反

將內容加到目標elements的tag後面

就跟append()與appendTo()的關係一樣
這是跟after()相反

在elements外再包一層tag(前後都加上tag)

$("a.surprise").wrap("<div class='hello'></div>");

將class=surprise的<a>的外面包一層<div>

<a class="surprise" href="#">here</a>
會變成
<div class='hello'><a class="surprise" href="#">here</a></div>

wrap()是將elements中每個element都包一層
而wrapAll()則是對整個elements包一層

將elements中的內容包一層

將elements從DOM中移除
但是之後還是可以拿來使用(例如利用appendTo(),prependTo()來繼續使用這組elements)

將elements中的內容清除

複製這組elements來使用
參數copyHandlers是個boolean
如果這個參數為true的話 那就會連操作事件也一起複製
如果為false或是省略 則是只有複製elements

當value省略時 是取得form中elements的值
而有值是設定這個element的值

還有另一個用法是
將所有符合的elements選取(也就是設定為checked或selected)

$('input,select').val(['one','two','three']);

搜尋頁面上所有的<input> (即type=checkbox或type=radio)跟<select>
如果他們的值為one、two或是three
則將他們選取

第二章會詳細介紹$()的兩個常用的功能: selectors 跟 創建新的DOM elements

在操作任何動作前 都必須要先會取得自己需要操作的elements
這邊有提供一個可以下載來練習selectors的Selectors Lab網頁
可以在原文版的首頁下載得到
(找到一個名字為Source code的連結下載)

一開始先講解幾個基本的css selectors
這可以咕狗研究一下
而jQuery就是在$()裡使用selectors

//這個就是取得<p>中有class=specialClass的<a>
$("p a.specialClass")

而當需要取得更精細更複雜的selectors 時
就可以用到jQuery內建的功能

首先以child selectors來說
大意就是說 如果要取得特定的elements
ul.mylist > li > a 可以比 ul.mylist li a取得更精確的elements
有包含 > 的是指有上下層關係(也就是parents跟child的關係) li一定在ul下面一層 而a一定在li下面一層
沒有 > 的就是指所有包在裡面的都算在內 不管隔了幾層

而attribute selectors就是
可以對各tag的屬性再做篩選 挑出所需要的elements

//所有<a>中 屬性href的開頭為http://的<a>
a[href^=http://]
//所以這邊使用 ^ 來代表字的開頭的意思 跟正規表達式的一樣

以下是幾個用法

//取得所有 type=text的<input>
input[type=text]

//取得所有 title的開頭為my的<div>
div[title^=my]

//取得所有 href的結尾為.pdf的<a> (這也與正規表達式的 $ 一樣)
a[href$=.pdf]

//取得所有 href的值中有包含jquery.com字串的<a>
a[href*=jquery.com]

而container selector指的是有包含所指定的selector

//取得 含有<a>的<li>
li:has(a)

//但是要注意這個只能夠使用一層 如果是下面這樣
foo:not(bar:has(baz))
//或是
foo:not(bar:has(baz:eq(2)))
//都是無法使用的

然後書中有附一張簡表 說明各用法
也可以在官網的documentation中找得到

jQuery也可以依據elements間的位置關係取得所需要的elements

//取得 第一個<a>
a:first

//取得 所有奇數的<p> (也就是第1,3,5,7 ...個的<p>)
p:odd
//當然也可以取得偶數的
p:even

//取得 <li>中最後一個child element (也就是<li>下一層中 最後一個element)
li:last-child

這邊也有附一個簡表 詳情請看官網的documentation

而這邊有一點要注意的是
使用:nth-child(n)的時候 這個n是從1開始算起 (1-based)
而其他的如 :eq(n) 或是 :gt(n) 這些是從0開始算起 (0-based)
所以使用:nth-child(2)會等於使用:eq(1)

這小節主要是介紹除了css中可以使用的selectors之外
jQuery自己內建的filter selectors
(filter就是過濾器、過濾、篩選的意思)
這邊也有附一個簡表 詳情請看官網的documentation

這些filter selectors大部分都是跟form有關的
下面舉幾個例子

//取得正在作特效(animations and effects)的elements
:animated

//取得checkbox (這裡就等於input[type=checkbox])
:checkbox

//取得內容有child elements(只有文字也算)的elements (也就是還有下一層)
:parent

//這些selectors也可以連著用
:checkbox:checked:enabled

如果想要選擇與selectors的規則相反的filter
可以使用:not

//取得不是checkbox的input
input:not(:checkbox)

:not這個filter selector中 只能放filter

//例如下面這樣是不行的
div :not(p:hidden)

//而這樣是ok的
div p:not(:hidden)

建立新的html elements
這裡還有提到一個簡略的方法
如果是要建立一個空的element

//這個的用法
$("<div>")
//會與下面這兩個一樣
$("<div></div>")
$("<div/>")

操作取得的elements
這邊提供了另一個Selectors Lab可以練習
可以在原文版的首頁下載得到
(找到一個名字為Source code的連結下載)

取得selector所會操作的elements個數 使用size()

$('a').size()

例如取得頁面上有幾個連結(也就是<a>)

因為jQuery可以把一個取得的elements當作一個array來使用
所以如果要取得特定的element 可以依照他的index獲得
例如要取得第一個element

//可以使用
$('img[alt]')[0]
//而如果要用method來取得的話 可以使用get()
$('img[alt]').get(0)

如果沒有填入index值的話 則會返回一個含有所有的elements的array

而要取得某一個element在 一個selector中取得的elements 裡的index
(也就是排序的位置 第一個就是0 第二個就是1)
可以使用index()

//取得 bid=findMe的<img> 在所有<img>中的index
var n = $('img').index($('img#findMe')[0]);

如果要取得index的element不在這些elements裡 則會返回-1

在已經取得的elements之外 再取得另外的elements一起作操作

//對含有alt屬性的<img>操作
$('img[alt]')
//除了含有alt的<img>之外 再加上含有title的<img> 再一起對這些符合條件的elements操作
$('img[alt]').add('img[title]')
//當然在這個例子中 如果使用下面這樣也是可以
$('img[alt],img[title]')
//但是如果要先對含有alt的<img>操作 再對這兩種elements操作
//就必須要用到add()了
//
//在add()裡也可以加入新建立的html elements(像是2.2講的那樣)
$('p').add('<div>Hi there!</div>')

可以加入特定的elements 同樣的也是可以減少
這邊使用的not() 有點類似前面講的:not
而這個not()的使用的方法就跟add()一樣

//取得有title屬性 但是title值不包含puppy這個字串的<img>
$('img[title]').not('[title*=puppy]')

除了add()跟not()之外
如果需要更多條件來挑出需要的elements
可以使用filter()

//取得所有innerHTML為數字的<td>
$('td').filter(function(){return this.innerHTML.match(/^d+$/)})

filter()跟not()的用法有點類似
但是條件剛好是相反的

//這裡是指篩選出title值含有dog字串的
$('img').addClass('seeThrough').filter('[title*=dog]').addClass('thickBorder')
//但如果是not() 就是把title值含有dog字串的拿掉
$('img').addClass('seeThrough').not('[title*=dog]').addClass('thickBorder')

add()、not()、filter()三種method可以很靈活的增減所需要的elements

取得elements中特定的index的element(例如index為2~5的elements)
slice()有兩個參數 型態都是數字 皆由0開始算(zero-based)
第1個參數begin 為開始取得的index值 如果為負數就是由尾巴開始取值
第2個參數end 就是要取到第幾個為止 如果省略的話就是取到最後(這個參數所指的該index不會被取得 只會到前一個)

//取得頁面上前4個elements
$('*').slice(0,4);
//取得頁面上除了前4個elements之外的elements 也就是從第5個element開始取得 到最後1個
$('*').slice(4);

這邊有一個簡表列出其他可以篩選出elements的methods
詳情請看官網的documentation
這些methods返回的都是新的一組elements 不會影響到原本的elements
下面舉幾個例子

//取得該elements所有的child elements
children()
//取得該elements的下一個同一層的element
next()
//取得該elements之後所有同一層的elements
nextAll()
//取得該elements的所有同一層不重複的elements
siblings()

這些methods除了contents()之外 其他的都可以再在裡面用字串來篩選出elements

對一組已經篩選出的elements作另一個selectors的篩選

//取得在<p>中的<span>
$("p").find("span")

雖然上面這個例子跟$(‘p span’)的用法一樣
但是如果需要在chains中使用 就必須用到find()

//取得在<p>中有包含'Lorem ipsum'這個字串的elements
$('p').contains('Lorem ipsum')

對一組已經篩選出的elements作字串的篩選

對一組已經篩選出的elements作另一個selectors的查找 是否有包含此selectors

//檢查頁面上是否有至少一個<img>
var hasImage = $('*').is('img');

返回值是個boolean
如果有找到就是返回true 反之則是false

這小節會說明2個在chain中變換可以操作的elements的method

在一個chain中如果先變換了操作的elements
但是在後面又要操作原本的elements
就要使用到end()
(clone()在ch3會講 這是一個複製elements的method)

$('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

先對所有的<img>作複製
再把這些複製的elements加到id=somewhere的element中
而因為要再對原本的elements(所有<img>)加上class=beenCloned
所以加上end()後再加上addClass(‘beenCloned’)
如果沒有end() 而直接加addClass(‘beenCloned’)
那就是會加到複製的elements上 而不是原本的elements

在一個chain中如果先變換了操作的elements
但是在後面又要對原本的elements一起操作
就要使用到andSelf()

$("div").find("p").andSelf().addClass("border");

如果沒有加上andSelf() 就是只有<div>中的<p>會加上class=border
如果加上了 就是 <div> 跟 <div>中的<p> 都會加上class=border

$("table tr:nth-child(even)").addClass("striped");

使用一行js碼(對table裡的偶數行加上不同的class來讓表格較清楚)的例子，來介紹jQuery的簡潔及強大

(unobtrusive應該是無侵入的、不唐突的、低調的 的意思)

<button
type="button"
onclick="document.getElementById('xyz').style.color='red';">
Click Me
</button>
<!--
將以上html中的行為(behavior)抽出成如下
-->
<button type="button" id="testButton">Click Me</button>

而將這些行為(也就是script，在這裡也就是onclick這個trigger)移到裡面

window.onload = function() {
document.getElementById('testButton').onclick = makeItRed;
};
function makeItRed() {
document.getElementById('xyz').style.color = 'red';
};

將這段script放在onload handler中並指派onclick給makeItRed()這個函式
而擺在onload handler裡是為了確保在觸發onclick之前 這個button已經存在了(也就是DOM都已經讀取完畢)

如果已經熟悉css的人 那對於jQuery使用的selectors(選擇器)就可以很容易上手的

jQuery除了一般在css中使用的selectors外，還有其他更有用更強大的selectors可以使用(下面會介紹)

$(selector)
jQuery(selector)

jQuery中使用selector的用法有以上這兩個
然後舉了幾個例子

$("div.notLongForThisWorld").fadeOut();
//這樣會對於class=notLongForThisWorld的div作fadeOut(這是一種效果，後面會介紹)
//就跟css中的用法幾乎一模一樣
$("div.notLongForThisWorld").fadeOut().addClass("removed");
//也可以這樣連續著用 也就是fadeOut完後再加上一個removed的className
//這也就是chains(連鎖)的用法

而這個用法好處在於我們不需要再用迴圈去跑 對每一個class=notLongForThisWorld的div操作

而jQuery也可以將一個使用highly sophisticated JavaScript object(我想可能是指ID這類的element)的selector的寫法寫成一個取得成array的elements(就算selector只match得到一個element)

//第一種用法
$("#someElement").html("I have added some text to an element");
//第二種用法
$("#someElement")[0].innerHTML = "I have added some text to an element";
//這兩種用法的效果是一樣的 不過通常都是用第一種即可

而當要對某些elements操作的時候 也是有下面兩種方法

//第一種方法
$("div.fillMeIn").html("I have added some text to a group of nodes";
//第二種方法
var elements = $("div.fillMeIn");
for(i=0;i<elements.length;i++)
elements[i].innerHTML="I have added some text to a group of nodes";
//不過通常都是用第一種即可

再來就是舉了幾個操作elements時會用到的selectors 除了在css中會使用到的之外 也有其他jQuery中才有的selectors

//取得所有偶數位的<p>
$("p:even");

//取得每一個<table>中第一個<tr>
$("tr:nth-child(1)");

//取得所有為<body>的節點的<div>
$("body > div");

//取得所有href為pdf檔的<a>
$("a[href$=pdf]");

//取得所有為<body>的節點並且含有<a>的<div>
$("body > div:has(a)")

還有很多有用的selectors 可以看這裡~

jQuery除了selectors外 另外還有可以使用namespace prefix的用途
(有點類似$()的method的使用方法)

//一個去掉字串前後空白的namespace即命名成下面這樣
$.trim(someString);

第六章還會詳細說明 因為在第六章之前有些地方會用到 所以這裡先稍微講一下

要對elements操作 必須在DOM裡面的elements都load完才行
所以必須要有個onload的方法
傳統上是使用window.onload

// 1.1中的例子
window.onload = function() {
$("table tr:nth-child(even)").addClass("even");
}

而這個方法的缺點就是除了DOM讀取完之外
他還會等所有的圖或是其他的東西load完 才會執行javascript
較好的作法是只要DOM讀取完了就執行
而jQuery就提供了一個簡單的方法 來解決這個問題

$(document).ready(function() {
$("table tr:nth-child(even)").addClass("even");
});
//也可以簡寫成這樣
$(function() {
$("table tr:nth-child(even)").addClass("even");
});

而這個方法可以在同一個html document中寫很多次
都會等到DOM讀取完才執行 商當之方便~

jQuery可以直接建立一個DOM的element
然後對這個element作操作

$(function(){
$("<p>Hi there!</p>").insertAfter("#followMe");
});

這個例子就是建立一個<p>Hi there!</p>這樣的element
然後插入在id=followMe的標籤之後 (insertAfter是jQuery的一個manipulation function)

jQuery還有一個強大的功能
就是可以以一個很簡單的方式建立自己所需要的method

//disable原本不是jQuery內建的method
$("form#myForm input.special").disable();
//而以下面的方式就可以建立自己所需要功能的method
$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = true;
});
}
//而且以這個方式創建好的method也可以同樣的使用在jQuery的chain中 如下
$("form#myForm input.special").disable().addClass("moreSpecial");

而jQuery裡為數眾多的plugins也大多是使用這個方式建立的

要和其他javascript lib(如prototype.js)在同一個頁面共用 又要避免衝突的話
jQuery提供一個方法來解決

$jq = jQuery.noConflict();
//加上這一行 就可以以$jq()來當作$()操作
//也同時可以避免與其他lib衝突到(prototype.js也是使用$()這個)
//$jq不是固定的 可以自己改變喔

不過我覺得沒特別真的需要
一個頁面還是使用一種lib就好啦 XD
總覺得load會太重

]]> http://blog.hsin.tw/2009/jquery-in-action-ch1-introuducing-jquery/feed/ 2