從零開始學習jQuery (一) 入門篇

時間 2020-05-19

標籤開始學習 jquery 入門欄目 JQuery 简体版

原文原文鏈接

本系列文章導航

從零開始學習jQuery (一) 入門篇javascript

一.摘要

本系列文章將帶您進入jQuery的精彩世界, 其中有不少做者具體的使用經驗和解決方案, 即便你會使用jQuery也能在閱讀中發現些許祕籍.html

本篇文章是入門第一篇, 主要是簡單介紹jQuery, 經過簡單示例指導你們如何編寫jQuery代碼以及搭建開發環境. 詳細講解了如何在Visual Studio中配合使用jQuery.前端

二.前言

三.什麼是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有以下特色:瀏覽器

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.太多了! 等待咱們一一去發現.

四.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/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 對jQuery的智能感知

首先看一下Visual Studio帶給咱們的智能感知驚喜. 要讓Visual Studio支持智能感知, 須要下列條件:

安裝 VS2008 SP1
下載地址: http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
安裝VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.
該補丁會致使Visual Studio在一個JavaScript庫被引用時，查找是否存在一個可選的"-vsdoc.js"文件，若是存在的話，就用它來驅動JavaScript intellisense引擎。這些加了註釋的"-vsdoc.js"文件能夠包含對JavaScript方法提供了幫助文檔的XML註釋，以及對沒法自動推斷出的動態JavaScript簽名的另外的代碼intellisense提示。你能夠在"這裏"瞭解該補丁的詳情。你能夠在"這裏"免費下載該補丁。

必需要引用vsdoc版本的jquery庫

<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庫:

1. 控制編譯結果

    <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等.

2. 使用後端變量

爲了能使用 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文件中啓用腳本智能感知

上面咱們解決了在頁面中智能感知的問題, 其實在獨立的.js文件中咱們一樣能夠啓用腳本的智能感知, 在IntellisenseDemo.js文件中,添加以下語句:

/// <reference path="jquery-1.3.2-vsdoc2.js" />

更新JScript Intellisense, 會發如今腳本中也啓用了智能提示:

注意,本文中講解的腳本智能感知不只適用於jQuery類庫, 還適用於本身編寫的javascript代碼.

七.總結

本文簡單介紹了jQuery, 以及如何搭建腳本開發環境. 示例程序沒有複雜的功能, 可能還沒法讓沒有接觸過jQuery的人認識到它的強大.可是僅憑藉"多瀏覽器支持"這一特性, 就足以讓咱們學習並使用jQuery, 由於現在想編寫跨瀏覽器的腳本真的是一件困難的事情!

在後續文章中咱們將深刻學習jQuery選擇器, 事件, 工具函數, 動畫, 以及插件等.

本文代碼下載:

http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-1.rar

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。