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"
可以忽略掉
完。