指南（1）用jquery開始吧
這個(gè)指南是對jquery庫的一個(gè)總的介紹，當(dāng)然你也被要求具備javascript和DOM（文檔對象模型）的相關(guān)知識。該指南試圖解釋一些必須的細(xì)節(jié)。它涵蓋了一個(gè)簡單的”hello world”實(shí)例，選擇器和事件基礎(chǔ)，AJAX，F(xiàn)X以及官方插件。
這個(gè)指南并沒有”click me”，而是依靠”copy me”（復(fù)制/粘貼代碼）來測試?yán)樱截愐粋€(gè)例子，看它是怎么做的，然后根據(jù)你自己的想法修改它。
目錄：
1． 安裝
2． Hello jQuery (look like hello world)
3． 用選擇器(selector)和事件(events)
4． 用ajax
5． 用FX(各種效果)
6． 用tablesorter 插件
7． 書寫你自己的插件
8． 下一步（展望）
[size=10pt]
1.安裝
開始之前，我們需要一個(gè)jquery庫的拷貝(js文件)。最新的版本你能在
這里下載。這個(gè)指南也提供了一個(gè)基本的“開始工具包”，你可以在下面地址下載到。
Jquery starterkit
下載該文件并且解壓縮。用你喜歡的編輯器（比如：記事本）打開starterkit.htm和custom.js，并在瀏覽器（IE，firefox, netscape）打開starterkit.htm
現(xiàn)在我們可以開始類似于“hello world”的例子了。
[size=10pt]
2.Hello ,jQuery
作為我們要做的每一件事情，需要確定只要用到了dom,那么你就應(yīng)該為當(dāng)前文檔注冊一個(gè)ready 事件
(關(guān)于ready和onload的區(qū)別，大家可以參考＜小蛀翻譯的"
[size=9pt]jQuery[size=9pt]簡單指南"部分＞，在這里就不解釋了)
$(document).ready(function() {
// do stuff when DOM is ready
});
在函數(shù)塊里邊放一個(gè)alert并沒多少意義，因?yàn)橐粋€(gè)alert并不需要DOM被加載。所以你可以做一些更復(fù)雜的事情來用到dom，比如下面當(dāng)你click一個(gè)
的時(shí)候顯示一個(gè)alert
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
所以只要你點(diǎn)標(biāo)簽，alert就會(huì)顯示出來。
讓我們看一看都做了些什么吧。$(“a”)是一個(gè)jquery的選擇器（selector）,它能選擇所有的元素（dom對象）。$是一個(gè)jquery里對于類的別名，因此$()構(gòu)造了一個(gè)新的jquery對象。Click()函數(shù)是對象里的有個(gè)方法。它綁定了對所有元素的click事件并且當(dāng)事件發(fā)生時(shí)執(zhí)行提供的函數(shù)。
類似于下面的代碼：
Link
這個(gè)區(qū)別是顯而易見的：我們不需要為單一的對象寫click事件了。我們把html(結(jié)構(gòu))和js（行為）分開了就象用CSS分開一樣。
現(xiàn)在，我們已經(jīng)對選擇器和事件有了一定的認(rèn)識了。
[size=10pt]
3.選擇器(selector)和事件(events)
Jquery提供了2個(gè)方法來選擇DOM元素。第一個(gè)方法是用CSS和XPATH（比如：$(“div > ul a”)）。第二種方法是用jQuery對象的各種方法。當(dāng)然兩種方法也可以結(jié)合。
我們在starterkit里選擇和修改第一個(gè)order list來測試這些選擇器。
開始之前，我們需要選擇列表本身。這個(gè)列表有一個(gè)ID=” orderedlist”，在經(jīng)典javascript里，你必須這樣用：document.getElementById("orderedlist"),但是在jQuery里，我們只需要做這些：
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
這個(gè)starterkit提供了一個(gè)如何加CSS樣式 class.red。因此，當(dāng)你刷新starterkit.htm的時(shí)候，你會(huì)發(fā)現(xiàn)第一個(gè)list背景變成紅色，而第二個(gè)list沒有被改變。
現(xiàn)在讓我們加更多的classes到list的子元素：
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
上面的例子選擇了id為orderedlist的所有子標(biāo)簽li,并且在他們上面加了一個(gè)class.blue的樣式。
現(xiàn)在來點(diǎn)更復(fù)雜的。當(dāng)鼠標(biāo)移到li元素的時(shí)候，增加和刪除一個(gè)Class樣式：
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
你在這里可以找到很多CSS和XPATH的語法。
更多的例子和表達(dá)式你也可以在這里找到。
對于每個(gè)onxxx事件，象onclick,onchange,onsubmit等，都有一個(gè)和jquery同意義的對應(yīng)的事件，而其他事件，象ready,hover等，都是為某個(gè)方法提供。
你能在visual jquery里發(fā)現(xiàn)一個(gè)完整的事件列表。
還有種寫法是jquery特有的（chain），就是把一個(gè)選擇器的所有的事件并排列出來，中間用”.”隔開：
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
一個(gè)你經(jīng)常面對的任務(wù)是在事件里邊執(zhí)行函數(shù)。比如這樣
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});
這個(gè)代碼只是ID為form的表單執(zhí)行reset()方法。但是萬一你有很多個(gè)表單需要執(zhí)行呢？那么你可以這樣寫：
$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
另外一個(gè)你必須面對的問題是選擇某個(gè)或某幾個(gè)元素。Jquery提供了filter()和not()方法。當(dāng)filter()是過濾一些適合filter()表達(dá)式元素，而not()是刪除和not()表達(dá)式相反的元素。當(dāng)你想選擇所有的li元素，并且不包含ul子元素呢？你可以這樣寫：
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});
結(jié)果是除了包含ul子元素的li，其他所有的li都得到了一個(gè)border.可能你也想選擇有name屬性的anchor(
)：
$(document).ready(function() {
$("a[@name]").background("#eee");
});
要匹配屬性的值（value），我們可以用”*=”來代替”=”
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});
直到現(xiàn)在，我們已經(jīng)學(xué)到了很多選擇器的使用。這里還有種情況你需要選擇前一個(gè)或后一個(gè)元素。想一想starterkit.htm里的FAQ，當(dāng)你click問題的時(shí)候，它是怎么實(shí)現(xiàn)隱藏和顯示的呢？代碼是這樣的：
$(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();
}
});
});
因?yàn)樯厦嬷挥形ㄒ灰粋€(gè)選擇器（#faq）,我們用chain來減少代碼的長度和提高代碼的易讀性和表現(xiàn)性.這里要說明一下，如果按原文翻譯過來我想很多人都看不懂，感覺他自己也沒怎么說明白。我說說我自己的理解：
‘dd’和‘dt’都是#faq的子元素，find()的作用就是找到它的子元素。End()應(yīng)該和next()搭配的，end()實(shí)質(zhì)上是把 ‘dd’過濾了，也就是next()的時(shí)候?qū)嵸|(zhì)上是參考的’dt’。這樣每個(gè)’dt’的next就是‘dd’，挺容易實(shí)現(xiàn)的。要是還不明白你可以邊參考邊照著做一遍。
除了同屬元素外，我們也可以選擇父元素：
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});
很容易看懂，p就是a的父元素。
讓我們回顧一下前面所學(xué)的，jquery有很多地方能使代碼更簡潔因此容易讀和保持。下面的就是對$(document).ready(callback)符號的一個(gè)簡單描述
$(function() {
// code to execute when the DOM is ready
});
好吧，讓我們來寫個(gè)hello , world ,來結(jié)束第一天的課程，相信你一定會(huì)寫了吧
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
現(xiàn)在，基礎(chǔ)已經(jīng)掌握了，下次我們將探索一下Jquery的其他方面(ajax)
[size=10pt]4.Rateing:使用AJAX
在這部分我們寫了一個(gè)簡單的ajax應(yīng)用，它的目的是允許用戶rate（評估）一些事情，就象youtube.com一樣．
我們需要寫一些代碼．例子中用到了一個(gè)php文件來讀取＂rating＂的參數(shù)和返回rating個(gè)數(shù)（count）和平均rating(array_sum/count)．你可以看一看starterkit里邊的rate.php代碼．
我們需要這個(gè)例子工作在ajax上，因此我們用jquery寫一個(gè)必要的標(biāo)簽并且把它追加到一個(gè)ＩＤ名為”rating”的div容器里邊．代碼如下：
$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = " ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
});
上面的代碼片斷產(chǎn)生了５個(gè)元素并且把它們追加到了id為”rating”的div容器里．第一次加載頁面后，所有的元素都包含在div容器里，然后再加上個(gè)click事件。當(dāng)被click的時(shí)候，一個(gè)post請求被發(fā)送到rate.php文件里，并且通過rating: $(this).html()傳遞參數(shù)，經(jīng)過處理ＰＨＰ文件處理后把結(jié)果作為xml寫進(jìn)div容器
如果你電腦上沒裝php的運(yùn)行環(huán)境。你可以在這里看到這個(gè)例子的效果。
對與一個(gè)不用javascript也能工作的rating例子，你可以訪問
softonic.de
你也能在
這里或者在
visual jquery里邊發(fā)現(xiàn)更多的關(guān)于ajax的幫助文檔。
當(dāng)靠ＡＪＡＸ加載內(nèi)容的時(shí)候，一個(gè)非常普遍的問題是：當(dāng)加載事件句柄到你文檔的時(shí)候也需要將該事件應(yīng)用與你加載的內(nèi)容里，所以你不得不在內(nèi)容加載之后提供這些事件句柄。為了防止代碼重復(fù)，你應(yīng)該委派一個(gè)函數(shù)。例如：
// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});
上面當(dāng)ＤＯＭ準(zhǔn)備好后addClickHandlers只應(yīng)用了一次，并且每次用戶點(diǎn)一個(gè)樣式為class. clickMeToLoadContent的時(shí)候內(nèi)容已經(jīng)完成加載了。
請主義函數(shù)addClickHandlers被定義成了一個(gè)局部變量，而非全局函數(shù)（function addClickHandlers() {...}).。請堅(jiān)持這種寫法，因?yàn)樗梢员苊馊肿兞慷x過多引起的沖突。
另外一個(gè)非常普遍的ＡＪＡＸ回調(diào)問題是參數(shù)。假設(shè)你需要傳遞一個(gè)額外的參數(shù)，那么把回調(diào)封裝到一個(gè)函數(shù)里能夠?qū)崿F(xiàn)，如下：
// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );
// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); });
[size=10pt]
５.各種動(dòng)態(tài)效果的實(shí)現(xiàn)：用FX
Jquery能實(shí)現(xiàn)簡單的動(dòng)態(tài)效果，比如顯示（show）和隱藏(hide)
// $(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});
發(fā)揮你的想像，你能用aninate()創(chuàng)建任意的組合：
// $(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});
在
interface 插件收集里，你能發(fā)現(xiàn)很多奇特的效果。這個(gè)站點(diǎn)也提供一些演示。
[size=10pt]
6.分類：用表格分類插件
該插件是運(yùn)行在客戶端的，所以你只要在你文件里包含jquery和插件的文件并且寫出你想如何分類。試試下面的例子。在starterkit.htm里添加下面一行代碼：
把插件包含進(jìn)去后，你還需要在custom.js里寫
$(document).ready(function() {
$("#large").tableSorter();
});
點(diǎn)擊表格的頭部看看它是怎么工作的。
這個(gè)表格也能夠用高亮隔行顯示來實(shí)現(xiàn)斑馬線效果。代碼如下：
$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});
這里有更多的例子和演示在
tablesorter homepage
當(dāng)你用jquery久了之后會(huì)發(fā)現(xiàn)把你的代碼（功能模塊）作為插件封裝在一個(gè)包是多么有用，不僅你自己或你的公司能重用這些代碼（功能模塊），也能在一些社區(qū)里共享。下面我們將來看看如何構(gòu)造一個(gè)插件！
[size=10pt]
7.插件：寫你自己的jquery插件
其實(shí)為jquery寫插件是很簡單的。如果你按照下面的規(guī)則，整合你的插件將非常容易。
１．給你的插件命名。讓我們叫它”foobar”
２．創(chuàng)建一個(gè)文件名為：jquery.[你的插件名].js 比如：jquery.foobar.js
３．?dāng)U展jquery的內(nèi)部對象，創(chuàng)建一個(gè)或多個(gè)插件的方法，比如：
jQuery.fn.foobar = function() {
// do something
});
４．用幫助函數(shù)創(chuàng)建一個(gè)對象（可選）
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};
然后你能在你的插件里邊調(diào)用這些幫助函數(shù)
jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};
５．創(chuàng)建一個(gè)用戶能修改的默認(rèn)的設(shè)置（可選）
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};
然后你能用下面的默認(rèn)調(diào)用該插件（有選項(xiàng)）
$("...").foobar({
value: 123,
bar: 9
});
如果你要發(fā)布你的插件，你應(yīng)該提供一些例子和演示。
現(xiàn)在你有一個(gè)基本的認(rèn)識了吧，讓我們運(yùn)用自己的知識和創(chuàng)造力來寫我們自己的插件
有很多朋友操作表單這樣來結(jié)束代碼：
$("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});
請注意，無論什么時(shí)候，當(dāng)你的代碼出現(xiàn)each時(shí)，你應(yīng)該重寫上面的代碼來構(gòu)造一個(gè)插件如下：
$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
于是插件可以這樣用：
$("input[@type='checkbox']").check();
現(xiàn)在你也能寫一些插件為uncheck()和togglecheck()．但是我們可以擴(kuò)展插件來接收一些選項(xiàng)．
$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
然后用戶能夠這么使用：
$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');
[size=10pt]
8.下一步（展望）
如果你計(jì)劃學(xué)習(xí)更多的javascript，你應(yīng)該考慮用firefox的
firebug插件來調(diào)試你的代碼．它為javascript的調(diào)試提供了一個(gè)控制臺，一個(gè)調(diào)試器和其他有用的東西．
柳德才
13691193654
18942949207
QQ：422157370
liudecai_zan@126.com湖北-武漢-江夏-廟山