|
|
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
一.摘要
本系列文章將帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案, 即使你會使用jQuery也能在閱讀中發現些許秘籍.
本篇文章是入門第一篇, 主要是簡單介紹jQuery, 通過簡單示例指導大家如何編寫jQuery代碼以及搭建開發環境. 詳細講解了如何在Visual Studio中配合使用jQuery.
轉載請注明子秋出品!博客園首發!
二.前言
首先道個歉! "從零開始學習ASP.NET MVC"系列文章在即將介紹Filter時就沒有更新了, 原因就是最近我一直在研究和學習jQuery.看到本系列的名稱和文章標題, 看過我的MVC系列文章的人會感到很熟悉. 不久要給公司的人做培訓, 所以特意制作了本教程.
在寫作的同時我參考了網上jQuery的系列教程文章, 在博客園和Google上并沒有找到讓我滿意的系列教程. 我喜歡將知識系統的,深入淺出的講解.不喜歡寫那種"學習筆記"式的文章. 同時本系列將很快全部寫完(有工作壓力就是有動力), 隨后如果時間允許我會繼續更新MVC系列文章.再一次對等待MVC文章的朋友們說聲抱歉!
另外本系列文章的大部分知識點來源于圖靈出版社的"jQuery實戰"一書. 推薦大家購買此書, 是jQuery書籍中的經典之作.
下面讓我們開始jQuery之旅.
三.什么是jQuery
jQuery是一套Javascript腳本庫. 在我的博客中可以找到"Javascript輕量級腳本庫"系列文章. Javascript腳本庫類似于.NET的類庫, 我們將一些工具方法或對象方法封裝在類庫中, 方便用戶使用.
注意jQuery是腳本庫, 而不是腳本框架. "庫"不等于"框架", 比如"System程序集"是類庫,而"ASP.NET MVC"是框架. jQuery并不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本框架要做的事.
腳本庫能夠幫助我們完成編碼邏輯,實現業務功能. 使用jQuery將極大的提高編寫Javascript代碼的效率, 讓寫出來的代碼更加優雅, 更加健壯. 同時網絡上豐富的jQuery插件也讓我們的工作變成了"有了jQuery,天天喝茶水"--因為我們已經站在巨人的肩膀上了.
創建一個ASP.NET MVC項目時, 會發現已經自動引入了jQuery類庫. jQuery幾乎是微軟的御用腳本庫了!完美的集成度和智能感知的支持,讓.NET和jQuery天衣無縫結合在一起!所以用.NET就要選用jQuery而非Dojo,ExtJS等.
jQuery有如下特點:
1.提供了強大的功能函數
使用這些功能函數, 能夠幫助我們快速完成各種功能, 而且會讓我們的代碼異常簡潔.
2.解決瀏覽器兼容性問題
Javascript腳本在不同瀏覽器的兼容性一直是Web開發人員的噩夢, 常常一個頁面在IE7,Firefox下運行正常, 在IE6下就出現莫名其妙的問題. 針對不同的瀏覽器編寫不同的腳本是一件痛苦的事情. 有了jQuery我們將從這個噩夢中醒來, 比如在jQuery中的Event事件對象已經被格式化成所有瀏覽器通用的, 從前要根據event獲取事件觸發者, 在ie下是event.srcElements 而ff等標準瀏覽器下下是event.target. jQuery則通過統一event對象,讓我們可以在所有瀏覽器中使用event.target獲取事件對象.
3.實現豐富的UI
jQuery可以實現比如漸變彈出, 圖層移動等動畫效果, 讓我們獲得更好的用戶體驗. 單以漸變效果為例, 從前我自己寫了一個可以兼容ie和ff的漸變動畫, 使用大量Javascript代碼實現, 費心費力不說, 寫完后沒有太多幫助過一段時間就忘記了. 再開發類似的功能還要再次費心費力. 如今使用jQuery就可以幫助我們快速完成此類應用.
4.糾正錯誤的腳本知識
這一條是我提出的, 原因就是大部分開發人員對于Javascript存在錯誤的認識. 比如在頁面中編寫加載時即執行的操作DOM的語句, 在HTML元素或者document對象上直接添加"onclick"屬性, 不知道onclick其實是一個匿名函數等等. 擁有這些錯誤腳本知識的技術人員也能完成所有的開發工作, 但是這樣的程序是不健壯的. 比如"在頁面中編寫加載時即執行的操作DOM的語句", 當頁面代碼很小用戶加載很快時沒有問題, 當頁面加載稍慢時就會出現瀏覽器"終止操作"的錯誤.jQuery提供了很多簡便的方法幫助我們解決這些問題, 一旦使用jQuery你就將糾正這些錯誤的知識--因為我們都是用標準的正確的jQuery腳本編寫方法!
5.太多了! 等待我們一一去發現.
系列文章導航：
從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!
從零開始學習jQuery (十) jQueryUI常用功能實戰
從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件
四.Hello World jQuery
按照慣例, 我們來編寫jQuery的Hello World程序, 來邁出使用jQuery的第一步.
在本文最后可以下本章的完整源代碼.
1.下載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
2.編寫程序
創建一個HTML頁面, 引入jQuery類庫并且編寫如下代碼:
<!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="修改內容為 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知識庫：從零開始學習jQuery (一) 開天辟地入門篇，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
