|
|
本文的宗旨, 授人魚(yú)不如授人漁. 我只會(huì)講關(guān)鍵部分,不可能JQuery的每個(gè)函數(shù)我都講,因?yàn)橛泻芏嗪瘮?shù)貝殼自己在實(shí)際應(yīng)用中都從未使用過(guò). 但當(dāng)我們已經(jīng)會(huì)漁了還用擔(dān)心魚(yú)嗎!?
BTW:貝殼假設(shè)你已經(jīng)掌了基本的JavaScript運(yùn)用能力及基礎(chǔ)的CSS知識(shí).
JQuery是什么
JQuery只是一個(gè)JS文件
人對(duì)新鮮事業(yè)總是報(bào)著好奇與排斥的情感,貝殼剛開(kāi)始學(xué)的時(shí)候也一樣. 想掌握又怕自己學(xué)不會(huì). 其實(shí)JQuery很簡(jiǎn)單.
JQuery其實(shí)就是一個(gè)工具包,很多常用的功能已經(jīng)被好心人封裝好,我們真要直接調(diào)用就可以了(有點(diǎn)類(lèi)似SDK),具體內(nèi)部原理和實(shí)現(xiàn)我們現(xiàn)在不去討論. 記住JQuery很簡(jiǎn)單,很方便.
目前jQuery最新Release版本為1.32,官方下載地址為:http://docs.jquery.com/Downloading_jQuery
本系列教程基于1.32版進(jìn)行講解.
JQuery有兩種版本:
一種為uncompressed版(未壓縮版)主要用在開(kāi)發(fā)中.
另一種為Minified(迷您版)當(dāng)開(kāi)發(fā)完畢了,就可以改用這個(gè)版本.
兩種版本的區(qū)別
文件大小不一樣, 最終用戶(hù)在瀏覽時(shí)可以減少下載JS時(shí)的等待時(shí)間.
Uncompressed版文件大小為118KB
Minified版文件大小為56KB
JQuery能帶給我們什么
一, 站在巨人的肩上
別人已經(jīng)發(fā)明了輪子,我們沒(méi)必要自己再去造一個(gè).
二, 強(qiáng)大的BOM,DOM,CSS,事件 的操作能力
我最常用的是CSS及DOM的操作,真的太方便了.
三, 更加簡(jiǎn)潔的代碼
自己的親身經(jīng)歷,比如表格(Table)中的TR奇偶為兩種顏色的代碼如果自己用JavaScript去編號(hào)得用幾十行代碼,JQuery只需要2行就可以了.
四, 與瀏覽器無(wú)關(guān)性
做過(guò)JavaScript開(kāi)發(fā)的就知道JavaScript在不同的瀏覽器下行為表現(xiàn)有時(shí)不一樣,我們不得不為不同的瀏覽器編寫(xiě)相應(yīng)的代碼. JQuery在這方法已經(jīng)內(nèi)部處理,我們只管去用就是了.
五, 不錯(cuò)的性能
我自己有自知之明, 至少我寫(xiě)的JavaScript代碼的運(yùn)行效率不如JQuery的高.
如何使用JQuery
萬(wàn)年開(kāi)頭難,我在第一次使用JQuery時(shí)被嚇到過(guò),不知道怎么使用,其實(shí)很簡(jiǎn)單,下面我們用一個(gè)例子來(lái)說(shuō)明. : )
建立一個(gè)html文件,比如index.html 并與JQuery庫(kù)文件jquery-1.3.2.js放到同目錄下(其實(shí)放那都可以)
首先我們解決JQuery的引用. 代碼如下:
<html>
<head>
<title>JQuery測(cè)試</title>
<script language="Javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
</body>
</thml>
紅色的那一行代碼就完成了JQuery的引用,簡(jiǎn)單吧!
現(xiàn)在我們?cè)贁U(kuò)充一個(gè)功能,使 index.html顯示一個(gè)表格,并且表格內(nèi)各行的顏色奇偶不同.也就是奇數(shù)行是一種顏色,偶數(shù)行又是另一種顏色.
index.html代碼結(jié)構(gòu):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery測(cè)試</title>
<style type="text/css">
/*table中偶數(shù)行*/
.tabEven {
background: #ff0000;
}
/*table中奇數(shù)行*/
.tabOdd {
background: #00ff00;
}
</style>
<script language="Javascript" src="jquery-1.3.2.js">
</script>
<script language = "JavaScript" type="text/Javascript">
//<![CDATA[
$(document).ready(function(){
$("#tabTest tr:even").addClass("tabEven");
$("#tabTest tr:odd").addClass("tabOdd");
});
//]]>
</script>
</head>
<body>
<table id="tabTest">
<tbody>
<tr>
<td>快購(gòu)利眾網(wǎng)_1</td>
<td>1</td>
</tr>
<tr>
<td>快購(gòu)利眾網(wǎng)_2</td>
<td>1</td>
</tr>
<tr>
<td>快購(gòu)利眾網(wǎng)_3</td>
<td>1</td>
</tr>
<tr>
<td>快購(gòu)利眾網(wǎng)_4</td>
<td>1</td>
</tr>
<tr>
<td>快購(gòu)利眾網(wǎng)_5</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</thml>
效果如下:
代碼解析:
$(document).ready(function(){
$("#tabTest tr:even").addClass("tabEven");
$("#tabTest tr:odd").addClass("tabOdd");
});
$(document).ready 的作用很簡(jiǎn)單,就是等待網(wǎng)頁(yè)全部?jī)?nèi)部載入后再執(zhí)行JavaScript代碼(別忘了JQuery也是JavaScript代碼喲), 這個(gè)函數(shù)幾乎在所有使用JQuery的代碼中都用到. 因?yàn)槿绻覀兊?a href=/itjie/Javajishu/ target=_blank class=infotextkey>Javascript代碼中如果有DOM操作,在網(wǎng)頁(yè)還沒(méi)完全讀取完時(shí)整個(gè)DOM框架還沒(méi)有真正建立起來(lái),在這之前的DOM操作都是無(wú)效的.
$("#tabTest tr:even").addClass("tabEven"); 為id為tabTest的表格的偶數(shù)行增加名為tabEven的CSS樣式
$("#tabTest tr:odd").addClass("tabOdd"); 為id為tabTest的表格的奇數(shù)行增加名為tabEven的CSS樣式
最后, 初學(xué)者千萬(wàn)不要為陌生的代碼而感到不知所措,記住JQuery很簡(jiǎn)單.
作者信息:萬(wàn)思杰
JavaScript技術(shù)：JQuery 無(wú)廢話系列教程(一) jquery入門(mén) [推薦]，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
