系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇

從零開始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器

從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集

從零開始學(xué)習(xí)jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學(xué)習(xí)jQuery (五) 事件與事件對(duì)象

從零開始學(xué)習(xí)jQuery (六) AJAX快餐

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁(yè)面動(dòng)起來(lái)!

從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

一.摘要

本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案,  即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

本篇文章是入門第一篇, 主要是簡(jiǎn)單介紹jQuery, 通過簡(jiǎn)單示例指導(dǎo)大家如何編寫jQuery代碼以及搭建開發(fā)環(huán)境. 詳細(xì)講解了如何在Visual Studio中配合使用jQuery.

轉(zhuǎn)載請(qǐng)注明子秋出品!博客園首發(fā)!

二.前言

首先道個(gè)歉! "從零開始學(xué)習(xí)ASP.NET MVC"系列文章在即將介紹Filter時(shí)就沒有更新了, 原因就是最近我一直在研究和學(xué)習(xí)jQuery.看到本系列的名稱和文章標(biāo)題, 看過我的MVC系列文章的人會(huì)感到很熟悉. 不久要給公司的人做培訓(xùn), 所以特意制作了本教程.

在寫作的同時(shí)我參考了網(wǎng)上jQuery的系列教程文章, 在博客園和Google上并沒有找到讓我滿意的系列教程. 我喜歡將知識(shí)系統(tǒng)的,深入淺出的講解.不喜歡寫那種"學(xué)習(xí)筆記"式的文章. 同時(shí)本系列將很快全部寫完(有工作壓力就是有動(dòng)力), 隨后如果時(shí)間允許我會(huì)繼續(xù)更新MVC系列文章.再一次對(duì)等待MVC文章的朋友們說聲抱歉!

另外本系列文章的大部分知識(shí)點(diǎn)來(lái)源于圖靈出版社的"jQuery實(shí)戰(zhàn)"一書. 推薦大家購(gòu)買此書, 是jQuery書籍中的經(jīng)典之作.

下面讓我們開始jQuery之旅.

三.什么是jQuery

jQuery是一套Javascript腳本庫(kù).  在我的博客中可以找到"Javascript輕量級(jí)腳本庫(kù)"系列文章. Javascript腳本庫(kù)類似于.NET的類庫(kù), 我們將一些工具方法或?qū)ο蠓椒ǚ庋b在類庫(kù)中, 方便用戶使用.

注意jQuery是腳本庫(kù), 而不是腳本框架. "庫(kù)"不等于"框架", 比如"System程序集"是類庫(kù),而"ASP.NET MVC"是框架. jQuery并不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事.

腳本庫(kù)能夠幫助我們完成編碼邏輯,實(shí)現(xiàn)業(yè)務(wù)功能. 使用jQuery將極大的提高編寫Javascript代碼的效率, 讓寫出來(lái)的代碼更加優(yōu)雅, 更加健壯. 同時(shí)網(wǎng)絡(luò)上豐富的jQuery插件也讓我們的工作變成了"有了jQuery,天天喝茶水"--因?yàn)槲覀円呀?jīng)站在巨人的肩膀上了.

創(chuàng)建一個(gè)ASP.NET MVC項(xiàng)目時(shí), 會(huì)發(fā)現(xiàn)已經(jīng)自動(dòng)引入了jQuery類庫(kù). jQuery幾乎是微軟的御用腳本庫(kù)了!完美的集成度和智能感知的支持,讓.NET和jQuery天衣無(wú)縫結(jié)合在一起!所以用.NET就要選用jQuery而非Dojo,ExtJS等.

jQuery有如下特點(diǎn):

1.提供了強(qiáng)大的功能函數(shù)

使用這些功能函數(shù), 能夠幫助我們快速完成各種功能, 而且會(huì)讓我們的代碼異常簡(jiǎn)潔.

2.解決瀏覽器兼容性問題

Javascript腳本在不同瀏覽器的兼容性一直是Web開發(fā)人員的噩夢(mèng),  常常一個(gè)頁(yè)面在IE7,Firefox下運(yùn)行正常, 在IE6下就出現(xiàn)莫名其妙的問題. 針對(duì)不同的瀏覽器編寫不同的腳本是一件痛苦的事情. 有了jQuery我們將從這個(gè)噩夢(mèng)中醒來(lái), 比如在jQuery中的Event事件對(duì)象已經(jīng)被格式化成所有瀏覽器通用的, 從前要根據(jù)event獲取事件觸發(fā)者, 在ie下是event.srcElements 而ff等標(biāo)準(zhǔn)瀏覽器下下是event.target. jQuery則通過統(tǒng)一event對(duì)象,讓我們可以在所有瀏覽器中使用event.target獲取事件對(duì)象.

3.實(shí)現(xiàn)豐富的UI

jQuery可以實(shí)現(xiàn)比如漸變彈出, 圖層移動(dòng)等動(dòng)畫效果, 讓我們獲得更好的用戶體驗(yàn). 單以漸變效果為例, 從前我自己寫了一個(gè)可以兼容ie和ff的漸變動(dòng)畫, 使用大量Javascript代碼實(shí)現(xiàn), 費(fèi)心費(fèi)力不說, 寫完后沒有太多幫助過一段時(shí)間就忘記了. 再開發(fā)類似的功能還要再次費(fèi)心費(fèi)力. 如今使用jQuery就可以幫助我們快速完成此類應(yīng)用.

4.糾正錯(cuò)誤的腳本知識(shí)

這一條是我提出的, 原因就是大部分開發(fā)人員對(duì)于Javascript存在錯(cuò)誤的認(rèn)識(shí). 比如在頁(yè)面中編寫加載時(shí)即執(zhí)行的操作DOM的語(yǔ)句, 在HTML元素或者document對(duì)象上直接添加"onclick"屬性,  不知道onclick其實(shí)是一個(gè)匿名函數(shù)等等.  擁有這些錯(cuò)誤腳本知識(shí)的技術(shù)人員也能完成所有的開發(fā)工作, 但是這樣的程序是不健壯的. 比如"在頁(yè)面中編寫加載時(shí)即執(zhí)行的操作DOM的語(yǔ)句", 當(dāng)頁(yè)面代碼很小用戶加載很快時(shí)沒有問題, 當(dāng)頁(yè)面加載稍慢時(shí)就會(huì)出現(xiàn)瀏覽器"終止操作"的錯(cuò)誤.jQuery提供了很多簡(jiǎn)便的方法幫助我們解決這些問題, 一旦使用jQuery你就將糾正這些錯(cuò)誤的知識(shí)--因?yàn)槲覀兌际怯脴?biāo)準(zhǔn)的正確的jQuery腳本編寫方法!

5.太多了! 等待我們一一去發(fā)現(xiàn).

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇

從零開始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器

從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集

從零開始學(xué)習(xí)jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學(xué)習(xí)jQuery (五) 事件與事件對(duì)象

從零開始學(xué)習(xí)jQuery (六) AJAX快餐

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁(yè)面動(dòng)起來(lái)!

從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

四.Hello World jQuery

按照慣例, 我們來(lái)編寫jQuery的Hello World程序, 來(lái)邁出使用jQuery的第一步.

在本文最后可以下本章的完整源代碼.

1.下載jQuery類庫(kù)

jQuery的項(xiàng)目下載放在了Google Code上, 下載地址:

http://code.google.com/p/jqueryjs/downloads/list

上面的地址是總下載列表, 里面有很多版本和類型的jQuery庫(kù), 主要分為如下幾類:

min: 壓縮后的jQuery類庫(kù),  在正式環(huán)境上使用.如:jquery-1.3.2.min.js

vsdoc: 在Visual Studio中需要引入此版本的jquery類庫(kù)才能啟用智能感知.如：jquery-1.3.2-vsdoc2.js

release包: 里面有沒有壓縮的jquery代碼, 以及文檔和示例程序. 如:jquery-1.3.2-release.zip

2.編寫程序

創(chuàng)建一個(gè)HTML頁(yè)面, 引入jQuery類庫(kù)并且編寫如下代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World jQuery!</title>
    <script type="text/Javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
</head>
<body>
    <div id="divMsg">Hello World!</div>
    <input id="btnShow" type="button" value="顯示" />
    <input id="btnHide" type="button" value="隱藏" /><br />
    <input id="btnChange" type="button" value="修改內(nèi)容為 Hello World, too!" />
    <script type="text/Javascript" >
        $("#btnShow").bind("click", function(event) { $("#divMsg").show(); });
        $("#btnHide").bind("click", function(event) { $("#divMsg").hide(); });
        $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World, too!"); });      
    </script>
</body>
</html>

it知識(shí)庫(kù)：從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。