Ch.1 Introuducing jQuery

1.1 Why jQuery?
$("table tr:nth-child(even)").addClass("striped");

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

1.2 Unobtrusive JavaScript

(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都已經讀取完畢)

1.3 jQuery fundamentals

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

1.3.1 The jQuery wrapper

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 可以看這裡~

1.3.2 Utility functions

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

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

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

1.3.3 The document ready handler

要對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讀取完才執行 商當之方便~

1.3.4 Making DOM elements

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

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

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

1.3.5Extending jQuery

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也大多是使用這個方式建立的

1.3.6Using jQuery with other libraries

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

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

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