DOM 操作 —— jQuery 通過使用被稱為 Sizzle 的跨瀏覽器的開源選擇器引擎，使得選擇 DOM 元素，遍歷它們以及修改它們的內容變得容易。
事件處理 —— jQuery 提供一種優(yōu)雅的方式來捕獲各種事件，如用戶點擊一個鏈接，不需要使用事件處理程序來編寫雜亂的 HTML 代碼。
AJAX 支持 —— jQuery 能夠為你使用 AJAX 技術開發(fā)響應的和功能豐富的網站提供很多幫助。
動畫 —— jQuery 有很多內置的動畫效果，你可以在你的網站中使用它們。
輕量級 —— jQuery 是非常輕量級的庫 —— 大約 19 kb 大小(壓縮格式)。
跨瀏覽器支持 —— jQuery 跨瀏覽器支持，可以在 IE 6.0 +，F(xiàn)F 2.0 +，Safari 3.0 +，Chrome，Opera 9.0 + 瀏覽器上很好的工作。
最新的技術 —— jQuery 支持 CSS3 選擇器和基本的 XPath 語法。

如何使用 jQuery ？

有兩種方式來使用 jQuery。

本地安裝 —— 你可以在本地計算機上下載 jQuery 庫，并把它包括在你的 HTML 代碼中。
基于 CDN 版本 —— 你可以直接從內容分發(fā)網絡(CDN)將 jQuery 庫包括進你的 HTML 代碼中。

本地安裝

進入 https://jquery.com/download/ 網頁來下載最新的可用的版本。
現(xiàn)在下載 jquery-2.1.3.min.js 文件到你的網站目錄中，如 /jquery。

示例

現(xiàn)在你可以把 jQuery 庫包括進你的 HTML 文件中，如下所示 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript"  src="/jquery/jquery-2.1.3.min.js"></script>

      <script type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });
      </script>

   </head>

   <body>

      <h1>Hello</h1>

   </body>
</html>

這將產生如下所示結果 ——

http://wiki.jikexueyuan.com/project/jquery/images/ov-jt-1.png" alt="" />

基于 CDN 版本

你可以直接從內容分發(fā)網絡(CDN)將 jQuery 庫包括進你的 HTML 代碼中。谷歌和微軟為最新的版本提供了內容發(fā)布。

在本教程中，我們使用的是 Google CDN 版本庫。

示例

現(xiàn)在讓我們使用來自 Google CDN 的 jQuery 庫重新編寫上述例子。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });
      </script>
   </head>

   <body>

      <h1>Hello</h1>

   </body>
</html>

這會產生如下所示的結果 ——

http://wiki.jikexueyuan.com/project/jquery/images/ov-jt-2.png" alt="" />

如何調用一個 jQuery 庫函數(shù)？

正如我們所做的任何事一樣，在使用 jQuery 讀取或操作文檔對象模型(DOM)，我們需要確保當 DOM 準備好后要盡快的開始添加事件等。

如果你想使一個事件在你的頁面上工作，你應該在 $(document).ready() 函數(shù)內部調用它。在 DOM 下載完成后以及頁面內容下載前，該函數(shù)內部的所有事物都將要下載。

要想實現(xiàn)這一功能，我們?yōu)槲臋n注冊了一個已經準備好的事件，如下所示 ——

$(document).ready(function() {
   // do stuff when DOM is ready
});

要想調用上述任何 jQuery 庫函數(shù)，使用 HTML 腳本標簽，如下所示 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>

   </head>

   <body>
      <div id="mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>

</html>

這將產生如下所示結果 ——

http://wiki.jikexueyuan.com/project/jquery/images/ov-jt-3.png" alt="" />

如何使用自定義腳本？

最好在自定義的 JavaScript 文件：custom.js 中編寫我們的自定義代碼，如下所示 ——

/* Filename: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Hello, world!");
   });
});

現(xiàn)在我們可以把 custom.js 文件包括到 HTML 文件中，如下所示 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type="text/javascript" src="/jquery/custom.js"></script>
   </head>

   <body>
      <div id="mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>

</html>

這將產生如下所示結果 ——

http://wiki.jikexueyuan.com/project/jquery/images/ov-jt-4.png" alt="" />

使用多個庫 ——

你可以同時使用多個庫而且每個庫之間不會發(fā)生沖突。例如你可以同時使用 jQuery 和 MooTool javascript 庫。

更多細節(jié)，你可以查看 jQuery noConflict 方法。

接下來的內容

即使你對上述示例不是很理解的話，也不要太擔心。在隨后的章節(jié)中，你會很快掌握它們。

下一節(jié)將講解一些傳統(tǒng)的 JavaScript 的基本概念。

上一篇：jQuery - 影響下一篇：jQuery - DOM 遍歷

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

jQuery - 概述

什么是 jQuery？

如何使用 jQuery ？

本地安裝

示例

基于 CDN 版本

示例

如何調用一個 jQuery 庫函數(shù)？

如何使用自定義腳本？

使用多個庫 ——

接下來的內容

什么是 jQuery？

如何調用一個 jQuery 庫函數(shù)？