網(wǎng)站首頁 行業(yè)快訊 > 正文
開天辟地學(xué)電腦下載（開天辟地入門篇）
一、摘要
本系列文章將帶您進(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。
二、前言
首先道個(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)來源于圖靈出版社的"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代碼的效率, 讓寫出來的代碼更加優(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天衣無縫結(jié)合在一起!所以用.NET就要選用jQuery而非Dojo,ExtJS等.
jQuery有如下特點(diǎn):
提供了強(qiáng)大的功能函數(shù)
使用這些功能函數(shù), 能夠幫助我們快速完成各種功能, 而且會(huì)讓我們的代碼異常簡(jiǎn)潔.
解決瀏覽器兼容性問題
javascript腳本在不同瀏覽器的兼容性一直是Web開發(fā)人員的噩夢(mèng), 常常一個(gè)頁面在IE7,Firefox下運(yùn)行正常, 在IE6下就出現(xiàn)莫名其妙的問題. 針對(duì)不同的瀏覽器編寫不同的腳本是一件痛苦的事情.。
有了jQuery我們將從這個(gè)噩夢(mèng)中醒來, 比如在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ì)象。
實(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)用。
糾正錯(cuò)誤的腳本知識(shí)
這一條是我提出的, 原因就是大部分開發(fā)人員對(duì)于javascript存在錯(cuò)誤的認(rèn)識(shí). 比如在頁面中編寫加載時(shí)即執(zhí)行的操作DOM的語句, 在HTML元素或者document對(duì)象上直接添加"onclick"屬性, 不知道onclick其實(shí)是一個(gè)匿名函數(shù)等等.。
擁有這些錯(cuò)誤腳本知識(shí)的技術(shù)人員也能完成所有的開發(fā)工作, 但是這樣的程序是不健壯的. 比如"在頁面中編寫加載時(shí)即執(zhí)行的操作DOM的語句", 當(dāng)頁面代碼很小用戶加載很快時(shí)沒有問題, 當(dāng)頁面加載稍慢時(shí)就會(huì)出現(xiàn)瀏覽器"終止操作"的錯(cuò)誤。
jQuery提供了很多簡(jiǎn)便的方法幫助我們解決這些問題, 一旦使用jQuery你就將糾正這些錯(cuò)誤的知識(shí)--因?yàn)槲覀兌际怯脴?biāo)準(zhǔn)的正確的jQuery腳本編寫方法!
太多了! 等待我們一一去發(fā)現(xiàn).
四、Hello World jQuery
按照慣例, 我們來編寫jQuery的Hello World程序, 來邁出使用jQuery的第一步.
在本文最后可以下本章的完整源代碼.
下載jQuery類庫(kù)
jQuery的項(xiàng)目下載放在了Google Code上, 下載地址:
http://code.google.com/p/jqueryjs/downloads/list
上面的地址是總下載列表, 里面有很多版本和類型的jQuery庫(kù), 主要分為如下幾類:
min: 壓縮后的jQuery類庫(kù), 在正式環(huán)境上使用.如:jquery-min.js
vsdoc: 在Visual Studio中需要引入此版本的jquery類庫(kù)才能啟用智能感知.如：jquery-2-vsdocjs
release包: 里面有沒有壓縮的jquery代碼, 以及文檔和示例程序. 如:jquery-2-release.zip
編寫程序
創(chuàng)建一個(gè)HTML頁面, 引入jQuery類庫(kù)并且編寫如下代碼:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML0Transitional//EN""http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.worg/1999/xhtml"><head><title>HelloWorldjQuery!</title><scripttype="text/javascript"src="scripts/jquery-2-vsdocjs"></script></head><body><divid="divMsg">HelloWorld!</div><inputid="btnShow"type="button"value="顯示"/><inputid="btnHide"type="button"value="隱藏"/><br/><inputid="btnChange"type="button"value="修改內(nèi)容為HelloWorld,too!"/><scripttype="text/javascript">$("#btnShow").bind("click",function(event){$("#divMsg").show();});$("#btnHide").bind("click",function(event){$("#divMsg").hide();});$("#btnChange").bind("click",function(event){$("#divMsg").html("HelloWorld,too!");});</script></body></html>效果如下:
頁面上有三個(gè)按鈕, 分別用來控制Hello World的顯示,隱藏和修改其內(nèi)容.
此示例使用了:
(1) jQuery的Id選擇器: $("#btnShow")
(2) 事件綁定函數(shù) bind()
(3) 顯示和隱藏函數(shù). show()和hide()
(4) 修改元素內(nèi)部html的函數(shù)html()
在接下來的教程中我們將深入這些內(nèi)容的學(xué)習(xí)。
五、啟用Visual Studio 對(duì)jQuery的智能感知
首先看一下Visual Studio帶給我們的智能感知驚喜. 要讓Visual Studio支持智能感知, 需要下列條件:
?安裝 VS2008 SP1
下載地址:
http://msdn.microsoft.com/en-us/vstudio/cc53344aspx?安裝VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.
該補(bǔ)丁會(huì)導(dǎo)致Visual Studio在一個(gè)JavaScript庫(kù)被引用時(shí)，查找是否存在一個(gè)可選的"-vsdoc.js"文件，如果存在的話，就用它來驅(qū)動(dòng)JavaScript intellisense引擎。
這些加了注釋的"-vsdoc.js"文件可以包含對(duì)JavaScript方法提供了幫助文檔的XML注釋，以及對(duì)無法自動(dòng)推斷出的動(dòng)態(tài)JavaScript簽名的另外的代碼intellisense提示。你可以在"這里"了解該補(bǔ)丁的詳情。你可以在"這里"免費(fèi)下載該補(bǔ)丁。
?必須要引用vsdoc版本的jquery庫(kù)
<scripttype="text/javascript"src="scripts/jquery-2-vsdocjs"></script>
在編寫腳本的時(shí)候, 甚至剛剛輸入"$"的時(shí)候,VS可以智能提示:
在使用方法時(shí), 還會(huì)有更多的提示:
有了智能感知我們編寫javascript變得和C#一樣快速,便捷,舒服.大部分情況可以一次編寫成功而不用再為了一個(gè)大小寫而查詢javascript幫助文件。
能夠讓Visual Studio對(duì)jQuery實(shí)現(xiàn)智能感知的前提是要引入vsdoc版本的jQuery類庫(kù). 示例中我們引入了"jquery-2-vsdocjs"文件. 如果引用其他版本比如min版本的jQuery類庫(kù)就無法啟用智能提示。
但是在正式環(huán)境下, 我們必須要使用"min"版本的jquery庫(kù)文件, 以2版本號(hào)為例,各個(gè)版本的大小如下：
其中第一個(gè)是未壓縮的jquery庫(kù). 如果啟用gzip壓縮并且使用min版本的jquery.js可以在傳輸過程中壓縮到19KB。
注意,如果我們更新了腳本, 可以通過"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者單擊 編輯->IntelliSense->更新JScript Intellisense：
為了即能在Visual Studio中增加腳本提示, 又能在上線的時(shí)候使用min版本的腳本庫(kù), 我們一般是用如下方式引入jQuery庫(kù)：
控制編譯結(jié)果
<scripttype="text/javascript"src="scripts/jquery-min.js"></script><%if(false){%><scripttype="text/javascript"src="scripts/jquery-2-vsdocjs"></script><%}%>這是網(wǎng)上推薦的方式. 編譯后的頁面上只有min版本的引用, 同時(shí)在開發(fā)時(shí)能夠享受到智能感知。但是注意這種方式引用的min類庫(kù)只能是6或者之前的版本號(hào).。
最新的2的所有非vsdoc版本的jquery庫(kù)引用后都會(huì)導(dǎo)致JScript Intellisense更新出錯(cuò)。這是2版本的一個(gè)bug, 期待后續(xù)版本中解決.。
其實(shí)大家完全可以使用6版本的min庫(kù), 本教程涉及的jquery功能, 6版本基本都支持。
我們使用了if(false)讓編譯后的頁面不包含vsdoc版本jquery庫(kù)的引用, 同樣的思路還可以使用比如將腳本引用放入一個(gè)PlaceHolder并設(shè)置visible=fasle等。
使用后端變量
為了能使用 2 版本的min庫(kù), 我們只能通過將腳本引用放在變量里, 通過頁面輸出的方式, 此種方式可以正常更新JScript Intellisense.但是可能有人和我一樣不喜歡在前端使用變量：
<asp:PlaceHolderVisible="false"runat="server"><scripttype="text/javascript"src="scripts/jquery-2-vsdocjs"></script></asp:PlaceHolder><%=jQueryScriptBlock%>
后臺(tái)聲明變量：
protectedstringjQueryScriptBlock=@"<scripttype=""text/javascript""src=""scripts/jquery-min.js""></script>";
六、在獨(dú)立的JS文件中啟用腳本智能感知
上面我們解決了在頁面中智能感知的問題, 其實(shí)在獨(dú)立的.js文件中我們同樣可以啟用腳本的智能感知, 在IntellisenseDemo.js文件中,添加如下語句:
///<referencepath="jquery-2-vsdocjs"/>
更新JScript Intellisense, 會(huì)發(fā)現(xiàn)在腳本中也啟用了智能提示:
注意,本文中講解的腳本智能感知不僅適用于jQuery類庫(kù), 還適用于自己編寫的javascript代碼。
七、總結(jié)
本文簡(jiǎn)單介紹了jQuery, 以及如何搭建腳本開發(fā)環(huán)境.。示例程序沒有復(fù)雜的功能, 可能還無法讓沒有接觸過jQuery的人認(rèn)識(shí)到它的強(qiáng)大。
但是僅憑借"多瀏覽器支持"這一特性, 就足以讓我們學(xué)習(xí)并使用jQuery, 因?yàn)槿缃裣刖帉懣鐬g覽器的腳本真的是一件困難的事情！
在后續(xù)文章中我們將深入學(xué)習(xí)jQuery選擇器, 事件, 工具函數(shù), 動(dòng)畫, 以及插件等.
版權(quán)說明： 本文由用戶上傳，如有侵權(quán)請(qǐng)聯(lián)系刪除！
- 上一篇： 今日更新海陵島在哪里（海陵島在哪）
- 下一篇： 今日更新新年賀詞四字成語（新年賀詞四字）
猜你喜歡：
- 2022-09-20 男人惡心是什么病的前兆（惡心是什么病的前兆）
- 2022-09-20 山東財(cái)經(jīng)大學(xué)東方學(xué)院考研率怎么樣（山東財(cái)經(jīng)大學(xué)考研率是多少）
- 2022-09-20 廣西最早的大學(xué)叫什么大學(xué)（在桂林設(shè)立的廣西最早的大學(xué)是哪所大學(xué)）
- 2022-09-20 小兒肺炎有5個(gè)常見癥狀嗎（小兒肺炎有5個(gè)常見癥狀）
- 2022-09-20 m是哪個(gè)服裝品牌的標(biāo)志（標(biāo)志為M的衣服是什么牌子的）
- 2022-09-20 什么叫正比例什么叫反比例舉例說明（什么叫反比例,舉個(gè)例子說明,）
- 2022-09-20 一包煙要多少根煙絲（一包煙要多少根）
- 2022-09-20 男人吃櫻桃對(duì)身體有什么好處（男人吃櫻桃有什么好處）
最新文章：
- 2023-07-02 怎樣挑選新鮮的豬肝?（怎么挑選新鮮豬肝 挑選新鮮豬肝的小技巧）
- 2023-07-02 木地板都有哪些種類（木地板的種類有哪些）
- 2023-07-02 白蠟?zāi)炯揖叩膬?yōu)缺點(diǎn)（松木家具的優(yōu)缺點(diǎn)）
- 2023-07-02 怎么清洗窗簾布上的污垢（怎么清洗窗簾）
- 2023-07-02 世界上最可愛的小倉(cāng)鼠的樣子（可愛小倉(cāng)鼠的種類）
- 2023-07-02 小貓拉不出來屎怎么辦（小貓拉不出屎怎么辦）
- 2023-07-02 新飛小冰箱耗電量一天多少度（小冰箱耗電量一天多少度）
- 2023-07-02 公司注銷工業(yè)房產(chǎn)怎么辦手續(xù)（公司注銷工業(yè)房產(chǎn)怎么辦）
- 2023-07-02 鳳凰層到底好還是不好（鳳凰層是哪一層）
- 2023-07-02 馬桶寬度空間留多少（馬桶兩邊的空間大小是多少）
- 2023-07-02 如何訓(xùn)練貓咪小便（如何訓(xùn)練貓大小便）
- 2023-07-02 衛(wèi)生間吊頂防潮層做法圖集（衛(wèi)生間吊頂方法是什么）
- 2023-07-02 狗狗為什么總是流口水怎么辦（狗狗為什么愛流口水）
- 2023-07-02 臥室窗戶漏水由誰負(fù)責(zé)維修（臥室窗戶漏風(fēng)怎么辦）
- 2023-07-02 世界名貓大全（世界名貓你知道幾種）
- 2023-07-02 applewatchseries7和6對(duì)比（apple watch series 7和6的區(qū)別）