[jQuery]jQuery的安裝

jQuery是一個JavaScript的函數庫,利用它我們可以便捷地使用一些javascript實現比較複雜的操作。
下面介紹三種引用jQuery庫的方法

本地直接下載

我們可以訪問 http://jquery.com/download/ 進行下載

有兩個版本的 jQuery 可供下載:

  • Production version - 用於實際的網站中,已被精簡和壓縮。
  • Development version - 用於測試和開發(未壓縮,是可讀的代碼)

在這裏我們以未壓縮的代碼爲例,將其下載到指定的目錄下:

這裏寫圖片描述

在html文件裏引用下載好的jQuery,代碼如下:

<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert('jQuery已經成功調用');
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>

效果圖如下,證明已經成功調用

這裏寫圖片描述

npm間接下載

首先打開終端(Terminal)cd到測試的文件夾下

這裏寫圖片描述

執行

cnpm install jquery

這裏寫圖片描述

打開Finder可以發現有一個名爲node_modules的文件夾生成

這裏寫圖片描述

那麼,具體下載下來的jQuery文件在哪裏呢?讓我們繼續尋找

這裏寫圖片描述

如上圖 我們下載好的jQuery.js放置在node_modules/jquery/dist下

由此,把測試代碼改成

<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>

經檢驗,可以成功調用jQuery.js

內容分發網絡

各大科技公司的服務器都存有jQuery,我們可以通過CDN引用它,許多用戶在訪問其他站點時,已經用CDN加載過 jQuery。所有結果是,當他們訪問您的站點時,會從緩存中加載 jQuery,這樣可以減少加載時間。同時,大多數 CDN 都可以確保當用戶向其請求文件時,會從離用戶最近的服務器上返回響應,這樣也可以提高加載速度。

當前可以的路徑有:

Google:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js(國內慎用)

Microsoft:
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js(國內慎用)

sina:
http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js

code.jquery.com:
http://code.jquery.com/jquery-1.11.1.min.js

相應的引用代碼換成:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

經檢驗,該方法可以引用jQuery庫

注:由於JavaScript 是 HTML5 以及所有現代瀏覽器中的默認腳本語言,所以方法一和二引用語句裏的

type="text/javascript"

可以忽略掉

完。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章