精心為jQuery初學者整理的106個實例代碼集

精心為jQuery初學者整理的106個實例代碼集，包括了各種功能的使用，非常適合初學者.

jQ學習第一季：

0,jQ的關鍵程序：
程序代碼
window.onload = function(){ ... } .
訪問HTML文檔的元素，必須先載入文檔對象模型(DOM)。當window.onload函數(shù)執(zhí)行的時候，說明所有東西已經(jīng)載入，包括圖像和橫幅等等。要知道較大的圖片下載速度會比較慢，因此用戶必須等待大圖片下載完畢才能看到window.onload()執(zhí)行的代碼效果，這樣就花費了很長的等待時間，這不是我們想要的。

對于此，jquery提供了一個"ready"事件,你可以使用以下的代碼片段：
demo0:
程序代碼
$(document).ready(function(){
// 你的代碼
});
$(document)意思是說，獲取整個網(wǎng)頁文檔對象（類似的于window.document），$(document).ready意思就是說，獲取文檔對象就緒的時候。
上面這段代碼的意思是檢查文檔對象直到它能夠允許被操作（譯者注：這樣做比window.onload()函數(shù)要快的多，因為只要文檔對象載入完成就能夠執(zhí)行代碼了，而不需要等待頁面中的圖片下載是否已經(jīng)完成）---這是我們想要的。

好了 ，其他的也不多說了，我們開始來用jQ寫幾個簡單的例子。

1，demo1:
鼠標點擊時的觸發(fā)
首先，我們嘗試鼠標點擊超鏈接時觸發(fā)某些行為。在ready函數(shù)里加入以下代碼：
程序代碼
$("p").click(function(){
alert("hello world");
});

2,demo2:
增加 CSS Class
另外一個事情就是，一個共同的任務：增加或移除元素的css class，例如:
程序代碼
$("a").addClass("test");
$("a").removeClass("test");
那么當你調用了addClass函數(shù)后，所有超鏈接的字體將變成粗體。

3,demo3:
show( )和html()的使用
$("a").addClass("test").show().html("foo");
程序解釋：
首先增加樣式，
然后
show( ):顯示隱藏的匹配元素。
html("foo"):設置每一個匹配元素的html內容

4，demo4:
特效hide（）
$("a").click(function(){
$(this).hide("slow");
return false;
});
程序解釋：
點擊超鏈接，超鏈接就會慢慢的消失。
“return false"表示保留默認行為，因此頁面不會跳轉。

5，demo5:
demo5-收縮展開功能
$("#head").click(function()
{$("#content").slideToggle("slow",function(){ alert("Hello,cssrain..");});
});
程序解釋：
1,首先把JQ導入.
2,然后開始寫函數(shù)了。$(document).ready(function(){});
3,前面說過了，獲取標簽能直接 $("標簽")。給標簽注冊 onclick事件直接可以 click.
4,核心代碼:
$("head").click(function(){$("content").slideToggle("slow");});
5,slideToggle(speed, callback)
通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個回調函數(shù)。
這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏或顯示。

6,demo6:
appendTo的用法
{$("#head2").click(function()
{$("<input type='text' name='ddd' id='ddd' value='hello,cssrain..' ><br>").appendTo("#ccc");});}
<input type="button" name="head2" id="head2" value="appendTo" >
<div name="ccc" id="ccc" >看這里的變化</div>
程序解釋：
appendTo():
把所有匹配的元素追加到另一個、指定的元素元素集合中

7, demo7:
表格隔行變色, 鼠標滑過變色，點擊變色.
代碼解釋：
例子中我已經(jīng)把 解釋放上去了，這里就不再貼注釋了。
例子中用了：mouseover（），addClass（），mouseout（），removeClass（），click（），
toggleClass（），tr:even 等方法。
另外解釋了toggle()和toggleClass（）的區(qū)別。
另外這個例子 我用了 鏈式操作 .可以查看 鏈式操作.txt 里面有解釋。

8，demo8:
toggle( )的用法：
$("p").toggle()
切換元素的可見狀態(tài)。
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

9，demo9:
hover()的用法：
Hover(function over ,function out )
一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法.
Table里也可以用。

10,demo10:
忘記說了
其實$(document).ready(function(){
// 你的代碼
});
中的$ 也可以用 jQuery代替
jQuery(document).ready(function(){
jQuery(".").click(function(){jQuery(this).toggleClass("")})
});
代替有什么好處呢？ 有可能你會用其他的js庫，象prototype也是$, 有可能會沖突。
所以用jQuery代替$是比較安全的寫法。
還有就是：
$(document).ready(function(){
//
}); 的縮寫法：
$(
function() {
//
}
);

11，demo11:
each—find的用法
$("#orderedlist").find("li").each(function(i) {})
each( Function 函數(shù) fn要執(zhí)行的函數(shù) )以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)

12,demo12:
parents()的用法：
$(this).parents("p").addClass("highlight");
parents( String expr )
取得一個包含著所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。

13,demo13:
load()的用法：
$("#feeds").load("FAQ1.html",function() { alert("load is done");}
<div id="feeds"></div>
從遠程的一個文件中載入HTML并且將它注入到DOM中

14，demo14:
next的用法:
$("p").next().html()
取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。
這個函數(shù)只返回后面那個緊鄰的同輩元素，而不是后面所有的同輩元素。
可以用一個可選的表達式進行篩選。
15,demo15:

demo1-鼠標點擊時的觸發(fā).html
demo2-1-增加 CSS Class.html<br /demo3-show( )和html().html
demo4-特效(hide).html
demo5-收縮展開功能.html
demo6-appendTo的用法.html
demo8-1-toggle( )的用法.html
demo9-1-hover()的用法.html
demo10-可以用jQuery代替$.怕沖突.html
demo11-each--find.html
demo12-1-parents()的用法.html
demo12-2-parents()的用法.html
demo13-load()的用法.html
demo14-next的用法.html

jQ學習第二季
介紹略

jQ學習第三季
介紹略