貝殼(就是本文作者了)也屬于剛剛會(huì)用點(diǎn)JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時(shí)候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯(cuò)誤或者不合適的理解望廣大朋友直接指出批評(píng).
本文的宗旨, 授人魚不如授人漁. 我只會(huì)講關(guān)鍵部分,不可能JQuery的每個(gè)函數(shù)我都講,因?yàn)橛泻芏嗪瘮?shù)貝殼自己在實(shí)際應(yīng)用中都從未使用過. 但當(dāng)我們已經(jīng)會(huì)漁了還用擔(dān)心魚嗎!?
BTW:貝殼假設(shè)你已經(jīng)掌了基本的JavaScript運(yùn)用能力及基礎(chǔ)的CSS知識(shí).
JQuery是什么
JQuery只是一個(gè)JS文件
人對(duì)新鮮事業(yè)總是報(bào)著好奇與排斥的情感,貝殼剛開始學(xué)的時(shí)候也一樣. 想掌握又怕自己學(xué)不會(huì). 其實(shí)JQuery很簡(jiǎn)單.
JQuery其實(shí)就是一個(gè)工具包,很多常用的功能已經(jīng)被好心人封裝好,我們真要直接調(diào)用就可以了(有點(diǎn)類似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版(未壓縮版)主要用在開發(fā)中.
另一種為Minified(迷您版)當(dāng)開發(fā)完畢了,就可以改用這個(gè)版本.
兩種版本的區(qū)別
文件大小不一樣, 最終用戶在瀏覽時(shí)可以減少下載JS時(shí)的等待時(shí)間.
Uncompressed版文件大小為118KB
Minified版文件大小為56KB
JQuery能帶給我們什么
一, 站在巨人的肩上
別人已經(jīng)發(fā)明了輪子,我們沒必要自己再去造一個(gè).
二, 強(qiáng)大的BOM,DOM,CSS,事件 的操作能力
我最常用的是CSS及DOM的操作,真的太方便了.
三, 更加簡(jiǎn)潔的代碼
自己的親身經(jīng)歷,比如表格(Table)中的TR奇偶為兩種顏色的代碼如果自己用JavaScript去編號(hào)得用幾十行代碼,JQuery只需要2行就可以了.
四, 與瀏覽器無關(guān)性
做過JavaScript開發(fā)的就知道JavaScript在不同的瀏覽器下行為表現(xiàn)有時(shí)不一樣,我們不得不為不同的瀏覽器編寫相應(yīng)的代碼. JQuery在這方法已經(jīng)內(nèi)部處理,我們只管去用就是了.
五, 不錯(cuò)的性能
我自己有自知之明, 至少我寫的JavaScript代碼的運(yùn)行效率不如JQuery的高.
如何使用JQuery
萬年開頭難,我在第一次使用JQuery時(shí)被嚇到過,不知道怎么使用,其實(shí)很簡(jiǎn)單,下面我們用一個(gè)例子來說明. : )
建立一個(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)槿绻覀兊腏avascript代碼中如果有DOM操作,在網(wǎng)頁(yè)還沒完全讀取完時(shí)整個(gè)DOM框架還沒有真正建立起來,在這之前的DOM操作都是無效的.
$("#tabTest tr:even").addClass("tabEven"); 為id為tabTest的表格的偶數(shù)行增加名為tabEven的CSS樣式
$("#tabTest tr:odd").addClass("tabOdd"); 為id為tabTest的表格的奇數(shù)行增加名為tabEven的CSS樣式
最后, 初學(xué)者千萬不要為陌生的代碼而感到不知所措,記住JQuery很簡(jiǎn)單.
作者信息:萬思杰,網(wǎng)名貝殼,快購(gòu)利眾創(chuàng)始人.想看作者更多文章請(qǐng)搜索快購(gòu)利眾或萬思杰.
版權(quán)聲明:歡迎免費(fèi)轉(zhuǎn)載,轉(zhuǎn)載時(shí)請(qǐng)保留原作者信息,謝謝合作!
聯(lián)系客服
