您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > [轉(zhuǎn)]從零開始學(xué)習(xí)jQuery (一) 入門篇

[轉(zhuǎn)]從零開始學(xué)習(xí)jQuery (一) 入門篇

文章來源：365jz.com 點擊數(shù)：958 更新時間：2009-10-05 21:45 參與評論

作者：張子秋

一.Hello World jQuery

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

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

1.下載jQuery類庫

jQuery的項目下載放在了Google Code上, 下載地址:

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

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

min: 壓縮后的jQuery類庫, 在正式環(huán)境上使用.如: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.編寫程序

創(chuàng)建一個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="修改內(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>

效果如下:

頁面上有三個按鈕, 分別用來控制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 對jQuery的智能感知

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

安裝 VS2008 SP1
下載地址: http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
安裝VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.
該補丁會導(dǎo)致Visual Studio在一個JavaScript庫被引用時，查找是否存在一個可選的"-vsdoc.js"文件，如果存在的話，就用它來驅(qū)動JavaScript intellisense引擎。這些加了注釋的"-vsdoc.js"文件可以包含對JavaScript方法提供了幫助文檔的XML注釋，以及對無法自動推斷出的動態(tài)JavaScript簽名的另外的代碼intellisense提示。你可以在"這里"了解該補丁的詳情。你可以在"這里"免費下載該補丁。
必須要引用vsdoc版本的jquery庫
```
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
```

在編寫腳本的時候, 甚至剛剛輸入"$"的時候,VS可以智能提示:

在使用方法時, 還會有更多的提示:

有了智能感知我們編寫javascript變得和C#一樣快速,便捷,舒服.大部分情況可以一次編寫成功而不用再為了一個大小寫而查詢javascript幫助文件.能夠讓Visual Studio對jQuery實現(xiàn)智能感知的前提是要引入vsdoc版本的jQuery類庫. 示例中我們引入了"jquery-1.3.2-vsdoc2.js"文件. 如果引用其他版本比如min版本的jQuery類庫就無法啟用智能提示.但是在正式環(huán)境下, 我們必須要使用"min"版本的jquery庫文件, 以1.3.2版本號為例,各個版本的大小如下:

其中第一個是未壓縮的jquery庫. 如果啟用gzip壓縮并且使用min版本的jquery.js可以在傳輸過程中壓縮到19KB.

注意,如果我們更新了腳本, 可以通過"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者單擊編輯->IntelliSense->更新JScript Intellisense:

為了即能在Visual Studio中增加腳本提示, 又能在上線的時候使用min版本的腳本庫, 我們一般是用如下方式引入jQuery庫:

1. 控制編譯結(jié)果

    <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>    
    <%} %>

這是網(wǎng)上推薦的方式. 編譯后的頁面上只有min版本的引用, 同時在開發(fā)時能夠享受到智能感知.但是注意這種方式引用的min類庫只能是1.2.6或者之前的版本號. 最新的1.3.2的所有非vsdoc版本的jquery庫引用后都會導(dǎo)致JScript Intellisense更新出錯. 這是1.3.2版本的一個bug, 期待后續(xù)版本中解決. 其實大家完全可以使用1.2.6版本的min庫, 本教程涉及的jquery功能, 1.2.6版本基本都支持.

我們使用了if(false)讓編譯后的頁面不包含vsdoc版本jquery庫的引用, 同樣的思路還可以使用比如將腳本引用放入一個PlaceHolder并設(shè)置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, 會發(fā)現(xiàn)在腳本中也啟用了智能提示:

注意,本文中講解的腳本智能感知不僅適用于jQuery類庫, 還適用于自己編寫的javascript代碼.

四.總結(jié)

本文簡單介紹了jQuery, 以及如何搭建腳本開發(fā)環(huán)境. 示例程序沒有復(fù)雜的功能, 可能還無法讓沒有接觸過jQuery的人認(rèn)識到它的強大.但是僅憑借"多瀏覽器支持"這一特性, 就足以讓我們學(xué)習(xí)并使用jQuery, 因為如今想編寫跨瀏覽器的腳本真的是一件困難的事情!

在后續(xù)文章中我們將深入學(xué)習(xí)jQuery選擇器, 事件, 工具函數(shù), 動畫, 以及插件等.

本文代碼下載:

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