Jquery中文網 伊蒂哈德7比2 www.jvkwgx.com.cn
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JQuery 無廢話系列教程(一) jquery入門 [推薦]

伊蒂哈德是什么球队:JQuery 無廢話系列教程(一) jquery入門 [推薦]

發布時間:2013-09-16   編輯:伊蒂哈德7比2 www.jvkwgx.com.cn
貝殼(就是本文作者了)也屬于剛剛會用點JQuery的那一類型, 在學習過程中也遇到挺多問題,特別是在開始入門的時候.一直準備寫些有關JQuery的文章,但又恐自己文筆及表達能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.
貝殼(就是本文作者了)也屬于剛剛會用點jquery的那一類型, 在學習過程中也遇到挺多問題,特別是在開始入門的時候.一直準備寫些有關JQuery的文章,但又恐自己文筆及表達能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.

伊蒂哈德7比2 www.jvkwgx.com.cn 本文的宗旨, 授人魚不如授人漁. 我只會講關鍵部分,不可能JQuery的每個函數我都講,因為有很多函數貝殼自己在實際應用中都從未使用過. 但當我們已經會漁了還用擔心魚嗎!?

BTW:貝殼假設你已經掌了基本的JavaScript運用能力及基礎的CSS知識.

JQuery是什么

JQuery只是一個JS文件

人對新鮮事業總是報著好奇與排斥的情感,貝殼剛開始學的時候也一樣. 想掌握又怕自己學不會. 其實JQuery很簡單.

JQuery其實就是一個工具包,很多常用的功能已經被好心人封裝好,我們真要直接調用就可以了(有點類似SDK),具體內部原理和實現我們現在不去討論. 記住JQuery很簡單,很方便.

目前jQuery最新Release版本為1.32,官方下載地址為://docs.jquery.com/Downloading_jQuery

本系列教程基于1.32版進行講解.

JQuery有兩種版本:

一種為uncompressed版(未壓縮版)主要用在開發中.

另一種為Minified(迷您版)當開發完畢了,就可以改用這個版本.

兩種版本的區別

文件大小不一樣, 最終用戶在瀏覽時可以減少下載JS時的等待時間.

Uncompressed版文件大小為118KB

Minified版文件大小為56KB

JQuery能帶給我們什么

一, 站在巨人的肩上

別人已經發明了輪子,我們沒必要自己再去造一個.

二, 強大的BOM,DOM,CSS,事件 的操作能力

我最常用的是CSS及DOM的操作,真的太方便了.

三, 更加簡潔的代碼

自己的親身經歷,比如表格(Table)中的TR奇偶為兩種顏色的代碼如果自己用JavaScript去編號得用幾十行代碼,JQuery只需要2行就可以了.

四, 與瀏覽器無關性

做過JavaScript開發的就知道JavaScript在不同的瀏覽器下行為表現有時不一樣,我們不得不為不同的瀏覽器編寫相應的代碼. JQuery在這方法已經內部處理,我們只管去用就是了.

五, 不錯的性能

我自己有自知之明, 至少我寫的JavaScript代碼的運行效率不如JQuery的高.

如何使用JQuery

萬年開頭難,我在第一次使用JQuery時被嚇到過,不知道怎么使用,其實很簡單,下面我們用一個例子來說明. : )

建立一個html文件,比如index.html 并與JQuery庫文件jquery-1.3.2.js放到同目錄下(其實放那都可以)

首先我們解決JQuery的引用. 代碼如下:

<html>

<head>

<title>JQuery測試</title>

<script language="javascript" src="jquery-1.3.2.js"></script>

</head>

<body>

</body>

</thml>

紅色的那一行代碼就完成了JQuery的引用,簡單吧!

現在我們再擴充一個功能,使 index.html顯示一個表格,并且表格內各行的顏色奇偶不同.也就是奇數行是一種顏色,偶數行又是另一種顏色.

index.html代碼結構:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery測試</title>
<style type="text/css">

/*table中偶數行*/

.tabEven {
background: #ff0000;
}

/*table中奇數行*/

.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>快購利眾網_1</td>
<td>1</td>
</tr>
<tr>
<td>快購利眾網_2</td>
<td>1</td>
</tr>
<tr>
<td>快購利眾網_3</td>
<td>1</td>
</tr>
<tr>
<td>快購利眾網_4</td>
<td>1</td>
</tr>
<tr>
<td>快購利眾網_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 的作用很簡單,就是等待網頁全部內部載入后再執行JavaScript代碼(別忘了JQuery也是JavaScript代碼喲), 這個函數幾乎在所有使用JQuery的代碼中都用到. 因為如果我們的Javascript代碼中如果有DOM操作,在網頁還沒完全讀取完時整個DOM框架還沒有真正建立起來,在這之前的DOM操作都是無效的.

$("#tabTest tr:even").addClass("tabEven"); 為id為tabTest的表格的偶數行增加名為tabEven的CSS樣式
$("#tabTest tr:odd").addClass("tabOdd"); 為id為tabTest的表格的奇數行增加名為tabEven的CSS樣式

最后, 初學者千萬不要為陌生的代碼而感到不知所措,記住JQuery很簡單.

作者信息:萬思杰

您可能感興趣的文章:
JQuery 無廢話系列教程(一) jquery入門 [推薦]
jQuery UI 教程之一 ——入門
jQuery Tools Dateinput使用介紹
從零開始學習jQuery (一) 開天辟地入門篇
JQuery優缺點分析說明
jQuery 開天辟地入門篇一
jQuery UI 教程之二 ——jquery ui dialog的使用
JQuery從頭學起第二講
servlet與jsp基礎教程(10)-會話狀態
jquery 入門教程 [翻譯] 推薦

[關閉]