對jQuery庫的說明 jQuery的工作方式
Ø 一個簡單的Hello World的例子
Ø 選擇器
Ø 事件基礎
Ø AJAX的用法
Ø FX的用法
安裝: http://docs.jquery.com/Downloading_jQuery 這個指南提供一個包含基本實例的包供下載.
Hello jQuery:
在做所有事情之前,我們要讓jQuery讀取和處理文檔的DOM,
必須儘可能快地在DOM載入後開始執行事件,所以,我們用一個ready
事件作爲處理HTML文檔的開始.
$號是 jQuery “類”(jQuery "class")的一個別稱
因此$()構造了一個新的jQuery 對象(jQuery object)。
如：$("a") 是一個jQuery選擇器(selector),它選擇所有的a標籤
函數 click() 、alert（）是jQuery對象的方法。
選擇器與事件:
jQuery Base（jQuery基本-----核心）
jQuery Expressions（jQuery<基本>表達式----DOM/Traversing/Selectors----DOM/遍歷/選擇器）
jQuery Basic Events（jQuery基本事件）
Find me:使用選擇器和事件
jQuery提供兩種方式來選擇html的elements:
第一種是用CSS和Xpath選擇器聯合起來形成一個字符串來傳送到jQuery的構造器（如：$("div > ul a")）；
第二種是用jQuery對象的幾個methods(方法)。這兩種方式還可以聯合起來混合使用。
測試選擇器:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
子節點: > 所有orderedlist中的li
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
orderedlist中的最後的li
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});
每一個onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等價表示方法（譯者Keel注：jQuery不喜歡onXXX，所以都改成了XXX，去掉了on）。其他的一些事件，如ready和hover,也提供了相應的方法。
用這些選擇器和事件你已經可以做很多的事情了，但這裏有一個更強的好東東！
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
find() 讓你在已經選擇的element中作條件查找,因此 $("#orderedlist).find("li") 就像$("#orderedlist li")一樣。
each()方法迭代了所有的li，並可以在此基礎上作更多的處理。
大部分的方法,如addClass(), 都可以用它們自己的 each() 。
在這個例子中, html()用來獲取每個li的html文本, 追加一些文字，並將之設置爲li的html文本。（譯者Keel注：從這個例子可以看到.html()方法是獲取對象的html代碼，而.html('xxx')是設置'xxx'爲對象的html代碼）
另一個經常碰到的任務是在沒有被jQuery覆蓋的DOM元素上call一些方法，想像一個在你用AJAX方式成功提交後的reset：
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
這個代碼選擇了所有ID爲"form"的元素，並在其第一個上call了一個reset()。如果你有一個以上的form，你可以這樣做：
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
其中是this,不是$(this),爲什麼? function寫成funtion讓我檢查半天？
還有一個你可能要面對的問題是不希望某些特定的元素被選擇。jQuery 提供了filter()和not() 方法來解決這個問題。 filter()以過濾表達式來減少不符合的被選擇項, not()則用來取消所有符合過濾表達式的被選擇項. 考慮一個無序的list，你想要選擇所有的沒有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
這個代碼選擇了所有的li元素，然後去除了沒有ul子元素的li元素。刷新瀏覽器後，所有的li元素都有了一個邊框，只有有ul子元素的那個li元素例外。
上面代碼中的[expression] 語法是從XPath而來，可以在子元素和屬性(elements and attributes)上用作過濾器，比如你可能想選擇所有的帶有name屬性的鏈接:
$(document).ready(function() {
$("a[@name]").background("#eee");
});
$(document).ready(function(){
$(a[@name]).css("background", "red");
});
更常見的情況是以name來選擇鏈接，你可能需要選擇一個有特點href屬性的鏈接，這在不同的瀏覽器下對href的理解可能會不一致，所以我們的部分匹配("*=")的方式來代替完全匹配("=")：
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
到現在爲止，選擇器都用來選擇子元素或者是過濾元素。另外還有一種情況是選擇上一個或者下一個元素，比如一個FAQ的頁面，答案首先會隱藏，當問題點擊時，答案顯示出來，jQuery代碼如下：
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
寫成 answer.is(‘visible:’)了！！也寫成answer.is(‘visble’)了！
這裏我們用了一些鏈式表達法來減少代碼量，而且看上去更直觀更容易理解。像'#faq'只選擇了一次，利用end()方法，第一次find()方法會結束(undone)，所以我們可以接着在後面繼續find('dt')，而不需要再寫$('#faq').find('dt')。
在點擊事件中的，我們用 $(this).next() 來找到dt下面緊接的一個dd元素，這讓我們可以快速地選擇在被點擊問題下面的答案。
（譯者Keel注：這個例子真是太酷了，FAQ中的答案可以收縮！從利用next()的思路到實現這些效果都有很多地方需要我們消化，注意 if (answer.is(':visible'))用法，注意answer.slideUp();不懂的地方趕緊查我在最開始提到的兩個必看API文檔）
除了選擇同級別的元素外，你也可以選擇父級的元素。可能你想在用戶鼠標移到文章某段的某個鏈接時，它的父級元素--也就是文章的這一段突出顯示，試試這個：
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
$(document).ready(function(){
$(a).hover(function(){
$(this).parent('p').addClass('highlight');},
function(){
$(this).parent('p').removeClass('hightlight');
});
});
（譯者Keel注：highlight是core.css中定義的樣式，你也可以改變它，注意這裏有第二個function()這是hover方法的特點，請在API文檔中查閱hover，上面也有例子說明）
$(document).ready(callback)的縮寫法：
$(function() {
// code to execute when the DOM is ready
});