精心為jQuery初學(xué)者整理的106個(gè)實(shí)例代碼集
- 軟件類(lèi)型：
- 國(guó)產(chǎn)軟件
- 軟件語(yǔ)言：
- 簡(jiǎn)體中文
- 軟件大�。�
- 1 MB
- 軟件授權(quán)：
- 免費(fèi)軟件
- 軟件評(píng)級(jí)：
- 4
- 更新時(shí)間：
- 2017-10-30
- 應(yīng)用平臺(tái)：
- WinXP, Win7, WinAll
這是精心為jQuery初學(xué)者整理的106個(gè)實(shí)例代碼集下載，精心為jQuery初學(xué)者整理的106個(gè)實(shí)例代碼集，包括了各種功能的使用，非常適合初學(xué)者。
軟件介紹
精心為jQuery初學(xué)者整理的106個(gè)實(shí)例代碼集是由最火軟件（原烈火網(wǎng)）為您精心整理的106個(gè)jQuery入門(mén)實(shí)例代碼合集，共有三季。其中一些代碼已經(jīng)在文章教程發(fā)表過(guò)。
軟件說(shuō)明
0，jQ的關(guān)鍵程序：
程序代碼
window.onload = function(){ ... } .
訪問(wèn)HTML文檔的元素，必須先載入文檔對(duì)象模型(DOM)。當(dāng)window.onload函數(shù)執(zhí)行的時(shí)候，說(shuō)明所有東西已經(jīng)載入，包括圖像和橫幅等等。要知道較大的圖片下載速度會(huì)比較慢，因此用戶(hù)必須等待大圖片下載完畢才能看到window.onload()執(zhí)行的代碼效果，這樣就花費(fèi)了很長(zhǎng)的等待時(shí)間，這不是我們想要的。
對(duì)于此，jquery提供了一個(gè)"ready"事件，你可以使用以下的代碼片段：
demo0:
程序代碼
$(document).ready(function(){
// 你的代碼
});
$(document)意思是說(shuō)，獲取整個(gè)網(wǎng)頁(yè)文檔對(duì)象（類(lèi)似的于window.document），$(document).ready意思就是說(shuō)，獲取文檔對(duì)象就緒的時(shí)候。
上面這段代碼的意思是檢查文檔對(duì)象直到它能夠允許被操作（譯者注：這樣做比window.onload()函數(shù)要快的多，因?yàn)橹灰臋n對(duì)象載入完成就能夠執(zhí)行代碼了，而不需要等待頁(yè)面中的圖片下載是否已經(jīng)完成）---這是我們想要的。
好了 ，其他的也不多說(shuō)了，我們開(kāi)始來(lái)用jQ寫(xiě)幾個(gè)簡(jiǎn)單的例子。
1，demo1:
鼠標(biāo)點(diǎn)擊時(shí)的觸發(fā)
首先，我們嘗試鼠標(biāo)點(diǎn)擊超鏈接時(shí)觸發(fā)某些行為。在ready函數(shù)里加入以下代碼：
程序代碼
$("p").click(function(){
alert("hello world");
});
2，demo2:
增加 CSS Class
另外一個(gè)事情就是，一個(gè)共同的任務(wù)：增加或移除元素的css class，例如:
程序代碼
$("a").addClass("test");
$("a").removeClass("test");
那么當(dāng)你調(diào)用了addClass函數(shù)后，所有超鏈接的字體將變成粗體。
3，demo3:
show( )和html()的使用
$("a").addClass("test").show().html("foo");
程序解釋?zhuān)?span style="display:none">1K0紅軟基地
首先增加樣式，
然后
show( ):顯示隱藏的匹配元素。
html("foo"):設(shè)置每一個(gè)匹配元素的html內(nèi)容
4，demo4:
特效hide（）
$("a").click(function(){
$(this).hide("slow");
return false;
});
程序解釋?zhuān)?span style="display:none">1K0紅軟基地
點(diǎn)擊超鏈接，超鏈接就會(huì)慢慢的消失。
“return false"表示保留默認(rèn)行為，因此頁(yè)面不會(huì)跳轉(zhuǎn)。
5，demo5:
demo5-收縮展開(kāi)功能
$("#head").click(function()
{$("#content").slideToggle("slow"，function(){ alert("Hello，cssrain..");});
});
程序解釋?zhuān)?span style="display:none">1K0紅軟基地
1，首先把JQ導(dǎo)入.
2，然后開(kāi)始寫(xiě)函數(shù)了。$(document).ready(function(){});
3，前面說(shuō)過(guò)了，獲取標(biāo)簽?zāi)苤苯?$("標(biāo)簽")。給標(biāo)簽注冊(cè) onclick事件直接可以 click.
4，核心代碼:
$("head").click(function(){$("content").slideToggle("slow");});
5，slideToggle(speed， callback)
通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。
這個(gè)動(dòng)畫(huà)效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏或顯示。
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>
程序解釋?zhuān)?span style="display:none">1K0紅軟基地
appendTo():
把所有匹配的元素追加到另一個(gè)、指定的元素元素集合中
7， demo7:
表格隔行變色， 鼠標(biāo)滑過(guò)變色，點(diǎn)擊變色.
代碼解釋?zhuān)?span style="display:none">1K0紅軟基地
例子中我已經(jīng)把 解釋放上去了，這里就不再貼注釋了。
例子中用了：mouseover（），addClass（），mouseout（），removeClass（），click（），
toggleClass（），tr:even 等方法。
另外解釋了toggle()和toggleClass（）的區(qū)別。
另外這個(gè)例子 我用了 鏈?zhǔn)讲僮?.可以查看 鏈?zhǔn)讲僮?txt 里面有解釋。
8，demo8:
toggle( )的用法：
$("p").toggle()
切換元素的可見(jiàn)狀態(tài)。
如果元素是可見(jiàn)的，切換為隱藏的；如果元素是隱藏的，切換為可見(jiàn)的。
9，demo9:
hover()的用法：
Hover(function over ，function out )
一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法.
Table里也可以用。
10，demo10:
忘記說(shuō)了
其實(shí)$(document).ready(function(){
// 你的代碼
});
中的$ 也可以用 jQuery代替
jQuery(document).ready(function(){
jQuery(".").click(function(){jQuery(this).toggleClass("")})
});
代替有什么好處呢？ 有可能你會(huì)用其他的js庫(kù)，象prototype也是$， 有可能會(huì)沖突。
所以用jQuery代替$是比較安全的寫(xiě)法。
還有就是：
$(document).ready(function(){
//
}); 的縮寫(xiě)法：
$(
function() {
//
}
);
11，demo11:
each—find的用法
$("#orderedlist").find("li").each(function(i) {})
each( Function 函數(shù) fn要執(zhí)行的函數(shù) )以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)
12，demo12:
parents()的用法：
$(this).parents("p").addClass("highlight");
parents( String expr )
取得一個(gè)包含著所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。
13，demo13:
load()的用法：
$("#feeds").load("FAQ1.html"，function() { alert("load is done");}
<div id="feeds"></div>
從遠(yuǎn)程的一個(gè)文件中載入HTML并且將它注入到DOM中
14，demo14:
next的用法:
$("p").next().html()
取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合。
這個(gè)函數(shù)只返回后面那個(gè)緊鄰的同輩元素，而不是后面所有的同輩元素。
可以用一個(gè)可選的表達(dá)式進(jìn)行篩選。
15，demo15:
demo1-鼠標(biāo)點(diǎn)擊時(shí)的觸發(fā).html
demo2-1-增加 CSS Class.html<br /demo3-show( )和html().html
demo4-特效(hide).html
demo5-收縮展開(kāi)功能.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學(xué)習(xí)第二季
介紹略
jQ學(xué)習(xí)第三季
介紹略
軟件截圖
