jQuery 安裝


jQuery 安裝

網頁中加入 jQuery

可以透過多種方法在網頁中加入 jQuery。 您可以使用以下方法：

  • 從jquery.com 下載jQuery 函式庫
  • 從CDN 載入jQuery, 如從Google 載入jQuery

#下載jQuery

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

  • Production version - 用於實際的網站中，已精簡和壓縮。
  • Development version - 用於測試和開發（未壓縮，是可讀的程式碼）

以上兩個版本都可以從 jquery.com 下載。

jQuery 函式庫是一個JavaScript 文件，您可以使用HTML 的<script> 標籤來引用它：

<head>
<script src="jquery- 1.10.2.min.js"></script>
</head>

提示： 將下載的檔案放在網頁的相同目錄下，就可以使用jQuery。

lamp您是否很疑惑為什麼我們沒有在<script> 標籤中使用type="text/ javascript" ？

在 HTML5 中，不必那麼做了。 JavaScript 是 HTML5 以及所有現代瀏覽器中的預設腳本語言！

替代方案

如果您不希望下載並存放 jQuery，那麼也可以透過 CDN（內容分發網路） 引用它。

百度、又拍雲端、新浪、Google和微軟的伺服器都存有 jQuery 。

如果你的網站使用者是國內的，建議使用百度、又拍雲、新浪等國內CDN地址，如果你網站使用者是國外的可以使用Google和微軟。

註：本站實例皆採用百度 jQuery CDN函式庫。

如需從百度、又拍雲、新浪、Google或微軟引用jQuery，請使用以下程式碼之一：

Baidu CDN:

實例

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

執行實例»

#點擊"運行實例" 按鈕查看線上實例

又拍雲CDN:

實例

<!DOCTYPE html>
<html>
<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

##執行實例» 點擊"運行實例"按鈕查看線上實例

新浪CDN:


##實例
##
<!DOCTYPE html>
<html>
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

執行實例»

點擊"執行實例"按鈕可查看線上實例

Google CDN:


#實例

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

執行實例»

#點擊"運行實例" 按鈕查看線上實例



Microsoft CDN:

實例

#
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例


lamp透過Google CDN 來獲得最新可用的版本：不大推薦使用Google CDN來取得版本，因為Google產品在中國很不穩定。 如果您觀察上什麼的 Google URL - 在 URL 中規定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的jQuery，也可以從版本字串的結尾（例如本例1.8）刪除一個數字，Google會返回1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩下第一個數字，那麼Google會回到1 系列中最新的可用版本（從1.1.0 到1.9.9）。


lamp使用百度、再拍雲端、新浪、Google或微軟的jQuery，有一個很大的優勢：

許多用戶在造訪其他網站時，已經從百度、又拍雲端、新浪、Google或微軟載入jQuery 。所有結果是，當他們造訪您的網站時，會從快取中載入 jQuery，這樣可以減少載入時間。同時，大多數 CDN 都可以確保當使用者向其要求檔案時，會從離使用者最近的伺服器上回傳回應，這樣也可以提高載入速度。
#