從零開始學習jQuery (一) 入門篇javascript
本系列文章將帶您進入jQuery的精彩世界, 其中有不少做者具體的使用經驗和解決方案, 即便你會使用jQuery也能在閱讀中發現些許祕籍.html
本篇文章是入門第一篇, 主要是簡單介紹jQuery, 經過簡單示例指導你們如何編寫jQuery代碼以及搭建開發環境. 詳細講解了如何在Visual Studio中配合使用jQuery.前端
jQuery是一套Javascript腳本庫. Javascript腳本庫相似於.NET的類庫, 咱們將一些工具方法或對象方法封裝在類庫中, 方便用戶使用.java
注意jQuery是腳本庫, 而不是腳本框架. "庫"不等於"框架", 好比"System程序集"是類庫,而"ASP.NET MVC"是框架. jQuery並不能幫助咱們解決腳本的引用管理和功能管理,這些都是腳本框架要作的事.jquery
腳本庫可以幫助咱們完成編碼邏輯,實現業務功能. 使用jQuery將極大的提升編寫javascript代碼的效率, 讓寫出來的代碼更加優雅, 更加健壯. 同時網絡上豐富的jQuery插件也讓咱們的工做變成了"有了jQuery,每天喝茶水"--由於咱們已經站在巨人的肩膀上了.web
建立一個ASP.NET MVC項目時, 會發現已經自動引入了jQuery類庫. jQuery幾乎是微軟的御用腳本庫了!完美的集成度和智能感知的支持,讓.NET和jQuery完美無缺結合在一塊兒!因此用.NET就要選用jQuery而非Dojo,ExtJS等.後端
jQuery有以下特色:瀏覽器
使用這些功能函數, 可以幫助咱們快速完成各類功能, 並且會讓咱們的代碼異常簡潔.網絡
javascript腳本在不一樣瀏覽器的兼容性一直是Web開發人員的噩夢, 經常一個頁面在IE7,Firefox下運行正常, 在IE6下就出現莫名其妙的問題. 針對不一樣的瀏覽器編寫不一樣的腳本是一件痛苦的事情. 有了jQuery咱們將從這個噩夢中醒來, 好比在jQuery中的Event事件對象已經被格式化成全部瀏覽器通用的, 從前要根據event獲取事件觸發者, 在ie下是event.srcElements 而ff等標準瀏覽器下下是event.target. jQuery則經過統一event對象,讓咱們能夠在全部瀏覽器中使用event.target獲取事件對象.框架
jQuery能夠實現好比漸變彈出, 圖層移動等動畫效果, 讓咱們得到更好的用戶體驗. 單以漸變效果爲例, 從前我本身寫了一個能夠兼容ie和ff的漸變更畫, 使用大量javascript代碼實現, 費心費力不說, 寫完後沒有太多幫助過一段時間就忘記了. 再開發相似的功能還要再次費心費力. 現在使用jQuery就能夠幫助咱們快速完成此類應用.
這一條是我提出的, 緣由就是大部分開發人員對於javascript存在錯誤的認識. 好比在頁面中編寫加載時即執行的操做DOM的語句, 在HTML元素或者document對象上直接添加"onclick"屬性, 不知道onclick實際上是一個匿名函數等等. 擁有這些錯誤腳本知識的技術人員也能完成全部的開發工做, 可是這樣的程序是不健壯的. 好比"在頁面中編寫加載時即執行的操做DOM的語句", 當頁面代碼很小用戶加載很快時沒有問題, 當頁面加載稍慢時就會出現瀏覽器"終止操做"的錯誤.jQuery提供了不少簡便的方法幫助咱們解決這些問題, 一旦使用jQuery你就將糾正這些錯誤的知識--由於咱們都是用標準的正確的jQuery腳本編寫方法!
按照慣例, 咱們來編寫jQuery的Hello World程序, 來邁出使用jQuery的第一步.
在本文最後能夠下本章的完整源代碼.
jQuery的項目下載放在了Google Code上, 下載地址:
http://code.google.com/p/jqueryjs/downloads/list
上面的地址是總下載列表, 裏面有不少版本和類型的jQuery庫, 主要分爲以下幾類:
min: 壓縮後的jQuery類庫, 在正式環境上使用.如:jquery-1.3.2.min.js
vsdoc: 在Visual Studio中須要引入此版本的jquery類庫才能啓用智能感知.如:jquery-1.3.2-vsdoc2.js
release包: 裏面有沒有壓縮的jquery代碼, 以及文檔和示例程序. 如:jquery-1.3.2-release.zip
建立一個HTML頁面, 引入jQuery類庫而且編寫以下代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/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="修改內容爲 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>
效果以下:
頁面上有三個按鈕, 分別用來控制Hello World的顯示,隱藏和修改其內容.
此示例使用了:
(1) jQuery的Id選擇器: $("#btnShow")
(2) 事件綁定函數 bind()
(3) 顯示和隱藏函數. show()和hide()
(4) 修改元素內部html的函數html()
在接下來的教程中咱們將深刻這些內容的學習.
首先看一下Visual Studio帶給咱們的智能感知驚喜. 要讓Visual Studio支持智能感知, 須要下列條件:
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
在編寫腳本的時候, 甚至剛剛輸入"$"的時候,VS能夠智能提示:
在使用方法時, 還會有更多的提示:
有了智能感知咱們編寫javascript變得和C#同樣快速,便捷,舒服.大部分狀況能夠一次編寫成功而不用再爲了一個大小寫而查詢javascript幫助文件.可以讓Visual Studio對jQuery實現智能感知的前提是要引入vsdoc版本的jQuery類庫. 示例中咱們引入了"jquery-1.3.2-vsdoc2.js"文件. 若是引用其餘版本好比min版本的jQuery類庫就沒法啓用智能提示.可是在正式環境下, 咱們必需要使用"min"版本的jquery庫文件, 以1.3.2版本號爲例,各個版本的大小以下:
其中第一個是未壓縮的jquery庫. 若是啓用gzip壓縮而且使用min版本的jquery.js能夠在傳輸過程當中壓縮到19KB.
注意,若是咱們更新了腳本, 能夠經過"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者單擊 編輯->IntelliSense->更新JScript Intellisense:
爲了即能在Visual Studio中增長腳本提示, 又能在上線的時候使用min版本的腳本庫, 咱們通常是用以下方式引入jQuery庫:
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script> <%if (false) { %> <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> <%} %>
這是網上推薦的方式. 編譯後的頁面上只有min版本的引用, 同時在開發時可以享受到智能感知.可是注意這種方式引用的min類庫只能是1.2.6或者以前的版本號. 最新的1.3.2的全部非vsdoc版本的jquery庫引用後都會致使JScript Intellisense更新出錯. 這是1.3.2版本的一個bug, 期待後續版本中解決. 其實你們徹底可使用1.2.6版本的min庫, 本教程涉及的jquery功能, 1.2.6版本基本都支持.
咱們使用了if(false)讓編譯後的頁面不包含vsdoc版本jquery庫的引用, 一樣的思路還可使用好比將腳本引用放入一個PlaceHolder並設置visible=fasle等.
爲了能使用 1.3.2 版本的min庫, 咱們只能經過將腳本引用放在變量裏, 經過頁面輸出的方式, 此種方式能夠正常更新JScript Intellisense.可是可能有人和我同樣不喜歡在前端使用變量:
<asp:PlaceHolder Visible="false" runat="server"> <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> </asp:PlaceHolder> <% =jQueryScriptBlock %>
後臺聲明變量:
protected string jQueryScriptBlock = @"<script type=""text/javascript"" src=""scripts/jquery-1.3.2.min.js""></script>";
上面咱們解決了在頁面中智能感知的問題, 其實在獨立的.js文件中咱們一樣能夠啓用腳本的智能感知, 在IntellisenseDemo.js文件中,添加以下語句:
/// <reference path="jquery-1.3.2-vsdoc2.js" />
更新JScript Intellisense, 會發如今腳本中也啓用了智能提示:
注意,本文中講解的腳本智能感知不只適用於jQuery類庫, 還適用於本身編寫的javascript代碼.
本文簡單介紹了jQuery, 以及如何搭建腳本開發環境. 示例程序沒有複雜的功能, 可能還沒法讓沒有接觸過jQuery的人認識到它的強大.可是僅憑藉"多瀏覽器支持"這一特性, 就足以讓咱們學習並使用jQuery, 由於現在想編寫跨瀏覽器的腳本真的是一件困難的事情!
在後續文章中咱們將深刻學習jQuery選擇器, 事件, 工具函數, 動畫, 以及插件等.
本文代碼下載: