828捕鱼老版本

書(shū)名： jQuery從入門(mén)到精通（軟件開(kāi)發(fā)視頻大講堂）
作者名：明日科技
本章字?jǐn)?shù)： 888字
更新時(shí)間： 2020-11-28 23:47:20

3.2 jQuery下載與配置

要在自己的網(wǎng)站中應(yīng)用jQuery庫(kù)，是需要下載并配置的。下面來(lái)介紹如何下載與配置jQuery。

3.2.1 下載jQuery

jQuery是一個(gè)開(kāi)源的腳本庫(kù)，我們可以從它的官方網(wǎng)站（http://jquery.com）中下載。下面介紹具體的下載步驟。

（1）在瀏覽器的地址欄中輸入http://jquery.com，按Enter鍵，將進(jìn)入到j(luò)Query官方網(wǎng)站的首頁(yè)，如圖3.4所示。

圖3.4 jQuery官方網(wǎng)站的首頁(yè)

（2）在jQuery官方網(wǎng)站的首頁(yè)中，可以下載所需要的jQuery庫(kù)，本書(shū)使用jQuery1.11.1版本。單擊網(wǎng)站首頁(yè)的Download jQuery按鈕，在彈出的頁(yè)面中單擊Download the compressed, production jQuery1.11.1超鏈接，選擇“另存為”，將彈出如圖3.5所示的對(duì)話框。

圖3.5 下載jquery 1.11.1.min.js

（3）單擊“保存”按鈕，將jquery庫(kù)下載到本地計(jì)算機(jī)上。下載后的文件名為jquery-1.11.1.min.js。

3.2.2 配置jQuery

將jQuery庫(kù)下載到本地計(jì)算機(jī)后，還需要在項(xiàng)目中配置jQuery庫(kù)。即將下載后的文件放置到項(xiàng)目的指定文件夾中，通常放在js文件夾中，然后在需要應(yīng)用jQuery的頁(yè)面中使用下面的語(yǔ)句，將其引用到文件中。

        <script language="javascript" src="js/jquery-1.11.1.min.js"></script>
        或者
        <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

注意

引用jQuery的<script>標(biāo)簽，必須放在所有的自定義腳本文件的<script>之前，否則在自定義的腳本代碼中找不到j(luò)Query腳本庫(kù)。

3.2.3 我的第一個(gè)jQuery腳本

了解了如何下載和配置jQuery之后，接下來(lái)通過(guò)一個(gè)簡(jiǎn)單的實(shí)例嘗試編寫(xiě)jQuery腳本。

【例3.1】應(yīng)用jQuery彈出一個(gè)提示對(duì)話框。（實(shí)例位置：光盤(pán)\TM\sl\3\1）

（1）創(chuàng)建一個(gè)名稱(chēng)為js的文件夾，并將jquery-1.11.1.min.js復(fù)制到該文件夾中。

（2）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中引用jQuery庫(kù)文件，關(guān)鍵代碼如下：

        <script language="javascript" src="js/jquery-1.11.1.min.js"></script>

（3）編寫(xiě)jQuery代碼，實(shí)現(xiàn)在頁(yè)面載入完畢后，彈出一個(gè)提示對(duì)話框，具體代碼如下：

        <script>
        $(document).ready(function(){
            alert("我的第一個(gè)jQuery腳本！");
        });
        </script>

圖3.6 彈出的提示對(duì)話框

實(shí)際上，上面的代碼還可以更簡(jiǎn)單，也就是將$(document).ready用“$”符代替，替換后的代碼如下：

        <script>
        $(function(){
            alert("我的第一個(gè)jQuery腳本！");
        });
        </script>

運(yùn)行index.html，將彈出如圖3.6所示的對(duì)話框。

熟悉JavaScript的讀者知道，要實(shí)現(xiàn)例3.1的效果，還可以通過(guò)下面的代碼實(shí)現(xiàn)：

        <script>
        window.onload=function(){
            alert("我的第一個(gè)jQuery腳本！");
        }
        </script>

讀者可能會(huì)問(wèn)，這兩種方法有什么區(qū)別，究竟哪種方法更好呢？下面介紹一下二者的區(qū)別。window.load()方法是在頁(yè)面所有的內(nèi)容都載入完畢后才會(huì)執(zhí)行的，例如圖片、橫幅等。而$(document).ready()方法則是在DOM元素載入就緒后執(zhí)行。在一個(gè)頁(yè)面中可以放置多個(gè)$(document).ready()方法，而window.onload()方法在頁(yè)面上只允許放置一個(gè)（常規(guī)情況）。這兩個(gè)方法可以同時(shí)在頁(yè)面中執(zhí)行，兩者并不矛盾。不過(guò)，通過(guò)上述描述可以知道，$(document).ready()方法比window.onload()方法載入速度更快。

官术网_书友最值得收藏!

jQuery從入門(mén)到精通 （軟件開(kāi)發(fā)視頻大講堂）

3.2 jQuery下載與配置

3.2.1 下載jQuery

3.2.2 配置jQuery

3.2.3 我的第一個(gè)jQuery腳本

jQuery從入門(mén)到精通（軟件開(kāi)發(fā)視頻大講堂）