jQuery 快速指南

什麼是 jQuery？

jQuery 是一個由 John Resig 於 2006 年建立的快速且簡潔的 JavaScript 庫，它有一個很棒的座右銘：寫得少，做得多。jQuery 簡化了 HTML 文件遍歷、事件處理、動畫和 Ajax 互動，從而加快了 Web 開發速度。jQuery 是一個旨在透過編寫更少程式碼來簡化各種任務的 JavaScript 工具包。以下是 jQuery 支援的重要核心功能列表：

DOM 操作 - jQuery 使選擇 DOM 元素、遍歷它們以及使用名為Sizzle的跨瀏覽器開源選擇器引擎修改其內容變得容易。
事件處理 - jQuery 提供了一種優雅的方式來捕獲各種事件，例如使用者點選連結，而無需在 HTML 程式碼本身中使用事件處理程式。
AJAX 支援 - jQuery 可以幫助您使用 AJAX 技術開發響應式且功能豐富的網站。
動畫 - jQuery 帶有大量內建的動畫效果，您可以在您的網站中使用它們。
輕量級 - jQuery 是一個非常輕量級的庫 - 大約 19KB（壓縮並 gzip 壓縮）。
跨瀏覽器支援 - jQuery 具有跨瀏覽器支援，並在 IE 6.0+、FF 2.0+、Safari 3.0+、Chrome 和 Opera 9.0+ 中執行良好。
最新技術 - jQuery 支援 CSS3 選擇器和基本 XPath 語法。

如何使用 jQuery？

有兩種方法可以使用 jQuery。

本地安裝 - 您可以將 jQuery 庫下載到本地機器上，並將其包含在 HTML 程式碼中。
基於 CDN 的版本 - 您可以直接從內容分發網路 (CDN) 將 jQuery 庫包含到 HTML 程式碼中。

本地安裝

訪問https://jquery.com/download/下載最新的可用版本。
現在將下載的jquery-2.1.3.min.js檔案放在網站目錄中，例如 /jquery。

示例

現在您可以按如下方式在 HTML 檔案中包含jquery庫：

<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>

這將產生以下結果：

基於 CDN 的版本

您可以直接從內容分發網路 (CDN) 將 jQuery 庫包含到 HTML 程式碼中。Google 和 Microsoft 為最新版本提供內容交付。

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

示例

現在讓我們使用來自 Google CDN 的 jQuery 庫重寫上面的示例。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

這將產生以下結果：

如何呼叫 jQuery 庫函式？

由於在使用 jQuery 時，我們所做的幾乎所有事情都是讀取或操作文件物件模型 (DOM)，因此我們需要確保在 DOM 準備好後立即開始新增事件等操作。

如果您希望某個事件在頁面上生效，則應在 $(document).ready() 函式內呼叫它。其中的所有內容將在 DOM 載入完成後以及頁面內容載入之前載入。

為此，我們為文件註冊一個 ready 事件，如下所示：

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

要呼叫任何 jQuery 庫函式，請使用 HTML 指令碼標籤，如下所示：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.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>

這將產生以下結果：

如何使用自定義指令碼？

最好將我們的自定義程式碼寫入自定義 JavaScript 檔案：custom.js，如下所示：

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

現在，我們可以按如下方式在 HTML 檔案中包含custom.js檔案：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.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>

這將產生以下結果：

使用多個庫

您可以將多個庫一起使用而不會相互衝突。例如，您可以一起使用 jQuery 和 MooTool javascript 庫。您可以檢視jQuery noConflict方法以瞭解更多詳細資訊。

接下來是什麼？

如果您不理解上面的示例，請不要太擔心。您將在後續章節中很快掌握它們。

下一章將嘗試涵蓋一些來自傳統 JavaScript 的基本概念。

jQuery - 基礎

jQuery 是一個使用 JavaScript 功能構建的框架。因此，您可以使用 JavaScript 中所有可用的函式和其他功能。本章將解釋最基本的概念，但這些概念在 jQuery 中經常使用。

字串

JavaScript 中的字串是一個不可變的物件，它包含零個、一個或多個字元。以下是 JavaScript 字串的有效示例：

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

數字

JavaScript 中的數字是雙精度 64 位格式 IEEE 754 值。它們是不可變的，就像字串一樣。以下是 JavaScript 數字的有效示例：

5350
120.27
0.26

布林值

JavaScript 中的布林值可以是true或false。如果數字為零，則預設為 false。如果空字串預設為 false。

以下是 JavaScript 布林值的有效示例：

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

物件

JavaScript 很好地支援物件概念。您可以使用物件文字建立物件，如下所示：

var emp = {
   name: "Zara",
   age: 10
};

您可以使用點表示法編寫和讀取物件的屬性，如下所示：

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

陣列

您可以使用陣列文字定義陣列，如下所示：

var x = [];
var y = [1, 2, 3, 4, 5];

陣列具有一個length屬性，該屬性對於迭代很有用：

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

函式

JavaScript 中的函式可以是命名函式或匿名函式。可以使用function關鍵字定義命名函式，如下所示：

function named(){
   // do some stuff here
}

匿名函式的定義方式與普通函式類似，但它沒有名稱。

匿名函式可以分配給變數或傳遞給方法，如下所示。

var handler = function (){
   // do some stuff here
}

JQuery 非常頻繁地使用匿名函式，如下所示：

$(document).ready(function(){
   // do some stuff here
});

引數

JavaScript 變數arguments是一種陣列，它具有length屬性。以下示例很好地解釋了它：

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

arguments 物件還具有一個callee屬性，它引用您所在的函式。例如：

function func() {
   return arguments.callee; 
}

func();                // ==> func

上下文

JavaScript 著名的關鍵字this始終引用當前上下文。在函式內，this上下文可能會發生變化，具體取決於函式的呼叫方式：

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

您可以使用函式內建方法call()和apply()方法為函式呼叫指定上下文。

它們之間的區別在於它們傳遞引數的方式。call 透過引數將所有引數傳遞給函式，而 apply 接受陣列作為引數。

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

作用域

變數的作用域是指定義它的程式區域。JavaScript 變數將只有兩個作用域。

全域性變數 - 全域性變數具有全域性作用域，這意味著它在 JavaScript 程式碼中的任何地方都已定義。
區域性變數 - 區域性變數僅在其定義的函式內可見。函式引數始終是該函式的區域性變數。

在函式體內部，區域性變數優先於具有相同名稱的全域性變數：

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

回撥

回撥是一個普通的 JavaScript 函式，作為引數或選項傳遞給某些方法。一些回撥只是事件，呼叫它們是為了讓使用者有機會在觸發特定狀態時做出反應。

例如，jQuery 的事件系統在任何地方都使用此類回撥：

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

大多數回撥都提供引數和上下文。在事件處理程式示例中，回撥被呼叫並帶有一個引數 Event。

某些回撥需要返回某些內容，其他回撥使返回值可選。為了防止表單提交，提交事件處理程式可以返回 false，如下所示：

$("#myform").submit(function() {
   return false;
});

閉包

每當從某個內部作用域訪問在當前作用域外部定義的變數時，就會建立閉包。

以下示例顯示了變數counter如何在 create、increment 和 print 函式內可見，但在它們外部不可見：

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

此模式允許您建立具有方法的物件，這些方法對外部世界不可見的資料進行操作。需要注意的是，資料隱藏是面向物件程式設計的基礎。

代理模式

代理是一個可以用來控制對另一個物件訪問的物件。它實現了與這個其他物件相同的介面，並將任何方法呼叫傳遞給它。這個其他物件通常被稱為真實主題。

可以在真實主題的替代位置例項化代理，並允許遠端訪問它。我們可以將 jQuery 的 setArray 方法儲存在閉包中並覆蓋它，如下所示：

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

上面將它的程式碼包裝在一個函式中以隱藏proxied變數。然後，代理記錄對該方法的所有呼叫並將呼叫委託給原始方法。使用apply(this, arguments)保證呼叫者無法注意到原始方法和代理方法之間的區別。

內建函式

JavaScript 帶有一組有用的內建函式。這些方法可以用來操作字串、數字和日期。

以下是重要的 JavaScript 函式 -

序號	方法及描述
1	charAt() 返回指定索引處的字元。
2	concat() 組合兩個字串的文字並返回一個新字串。
3	forEach() 為陣列中的每個元素呼叫一個函式。
4	indexOf() 返回在呼叫 String 物件中指定值的第一次出現的位置，如果未找到則返回 -1。
5	length() 返回字串的長度。
6	pop() 從陣列中刪除最後一個元素並返回該元素。
7	push() 向陣列的末尾新增一個或多個元素，並返回陣列的新長度。
8	reverse() 反轉陣列元素的順序 - 第一個元素成為最後一個，最後一個元素成為第一個。
9	sort() 對陣列的元素進行排序。
10	substr() 返回字串中從指定位置開始的指定數量的字元。
11	toLowerCase() 返回呼叫字串值轉換為小寫。
12	toString() 返回數字值的字串表示形式。
13	toUpperCase() 返回呼叫字串值轉換為大寫。

文件物件模型

文件物件模型是 HTML 各種元素的樹狀結構，如下所示 -

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

這將產生以下結果：

以下是關於上述樹狀結構的重要說明 -

<html> 是所有其他元素的祖先；換句話說，所有其他元素都是 <html> 的後代。
<head> 和 <body> 元素不僅是後代，而且還是 <html> 的子元素。
同樣，除了是 <head> 和 <body> 的祖先之外，<html> 也是它們的父元素。
<p> 元素是 <div> 的子元素（和後代），<body> 和 <html> 的後代，以及彼此的兄弟 <p> 元素。

在學習 jQuery 概念時，瞭解 DOM 將會有所幫助，如果您不瞭解 DOM，我建議您閱讀我們關於 DOM 教程的簡單教程。

jQuery - 選擇器

jQuery 庫利用層疊樣式表 (CSS) 選擇器的強大功能，使我們能夠快速輕鬆地訪問文件物件模型 (DOM) 中的元素或元素組。

jQuery 選擇器是一個函式，它利用表示式根據給定條件從 DOM 中查詢匹配的元素。簡單來說，選擇器用於使用 jQuery 選擇一個或多個 HTML 元素。一旦選擇了一個元素，我們就可以對該選定的元素執行各種操作。

$( ) 工廠函式

jQuery 選擇器以美元符號和括號開頭 - $( )。工廠函式 $( ) 在選擇給定文件中的元素時使用了以下三個構建塊 -

序號	選擇器及描述
1	標籤名稱表示 DOM 中可用的標籤名稱。例如 $('p') 選擇文件中所有段落 <p>。
2	標籤 ID 表示 DOM 中具有給定 ID 的可用標籤。例如 $('#some-id') 選擇文件中 ID 為 some-id 的單個元素。
3	標籤類表示 DOM 中具有給定類的可用標籤。例如 $('.some-class') 選擇文件中所有類為 some-class 的元素。

序號

選擇器及描述

標籤名稱

表示 DOM 中可用的標籤名稱。例如 $('p') 選擇文件中所有段落 <p>。

標籤 ID

表示 DOM 中具有給定 ID 的可用標籤。例如 $('#some-id') 選擇文件中 ID 為 some-id 的單個元素。

標籤類

表示 DOM 中具有給定類的可用標籤。例如 $('.some-class') 選擇文件中所有類為 some-class 的元素。

以上所有專案都可以單獨使用，也可以與其他選擇器結合使用。除了某些調整之外，所有 jQuery 選擇器都基於相同的原理。

注意 - 工廠函式 $( ) 是 jQuery( ) 函式的同義詞。因此，如果您正在使用任何其他 JavaScript 庫，其中 $ 符號與其他內容衝突，則可以將 $ 符號替換為 jQuery 名稱，並且可以使用函式 jQuery( ) 代替 $( )。

示例

以下是一個使用標籤選擇器的簡單示例。這將選擇所有標籤名為 p 的元素。

線上演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

這將產生以下結果：

如何使用選擇器？

選擇器非常有用，在使用 jQuery 的每個步驟中都需要它們。它們從您的 HTML 文件中獲取您想要的精確元素。

下表列出了一些基本選擇器並用示例進行說明。

序號	選擇器及描述
1	名稱選擇與給定元素名稱匹配的所有元素。
2	#ID 選擇與給定 ID 匹配的單個元素。
3	.類選擇與給定類匹配的所有元素。
4	通用 (*) 選擇 DOM 中所有可用的元素。
5	多個元素 E、F、G 選擇所有指定選擇器 E、F 或 G 的組合結果。

選擇器示例

類似於以上語法和示例，以下示例將使您瞭解如何使用不同型別的其他有用選擇器 -

這裡，您有不同型別的其他有用選擇器 -

序號	選擇器及描述
1	*$('')** 此選擇器選擇文件中的所有元素。
2	*$("p > ")** 此選擇器選擇段落元素的子元素的所有元素。
3	$("#specialID") 此選擇器函式獲取 id="specialID" 的元素。
4	$(".specialClass") 此選擇器獲取所有具有 specialClass 類的元素。
5	$("li:not(.myclass)") 選擇與 <li> 匹配的所有元素，這些元素不具有類 = "myclass"。
6	$("a#specialID.specialClass") 此選擇器匹配具有 specialID id 和 specialClass 類的連結。
7	$("p a.specialClass") 此選擇器匹配在 <p> 元素內宣告的類為 specialClass 的連結。
8	$("ul li:first") 此選擇器僅獲取 <ul> 的第一個 <li> 元素。
9	$("#container p") 選擇與 <p> 匹配的所有元素，這些元素是 id 為 container 的元素的後代。
10	$("li > ul") 選擇與 <ul> 匹配的所有元素，這些元素是與 <li> 匹配的元素的子元素
11	$("strong + em") 選擇與 <em> 匹配的所有元素，這些元素緊跟在與 <strong> 匹配的兄弟元素之後。
12	$("p ~ ul") 選擇與 <ul> 匹配的所有元素，這些元素位於與 <p> 匹配的兄弟元素之後。
13	$("code, em, strong") 選擇與 <code> 或 <em> 或 <strong> 匹配的所有元素。
14	$("p strong, .myclass") 選擇與 <strong> 匹配的所有元素，這些元素是與 <p> 匹配的元素的後代，以及所有具有 myclass 類的元素。
15	$(":empty") 選擇沒有子元素的所有元素。
16	$("p:empty") 選擇與 <p> 匹配的所有元素，這些元素沒有子元素。
17	$("div[p]") 選擇與 <div> 匹配的所有元素，這些元素包含與 <p> 匹配的元素。
18	$("p[.myclass]") 選擇與 <p> 匹配的所有元素，這些元素包含類為 myclass 的元素。
19	$("a[@rel]") 選擇與 <a> 匹配的所有元素，這些元素具有 rel 屬性。
20	$("input[@name = myname]") 選擇與 <input> 匹配的所有元素，這些元素的 name 值完全等於 myname。
21	$("input[@name^=myname]") 選擇與 <input> 匹配的所有元素，這些元素的 name 值以 myname 開頭。
22	$("a[@rel$=self]") 選擇與 <a> 匹配的所有元素，這些元素的 rel 屬性值以 self 結尾。
23	*$("a[@href=domain.com]")** 選擇與 <a> 匹配的所有元素，這些元素的 href 值包含 domain.com。
24	$("li:even") 選擇與 <li> 匹配的所有元素，這些元素具有偶數索引值。
25	$("tr:odd") 選擇與 <tr> 匹配的所有元素，這些元素具有奇數索引值。
26	$("li:first") 選擇第一個 <li> 元素。
27	$("li:last") 選擇最後一個 <li> 元素。
28	$("li:visible") 選擇與 <li> 匹配的所有可見元素。
29	$("li:hidden") 選擇與 <li> 匹配的所有隱藏元素。
30	$(":radio") 選擇表單中的所有單選按鈕。
31	$(":checked") 選擇表單中的所有選中複選框。
32	$(":input") 僅選擇表單元素（input、select、textarea、button）。
33	$(":text") 僅選擇文字元素 (input[type = text])。
34	$("li:eq(2)") 選擇第三個 <li> 元素。
35	$("li:eq(4)") 選擇第五個 <li> 元素。
36	$("li:lt(2)") 選擇第三個 <li> 元素之前的 <li> 元素的所有元素；換句話說，前兩個 <li> 元素。
37	$("p:lt(3)") 選擇第四個 <p> 元素之前的 <p> 元素的所有元素；換句話說，前三個 <p> 元素。
38	$("li:gt(1)") 選擇第二個 <li> 元素之後的 <li> 元素的所有元素。
39	$("p:gt(2)") 選擇第三個 <p> 元素之後的 <p> 元素的所有元素。
40	$("div/p") 選擇與 <p> 匹配的所有元素，這些元素是與 <div> 匹配的元素的子元素。
41	$("div//code") 選擇與 <code> 匹配的所有元素，這些元素是與 <div> 匹配的元素的後代。
42	$("//p//a") 選擇與 <a> 匹配的所有元素，這些元素是與 <p> 匹配的元素的後代
43	$("li:first-child") 選擇與 <li> 匹配的所有元素，這些元素是其父元素的第一個子元素。
44	$("li:last-child") 選擇與 <li> 匹配的所有元素，這些元素是其父元素的最後一個子元素。
45	$(":parent") 選擇所有作為另一個元素（包括文字）父元素的元素。
46	$("li:contains(second)") 選擇與 <li> 匹配的所有元素，這些元素包含文字 second。

您可以以通用方式將以上所有選擇器與任何 HTML/XML 元素一起使用。例如，如果選擇器 $("li:first") 對 <li> 元素有效，則 $("p:first") 也對 <p> 元素有效。

jQuery - 屬性

在 DOM 元素方面，我們可以操縱的一些最基本元件是分配給這些元素的屬性和特性。

大多數這些屬性透過 JavaScript 作為 DOM 節點屬性可用。一些更常見的屬性是 -

className
tagName
id
href
title
rel
src

考慮以下影像元素的 HTML 標記 -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

在此元素的標記中，標籤名稱為 img，id、src、alt、class 和 title 的標記表示元素的屬性，每個屬性都包含名稱和值。

jQuery 為我們提供了輕鬆操作元素屬性的方法，併為我們提供了對元素的訪問許可權，以便我們還可以更改其屬性。

獲取屬性值

attr( ) 方法可用於從匹配集中第一個元素中獲取屬性的值，或將屬性值設定為所有匹配的元素。

示例

以下是一個簡單的示例，它獲取 <em> 標籤的 title 屬性並將 <div id = "divid"> 的值設定為相同的值 -

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

這將產生以下結果：

設定屬性值

attr(name, value) 方法可以用來使用傳遞的值將命名屬性設定到包裝集中所有元素上。

示例

下面是一個簡單的示例，它將影像標籤的src屬性設定為正確的路徑：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://tutorialspoint.tw" />
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

這將產生以下結果：

應用樣式

addClass( classes ) 方法可以用來將定義的樣式表應用到所有匹配的元素上。您可以用空格分隔多個類。

示例

下面是一個簡單的示例，它設定段落<p>標籤的class屬性：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

這將產生以下結果：

屬性方法

下表列出了一些您可以用來操作屬性和特性的有用方法：

序號	方法 & 描述
1	attr( properties ) 將鍵/值物件作為屬性設定為所有匹配的元素。
2	attr( key, fn ) 將單個屬性設定為計算值，應用於所有匹配的元素。
3	removeAttr( name ) 從每個匹配的元素中移除屬性。
4	hasClass( class ) 如果指定的類存在於匹配元素集中至少一個元素上，則返回 true。
5	removeClass( class ) 從匹配元素集中移除所有或指定的類。
6	toggleClass( class ) 如果指定的類不存在則新增，如果存在則移除。
7	html( ) 獲取第一個匹配元素的 HTML 內容 (innerHTML)。
8	html( val ) 設定每個匹配元素的 HTML 內容。
9	text( ) 獲取所有匹配元素的組合文字內容。
10	text( val ) 設定所有匹配元素的文字內容。
11	val( ) 獲取第一個匹配元素的輸入值。
12	val( val ) 如果它被呼叫在<input>上，則設定每個匹配元素的值屬性，但如果它被呼叫在<select>上並帶有傳遞的<option>值，則傳遞的選項將被選中，如果它被呼叫在複選框或單選按鈕上，則所有匹配的複選框和單選按鈕將被選中。

示例

類似於上述語法和示例，以下示例將幫助您瞭解如何在不同情況下使用各種屬性方法：

以下是不同情況下屬性方法的完整列表：

序號	選擇器及描述
1	$("#myID").attr("custom") 這將返回與 ID myID 匹配的第一個元素的屬性custom的值。
2	$("img").attr("alt", "Sample Image") 這將所有影像的alt屬性設定為新值“Sample Image”。
3	$("input").attr({ value: "", title: "Please enter a value" }); 將所有<input>元素的值設定為空字串，並將jQuery示例設定為字串Please enter a value。
4	$("a[href^=https://]").attr("target","_blank") 選擇所有 href 屬性以https://開頭的連結，並將它們的 target 屬性設定為_blank。
5	$("a").removeAttr("target") 這將移除所有連結的target屬性。
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); 這將在點選提交按鈕時將 disabled 屬性修改為值“disabled”。
7	$("p:last").hasClass("selected") 如果最後一個<p>標籤具有關聯的類selected，則返回 true。
8	$("p").text() 返回包含所有匹配的<p>元素的組合文字內容的字串。
9	$("p").text("<i>Hello World</i>") 這將設定“<I>Hello World</I>”作為匹配<p>元素的文字內容。
10	$("p").html() 這將返回所有匹配段落的 HTML 內容。
11	$("div").html("Hello World") 這將設定所有匹配的<div>的 HTML 內容為Hello World。
12	$("input:checkbox:checked").val() 獲取第一個選中的複選框的值。
13	$("input:radio[name=bar]:checked").val() 獲取一組單選按鈕中的第一個值。
14	$("button").val("Hello") 設定每個匹配的元素<button>的值屬性。
15	$("input").val("on") 這將選中所有值為“on”的單選或複選按鈕。
16	$("select").val("Orange") 這將在下拉框中選擇 Orange 選項，該下拉框包含 Orange、Mango 和 Banana 選項。
17	$("select").val("Orange", "Mango") 這將在下拉框中選擇 Orange 和 Mango 選項，該下拉框包含 Orange、Mango 和 Banana 選項。

jQuery - DOM 遍歷

jQuery 是一款非常強大的工具，它提供了各種 DOM 遍歷方法來幫助我們隨機以及按順序選擇文件中的元素。大多數 DOM 遍歷方法不會修改 jQuery 物件，它們用於根據給定條件從文件中篩選元素。

按索引查詢元素

考慮一個包含以下 HTML 內容的簡單文件：

即時演示

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

這將產生以下結果：

每個列表都有自己的索引，可以使用eq(index)方法直接定位，如下例所示。
每個子元素的索引都從零開始，因此，列表項 2可以透過使用$("li").eq(1)訪問，以此類推。

示例

下面是一個簡單的示例，它將顏色新增到第二個列表項。

即時演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

這將產生以下結果：

篩選元素

filter( selector ) 方法可以用來從匹配元素集中篩選出所有不匹配指定選擇器(s)的元素。selector可以使用任何選擇器語法編寫。

示例

下面是一個簡單的示例，它將顏色應用於與 middle 類關聯的列表：

即時演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

這將產生以下結果：

定位後代元素

find( selector ) 方法可以用來定位特定型別元素的所有後代元素。selector可以使用任何選擇器語法編寫。

示例

下面是一個示例，它選擇不同<p>元素內所有可用的<span>元素：

即時演示

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

這將產生以下結果：

JQuery DOM 篩選方法

下表列出了一些您可以用來從 DOM 元素列表中篩選各種元素的有用方法：

序號	方法及描述
1	eq( index ) 將匹配元素集減少到單個元素。
2	filter( selector ) 移除匹配元素集中所有不匹配指定選擇器(s)的元素。
3	filter( fn ) 移除匹配元素集中所有不匹配指定函式的元素。
4	is( selector ) 根據表示式檢查當前選擇，如果選擇中的至少一個元素符合給定的選擇器，則返回 true。
5	map( callback ) 將 jQuery 物件中的一組元素轉換為 jQuery 陣列中的另一組值（可能包含或不包含元素）。
6	not( selector ) 從匹配元素集中移除與指定選擇器匹配的元素。
7	slice( start, [end] ) 選擇匹配元素的子集。

JQuery DOM 遍歷方法

下表列出了一些其他有用的方法，您可以使用它們來定位 DOM 中的各種元素：

序號	方法 & 描述
1	add( selector ) 將由給定選擇器匹配的更多元素新增到匹配元素集中。
2	andSelf( ) 將之前選擇新增到當前選擇中。
3	children( [selector]) 獲取包含匹配元素集中每個元素的所有唯一直接子元素的元素集。
4	closest( selector ) 獲取包含與指定選擇器匹配的最接近的父元素的元素集，包括起始元素。
5	contents( ) 查詢匹配元素內所有子節點（包括文字節點），或者如果元素是 iframe，則查詢內容文件。
6	end( ) 恢復最近的“破壞性”操作，將匹配元素集更改為其先前狀態。
7	find( selector ) 搜尋與指定選擇器匹配的後代元素。
8	next( [selector] ) 獲取包含給定元素集中每個元素的唯一下一個兄弟元素的元素集。
9	nextAll( [selector] ) 查詢當前元素之後的所有兄弟元素。
10	offsetParent( ) 返回一個 jQuery 集合，其中包含第一個匹配元素的定位父元素。
11	parent( [selector] ) 獲取元素的直接父元素。如果在元素集上呼叫，則 parent 返回其唯一直接父元素的集合。
12	parents( [selector] ) 獲取包含匹配元素集的唯一祖先（根元素除外）的元素集。
13	prev( [selector] ) 獲取包含匹配元素集中每個元素的唯一前一個兄弟元素的元素集。
14	prevAll( [selector] ) 查詢當前元素前面的所有兄弟元素。
15	siblings( [selector] ) 獲取包含匹配元素集中每個元素的所有唯一兄弟元素的元素集。

jQuery - CSS 選擇器方法

jQuery 庫支援級聯樣式表 (CSS) 規範 1 到 3 中包含的幾乎所有選擇器，如全球資訊網聯盟網站上所述。

使用 jQuery 庫，開發人員可以增強其網站，而無需擔心瀏覽器及其版本，只要瀏覽器啟用了 JavaScript 即可。

大多數 jQuery CSS 方法不會修改 jQuery 物件的內容，它們用於在 DOM 元素上應用 CSS 屬性。

應用 CSS 屬性

使用 jQuery 方法css( PropertyName, PropertyValue )應用任何 CSS 屬性非常簡單。

以下是該方法的語法：

selector.css( PropertyName, PropertyValue );

您可以在此處將PropertyName作為 JavaScript 字串傳遞，並根據其值，PropertyValue可以是字串或整數。

示例

下面是一個示例，它將字型顏色新增到第二個列表項。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

這將產生以下結果：

應用多個 CSS 屬性

您可以使用單個 jQuery 方法CSS( {key1:val1, key2:val2....)應用多個 CSS 屬性。您可以在一次呼叫中應用任意數量的屬性。

以下是該方法的語法：

selector.css( {key1:val1, key2:val2....keyN:valN})

您可以在此處將 key 作為屬性傳遞，將 val 作為其值傳遞，如上所述。

示例

下面是一個示例，它將字型顏色和背景顏色新增到第二個列表項。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

這將產生以下結果：

設定元素寬度 & 高度

width( val ) 和height( val ) 方法可以分別用來設定任何元素的寬度和高度。

示例

下面是一個簡單的示例，它設定第一個分割槽的寬度，而其餘元素的寬度由樣式表設定

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

這將產生以下結果：

JQuery CSS 方法

下表列出了所有您可以用來處理 CSS 屬性的方法：

序號	方法及描述
1	css( name ) 返回第一個匹配元素上的樣式屬性。
2	css( name, value ) 將單個樣式屬性設定為所有匹配元素上的值。
3	css( properties ) 將鍵/值物件作為樣式屬性設定為所有匹配的元素。
4	height( val ) 設定每個匹配元素的 CSS 高度。
5	height( ) 獲取第一個匹配元素的當前計算（畫素）高度。
6	innerHeight( ) 獲取第一個匹配元素的內部高度（不包括邊框，包括填充）。
7	innerWidth( ) 獲取第一個匹配元素的內部寬度（不包括邊框，包括填充）。
8	offset( ) 獲取第一個匹配元素相對於文件的當前偏移量（以畫素為單位）。
9	offsetParent( ) 返回一個 jQuery 集合，其中包含第一個匹配元素的定位父元素。
10	outerHeight( [margin] ) 獲取第一個匹配元素的外部高度（預設情況下包括邊框和填充）。
11	outerWidth( [margin] ) 獲取第一個匹配元素的外部寬度（預設情況下包括邊框和填充）。
12	position( ) 獲取元素相對於其偏移父元素的頂部和左側位置。
13	scrollLeft( val ) 當傳入一個值時，水平滾動偏移量將設定為所有匹配元素上的該值。
14	scrollLeft( ) 獲取第一個匹配元素的水平滾動偏移量。
15	scrollTop( val ) 當傳入一個值時，垂直滾動偏移量將設定為所有匹配元素上的該值。
16	scrollTop( ) 獲取第一個匹配元素的垂直滾動偏移量。
17	width( val ) 設定每個匹配元素的 CSS width 屬性。
18	width( ) 獲取第一個匹配元素的當前計算後的畫素寬度。

jQuery - DOM 操作

JQuery 提供了以高效方式操作 DOM 的方法。您無需編寫大量程式碼即可修改任何元素屬性的值或從段落或 div 中提取 HTML 程式碼。

JQuery 提供了諸如 .attr()、.html() 和 .val() 等方法，這些方法充當 getter，檢索 DOM 元素的資訊以供後續使用。

內容操作

html( ) 方法獲取第一個匹配元素的 html 內容 (innerHTML)。

以下是該方法的語法：

selector.html( )

示例

以下是一個使用 .html() 和 .text(val) 方法的示例。這裡 .html() 從物件中檢索 HTML 內容，然後 .text( val ) 方法使用傳遞的引數設定物件的值：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

這將產生以下結果：

DOM 元素替換

您可以用指定的 HTML 或 DOM 元素替換整個 DOM 元素。replaceWith( content ) 方法很好地實現了這個目的。

以下是該方法的語法：

selector.replaceWith( content )

這裡 content 是您希望用來代替原始元素的內容。可以是 HTML 或簡單的文字。

示例

以下是一個將 div 元素替換為 "<h1>JQuery is Great </h1>" 的示例：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

這將產生以下結果：

刪除 DOM 元素

可能會有這樣一種情況，您希望從文件中刪除一個或多個 DOM 元素。JQuery 提供了兩種方法來處理這種情況。

empty( ) 方法刪除匹配元素集中的所有子節點，而 remove( expr ) 方法則從 DOM 中刪除所有匹配的元素。

以下是該方法的語法：

selector.remove( [ expr ])

or 

selector.empty( )

您可以傳遞可選引數 expr 來過濾要刪除的元素集。

示例

以下是一個在元素被點選時立即刪除它們的示例：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

這將產生以下結果：

插入 DOM 元素

可能會有這樣一種情況，您希望在現有文件中插入一個或多個新的 DOM 元素。JQuery 提供了各種方法，可以在不同位置插入元素。

after( content ) 方法在每個匹配元素之後插入內容，而 before( content ) 方法則在每個匹配元素之前插入內容。

以下是該方法的語法：

selector.after( content )

or

selector.before( content )

這裡 content 是您要插入的內容。可以是 HTML 或簡單的文字。

示例

以下是一個在被點選的元素之前插入 <div> 元素的示例：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

這將產生以下結果：

DOM 操作方法

下表列出了您可以用來操作 DOM 元素的所有方法：

序號	方法及描述
1	after( content ) 在每個匹配元素之後插入內容。
2	append( content ) 將內容追加到每個匹配元素的內部。
3	appendTo( selector ) 將所有匹配的元素追加到另一個指定的元素集中。
4	before( content ) 在每個匹配元素之前插入內容。
5	clone( bool ) 克隆匹配的 DOM 元素及其所有事件處理程式，並選擇克隆。
6	clone( ) 克隆匹配的 DOM 元素並選擇克隆。
7	empty( ) 刪除匹配元素集中的所有子節點。
8	html( val ) 設定每個匹配元素的 HTML 內容。
9	html( ) 獲取第一個匹配元素的 HTML 內容 (innerHTML)。
10	insertAfter( selector ) 將所有匹配的元素插入到另一個指定的元素集之後。
11	insertBefore( selector ) 將所有匹配的元素插入到另一個指定的元素集之前。
12	prepend( content ) 將內容前置到每個匹配元素的內部。
13	prependTo( selector ) 將所有匹配的元素前置到另一個指定的元素集中。
14	remove( expr ) 從 DOM 中移除所有匹配的元素。
15	replaceAll( selector ) 用匹配的元素替換指定選擇器匹配的元素。
16	replaceWith( content ) 用指定的 HTML 或 DOM 元素替換所有匹配的元素。
17	text( val ) 設定所有匹配元素的文字內容。
18	text( ) 獲取所有匹配元素的組合文字內容。
19	wrap( elem ) 用指定的元素包裹每個匹配的元素。
20	wrap( html ) 用指定的 HTML 內容包裹每個匹配的元素。
21	wrapAll( elem ) 將匹配集中所有元素包裹在一個單一的包裝元素中。
22	wrapAll( html ) 將匹配集中所有元素包裹在一個單一的包裝元素中。
23	wrapInner( elem ) 用 DOM 元素包裹每個匹配元素的內部子內容（包括文字節點）。
24	wrapInner( html ) 用 HTML 結構包裹每個匹配元素的內部子內容（包括文字節點）。

jQuery - 事件處理

我們可以透過使用事件來建立動態網頁。事件是 Web 應用程式可以檢測到的動作。

以下是一些事件示例：

滑鼠點選
網頁載入
滑鼠懸停在元素上
提交 HTML 表單
鍵盤上的按鍵等等。

當這些事件被觸發時，您可以使用自定義函式來對事件進行幾乎任何操作。這些自定義函式稱為事件處理程式。

繫結事件處理程式

使用 jQuery 事件模型，我們可以使用 bind() 方法在 DOM 元素上建立事件處理程式，如下所示：

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

此程式碼將使 div 元素響應 click 事件；此後，當用戶在此 div 內部單擊時，將顯示警報。

這將產生以下結果：

bind() 命令的完整語法如下：

selector.bind( eventType[, eventData], handler)

以下是引數的描述：

eventType - 包含 JavaScript 事件型別（如 click 或 submit）的字串。有關事件型別的完整列表，請參閱下一節。
eventData - 此可選引數是一個數據對映，它將傳遞給事件處理程式。
handler - 每當事件被觸發時要執行的函式。

移除事件處理程式

通常，一旦事件處理程式建立，它將在頁面生命週期的剩餘時間內保持有效。可能會有需要您移除事件處理程式的情況。

jQuery 提供了 unbind() 命令來移除現有的事件處理程式。unbind() 的語法如下：

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是引數的描述：

eventType - 包含 JavaScript 事件型別（如 click 或 submit）的字串。有關事件型別的完整列表，請參閱下一節。
handler - 如果提供，則標識要移除的特定偵聽器。

事件型別

以下是可以使用 JQuery 繫結的跨平臺且推薦的事件型別：

序號	事件型別和描述
1	blur 當元素失去焦點時發生。
2	change 當元素髮生變化時發生。
3	click 滑鼠點選時發生。
4	dblclick 滑鼠雙擊時發生。
5	error 載入或解除安裝等過程中發生錯誤時發生。
6	focus 當元素獲得焦點時發生。
7	keydown 按下鍵時發生。
8	keypress 按下並釋放鍵時發生。
9	keyup 釋放鍵時發生。
10	load 文件載入完成後發生。
11	mousedown 按下滑鼠按鈕時發生。
12	mouseenter 滑鼠進入元素區域時發生。
13	mouseleave 滑鼠離開元素區域時發生。
14	mousemove 滑鼠指標移動時發生。
15	mouseout 滑鼠指標移出元素時發生。
16	mouseover 滑鼠指標移到元素上時發生。
17	mouseup 釋放滑鼠按鈕時發生。
18	resize 視窗大小調整時發生。
19	scroll 視窗滾動時發生。
20	select 選中文字時發生。
21	submit 提交表單時發生。
22	unload 文件解除安裝時發生。

事件物件

回撥函式接受單個引數；當處理程式被呼叫時，JavaScript 事件物件將透過它傳遞。

事件物件通常是不必要的，並且引數會被省略，因為當處理程式繫結時通常有足夠的環境來準確地知道處理程式被觸發時需要做什麼，但是有一些屬性您需要訪問。

事件屬性

以下事件屬性/特性可用，並且可以以平臺無關的方式安全訪問：

序號	屬性和描述
1	altKey 如果在觸發事件時按下了 Alt 鍵，則設定為 true，否則設定為 false。在大多數 Mac 鍵盤上，Alt 鍵標記為 Option。
2	ctrlKey 如果在觸發事件時按下了 Ctrl 鍵，則設定為 true，否則設定為 false。
3	data 在建立處理程式時作為 bind() 命令的第二個引數傳遞的值（如果有）。
4	keyCode 對於 keyup 和 keydown 事件，這將返回按下的鍵。
5	metaKey 如果在觸發事件時按下了 Meta 鍵，則設定為 true，否則設定為 false。Meta 鍵在 PC 上是 Ctrl 鍵，在 Mac 上是 Command 鍵。
6	pageX 對於滑鼠事件，指定相對於頁面原點的事件的水平座標。
7	pageY 對於滑鼠事件，指定相對於頁面原點的事件的垂直座標。
8	relatedTarget 對於某些滑鼠事件，標識在觸發事件時游標離開或進入的元素。
9	screenX 對於滑鼠事件，指定相對於螢幕原點的事件的水平座標。
10	screenY 對於滑鼠事件，指定相對於螢幕原點的事件的垂直座標。
11	shiftKey 如果在觸發事件時按下了 Shift 鍵，則設定為 true，否則設定為 false。
12	target 標識觸發事件的元素。
13	timeStamp 建立事件時的時間戳（以毫秒為單位）。
14	type 對於所有事件，指定觸發事件的型別（例如，click）。
15	which 對於鍵盤事件，指定導致事件的鍵的數字程式碼，對於滑鼠事件，指定按下了哪個按鈕（1 表示左鍵，2 表示中鍵，3 表示右鍵）。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

這將產生以下結果：

事件方法

有一系列方法可以呼叫事件物件：

序號	方法及描述
1	preventDefault() 阻止瀏覽器執行預設操作。
2	isDefaultPrevented() 返回在此事件物件上是否曾經呼叫過 event.preventDefault()。
3	stopPropagation() 停止事件向父元素冒泡，防止任何父處理程式收到事件通知。
4	isPropagationStopped() 返回在此事件物件上是否曾經呼叫過 event.stopPropagation()。
5	stopImmediatePropagation() 停止執行其餘的處理程式。
6	isImmediatePropagationStopped() 返回在此事件物件上是否曾經呼叫過 event.stopImmediatePropagation()。

事件操作方法

下表列出了重要的與事件相關的操作方法：

序號	方法及描述
1	bind( type, [data], fn ) 將處理程式繫結到每個匹配元素的一個或多個事件（如 click）。還可以繫結自定義事件。
2	off( events [, selector ] [, handler(eventObject) ] ) 這與 live 相反，它移除繫結的 live 事件。
3	hover( over, out ) 模擬懸停，例如將滑鼠移到物件上和移出物件。
4	on( events [, selector ] [, data ], handler ) 將處理程式繫結到所有當前和將來的匹配元素的事件（如 click）。還可以繫結自定義事件。
5	one( type, [data], fn ) 將處理程式繫結到一個或多個事件，以便對每個匹配元素執行一次。
6	ready( fn ) 繫結一個函式，以便每當 DOM 準備好被遍歷和操作時執行。
7	trigger( event, [data] ) 在每個匹配元素上觸發事件。
8	triggerHandler( event, [data] ) 觸發元素上所有繫結的事件處理程式。
9	unbind( [type], [fn] ) 這與 bind 相反，它從每個匹配元素中移除繫結的事件。

事件輔助方法

jQuery 還提供了一組事件輔助函式，這些函式可以用來觸發事件或繫結上面提到的任何事件型別。

觸發方法

下面是一個觸發所有段落模糊事件的示例。

$("p").blur();

繫結方法

下面是一個在所有<div>上繫結click事件的示例。

$("div").click( function () { 
   // do something here
});

以下是 jQuery 提供的所有支援方法的完整列表。

序號	方法及描述
1	blur( ) 觸發每個匹配元素的 blur 事件。
2	blur( fn ) 將函式繫結到每個匹配元素的 blur 事件。
3	change( ) 觸發每個匹配元素的 change 事件。
4	change( fn ) 將函式繫結到每個匹配元素的 change 事件。
5	click( ) 觸發每個匹配元素的 click 事件。
6	click( fn ) 將函式繫結到每個匹配元素的 click 事件。
7	dblclick( ) 觸發每個匹配元素的 dblclick 事件。
8	dblclick( fn ) 將函式繫結到每個匹配元素的 dblclick 事件。
9	error( ) 觸發每個匹配元素的 error 事件。
10	error( fn ) 將函式繫結到每個匹配元素的 error 事件。
11	focus( ) 觸發每個匹配元素的 focus 事件。
12	focus( fn ) 將函式繫結到每個匹配元素的 focus 事件。
13	keydown( ) 觸發每個匹配元素的 keydown 事件。
14	keydown( fn ) 將函式繫結到每個匹配元素的 keydown 事件。
15	keypress( ) 觸發每個匹配元素的 keypress 事件。
16	keypress( fn ) 將函式繫結到每個匹配元素的 keypress 事件。
17	keyup( ) 觸發每個匹配元素的 keyup 事件。
18	keyup( fn ) 將函式繫結到每個匹配元素的 keyup 事件。
19	load( fn ) 將函式繫結到每個匹配元素的 load 事件。
20	mousedown( fn ) 將函式繫結到每個匹配元素的 mousedown 事件。
21	mouseenter( fn ) 將函式繫結到每個匹配元素的 mouseenter 事件。
22	mouseleave( fn ) 將函式繫結到每個匹配元素的 mouseleave 事件。
23	mousemove( fn ) 將函式繫結到每個匹配元素的 mousemove 事件。
24	mouseout( fn ) 將函式繫結到每個匹配元素的 mouseout 事件。
25	mouseover( fn ) 將函式繫結到每個匹配元素的 mouseover 事件。
26	mouseup( fn ) 將函式繫結到每個匹配元素的 mouseup 事件。
27	resize( fn ) 將函式繫結到每個匹配元素的 resize 事件。
28	scroll( fn ) 將函式繫結到每個匹配元素的 scroll 事件。
29	select( ) 觸發每個匹配元素的 select 事件。
30	select( fn ) 將函式繫結到每個匹配元素的 select 事件。
31	submit( ) 觸發每個匹配元素的 submit 事件。
32	submit( fn ) 將函式繫結到每個匹配元素的 submit 事件。
33	unload( fn ) 將函式繫結到每個匹配元素的 unload 事件。

jQuery - Ajax

AJAX 是非同步 JavaScript 和 XML 的首字母縮寫，這項技術幫助我們無需重新整理瀏覽器頁面即可從伺服器載入資料。

如果您是 AJAX 新手，建議您在繼續學習之前先閱讀我們的Ajax 教程。

JQuery 是一款很棒的工具，它提供了一套豐富的 AJAX 方法來開發下一代 Web 應用程式。

載入簡單資料

使用 JQuery AJAX 載入任何靜態或動態資料非常容易。JQuery 提供了load()方法來完成這項工作。

語法

以下是load()方法的簡單語法。

[selector].load( URL, [data], [callback] );

以下是所有引數的描述。

URL - 傳送請求的伺服器端資源的 URL。它可以是生成資料的 CGI、ASP、JSP 或 PHP 指令碼，也可以是從資料庫中獲取資料。
data - 此可選引數表示一個物件，其屬性被序列化為正確編碼的引數，以傳遞給請求。如果指定，則使用POST方法進行請求。如果省略，則使用GET方法。
callback - 在響應資料載入到匹配集合的元素後呼叫的回撥函式。傳遞給此函式的第一個引數是從伺服器接收到的響應文字，第二個引數是狀態程式碼。

示例

考慮以下包含少量 JQuery 程式碼的 HTML 檔案。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

這裡load()初始化對指定 URL /jquery/result.html檔案的 Ajax 請求。載入此檔案後，所有內容都將填充到 ID 為stage的<div>標籤中。假設我們的 /jquery/result.html 檔案只有一行 HTML 程式碼。

<h1>THIS IS RESULT...</h1>

單擊給定按鈕時，將載入 result.html 檔案。

獲取 JSON 資料

在某些情況下，伺服器會根據您的請求返回 JSON 字串。JQuery 實用程式函式getJSON()解析返回的 JSON 字串，並將結果字串作為第一個引數提供給回撥函式，以進一步操作。

語法

以下是getJSON()方法的簡單語法。

[selector].getJSON( URL, [data], [callback] );

以下是所有引數的描述。

URL - 透過 GET 方法聯絡的伺服器端資源的 URL。
data - 一個物件，其屬性用作構建要附加到 URL 的查詢字串的名稱/值對，或者預格式化和編碼的查詢字串。
callback - 請求完成後呼叫的函式。將 JSON 字串作為響應主體解析而成的 data 值作為第一個引數傳遞給此回撥函式，狀態作為第二個引數傳遞。

示例

考慮以下包含少量 JQuery 程式碼的 HTML 檔案。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

這裡 JQuery 實用程式方法getJSON()初始化對指定 URL result.json檔案的 Ajax 請求。載入此檔案後，所有內容都將傳遞給回撥函式，該函式最終將填充到 ID 為stage的<div>標籤中。假設我們的 result.json 檔案具有以下 JSON 格式的內容。

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

單擊給定按鈕時，將載入 result.json 檔案。

將資料傳遞到伺服器

很多時候，您會從使用者那裡收集輸入，並將該輸入傳遞給伺服器以進行進一步處理。JQuery AJAX 使得使用任何可用 Ajax 方法的data引數將收集到的資料傳遞給伺服器變得非常容易。

示例

此示例演示如何將使用者輸入傳遞給 Web 伺服器指令碼，該指令碼將傳送相同的結果並列印它。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

以下是result.php指令碼中編寫的程式碼。

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

現在，您可以在給定的輸入框中輸入任何文字，然後單擊“顯示結果”按鈕以檢視您在輸入框中輸入的內容。

JQuery AJAX 方法

您已經瞭解了使用 JQuery 的 AJAX 基本概念。下表列出了您可以根據程式設計需求使用的所有重要的 JQuery AJAX 方法。

序號	方法 & 描述
1	jQuery.ajax( options ) 使用 HTTP 請求載入遠端頁面。
2	jQuery.ajaxSetup( options ) 設定 AJAX 請求的全域性設定。
3	jQuery.get( url, [data], [callback], [type] ) 使用 HTTP GET 請求載入遠端頁面。
4	jQuery.getJSON( url, [data], [callback] ) 使用 HTTP GET 請求載入 JSON 資料。
5	jQuery.getScript( url, [callback] ) 使用 HTTP GET 請求載入並執行 JavaScript 檔案。
6	jQuery.post( url, [data], [callback], [type] ) 使用 HTTP POST 請求載入遠端頁面。
7	load( url, [data], [callback] ) 從遠端檔案載入 HTML 並將其注入 DOM。
8	serialize( ) 將一組輸入元素序列化為資料字串。
9	serializeArray( ) 序列化所有表單和表單元素，就像 .serialize() 方法一樣，但返回 JSON 資料結構供您使用。

JQuery AJAX 事件

您可以在 AJAX 呼叫進度生命週期中呼叫各種 JQuery 方法。根據不同的事件/階段，以下方法可用。

您可以閱讀所有AJAX 事件。

序號	方法 & 描述
1	ajaxComplete( callback ) 附加一個函式，每當 AJAX 請求完成時執行。
2	ajaxStart( callback ) 附加一個函式，每當 AJAX 請求開始且沒有其他活動請求時執行。
3	ajaxError( callback ) 附加一個函式，每當 AJAX 請求失敗時執行。
4	ajaxSend( callback ) 附加一個函式，在傳送 AJAX 請求之前執行。
5	ajaxStop( callback ) 附加一個函式，每當所有 AJAX 請求結束時執行。
6	ajaxSuccess( callback ) 附加一個函式，每當 AJAX 請求成功完成時執行。

jQuery - 效果

jQuery 提供了一個非常簡單的介面來執行各種令人驚歎的效果。jQuery 方法允許我們以最少的配置快速應用常用效果。本教程涵蓋了建立視覺效果的所有重要 jQuery 方法。

顯示和隱藏元素

顯示和隱藏元素的命令與我們的預期基本一致 - show()顯示包裝集中的元素，hide()隱藏它們。

語法

以下是show()方法的簡單語法。

[selector].show( speed, [callback] );

以下是所有引數的描述。

speed - 表示三個預定義速度之一（“slow”、“normal”或“fast”）的字串，或者執行動畫的毫秒數（例如 1000）。
callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

以下是hide()方法的簡單語法。

[selector].hide( speed, [callback] );

以下是所有引數的描述。

speed - 表示三個預定義速度之一（“slow”、“normal”或“fast”）的字串，或者執行動畫的毫秒數（例如 1000）。
callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

考慮以下包含少量 JQuery 程式碼的 HTML 檔案。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

這將產生以下結果：

切換元素

jQuery 提供了方法來在顯示或隱藏之間切換元素的顯示狀態。如果元素最初顯示，則將其隱藏；如果隱藏，則將其顯示。

語法

以下是其中一個toggle()方法的簡單語法。

[selector]..toggle([speed][, callback]);

以下是所有引數的描述。

speed - 表示三個預定義速度之一（“slow”、“normal”或“fast”）的字串，或者執行動畫的毫秒數（例如 1000）。
callback - 此可選引數表示一個函式，每當動畫完成時執行；針對每個動畫元素執行一次。

示例

我們可以為任何元素設定動畫，例如包含影像的簡單<div>。

即時演示

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

這將產生以下結果：

JQuery 效果方法

您已經瞭解了 jQuery 效果的基本概念。下表列出了建立不同型別效果的所有重要方法。

序號	方法 & 描述
1	animate( params, [duration, easing, callback] ) 用於建立自定義動畫的函式。
2	fadeIn( speed, [callback] ) 透過調整匹配元素的不透明度並於完成之後觸發可選的回撥函式來淡入所有匹配元素。
3	fadeOut( speed, [callback] ) 透過將所有匹配元素的不透明度調整為 0，然後將 display 設定為“none”並於完成之後觸發可選的回撥函式來淡出所有匹配元素。
4	fadeTo( speed, opacity, callback ) 將所有匹配元素的不透明度淡入到指定的透明度，並在完成之後觸發一個可選的回撥函式。
5	hide( ) 如果一組匹配的元素顯示，則隱藏它們。
6	hide( speed, [callback] ) 使用平滑動畫隱藏所有匹配元素，並在完成之後觸發可選的回撥函式。
7	show( ) 如果一組匹配的元素隱藏，則顯示它們。
8	show( speed, [callback] ) 使用平滑動畫顯示所有匹配元素，並在完成之後觸發可選的回撥函式。
9	slideDown( speed, [callback] ) 透過調整高度來顯示所有匹配元素，並在完成之後觸發可選的回撥函式。
10	slideToggle( speed, [callback] ) 透過調整高度來切換所有匹配元素的可見性，並在完成之後觸發可選的回撥函式。
11	slideUp( speed, [callback] ) 透過調整高度來隱藏所有匹配元素，並在完成之後觸發可選的回撥函式。
12	stop( [clearQueue, gotoEnd ]) 停止所有指定元素上當前正在執行的所有動畫。
13	toggle( ) 切換一組匹配元素的顯示狀態。
14	toggle( speed, [callback] ) 使用平滑動畫切換一組匹配元素的顯示狀態，並在完成之後觸發可選的回撥函式。
15	toggle( switch ) 根據開關切換一組匹配元素的顯示狀態（true 顯示所有元素，false 隱藏所有元素）。
16	jQuery.fx.off 全域性停用所有動畫。

基於 UI 庫的效果

要使用這些效果，您可以從 jQuery UI 庫下載最新的 jQuery UI 庫 jquery-ui-1.11.4.custom.zip，或者像我們對 jQuery 所做的那樣使用 Google CDN 來使用它。

我們在 HTML 頁面中使用了以下程式碼片段來使用 Google CDN 的 jQuery UI，這樣我們就可以使用 jQuery UI 了：

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

序號	方法 & 描述
1	百葉窗 (Blind) 將元素遮擋或透過百葉窗的方式顯示它。
2	彈跳 (Bounce) 垂直或水平彈跳元素 n 次。
3	剪輯 (Clip) 垂直或水平剪輯元素的顯示或隱藏。
4	下降 (Drop) 將元素下移或透過下移的方式顯示它。
5	爆炸 (Explode) 將元素爆炸成多個碎片。
6	摺疊 (Fold) 像摺紙一樣摺疊元素。
7	高亮 (Highlight) 使用定義的顏色突出顯示背景。
8	膨脹 (Puff) 縮放和淡出動畫建立膨脹效果。
9	脈衝 (Pulsate) 多次脈衝元素的不透明度。
10	縮放 (Scale) 按百分比因子縮小或放大元素。
11	搖晃 (Shake) 垂直或水平搖晃元素 n 次。
12	大小 (Size) 將元素調整為指定寬度和高度。
13	滑動 (Slide) 將元素從視口中滑出。
14	轉移 (Transfer) 將一個元素的輪廓轉移到另一個元素。

jQuery - 互動

可以向任何元素新增基本的基於滑鼠的行為。透過使用互動，我們可以建立可排序列表、可調整大小的元素、拖放行為。互動還可以作為更復雜的小部件和應用程式的優秀構建塊。

序號	互動與描述
1	可拖動 (Drag able) 啟用任何 DOM 元素的可拖動功能。
2	可放置 (Drop able) 啟用任何 DOM 元素的可放置功能。
3	可調整大小 (Resize able) 啟用任何 DOM 元素的可調整大小功能。
4	可選 (Select able) 啟用 DOM 元素（或元素組）的可選擇功能。
5	可排序 (Sort able) 啟用 DOM 元素組的可排序功能。

jQuery - 小部件

jQuery UI 小部件是一個專門的 jQuery 外掛。使用外掛，我們可以將行為應用於元素。但是，外掛缺少一些內建功能，例如將資料與其元素關聯、公開方法、將選項與預設值合併以及控制外掛生命週期的方法。

序號	小部件與描述
1	手風琴 (Accordion) 啟用摺疊內容，該內容被分成邏輯部分。
2	自動完成 (Autocomplete) 在您在欄位中鍵入時提供建議。
3	按鈕 (Button) 按鈕是型別為提交的輸入和一個錨點。
4	日期選擇器 (Datepicker) 在小型覆蓋層中開啟互動式日曆。
5	對話方塊 (Dialog) 對話方塊是在 HTML 頁面上呈現資訊的好方法之一。
6	選單 (Menu) 選單顯示專案列表。
7	進度條 (Progressbar) 顯示進度資訊。
8	選擇選單 (Select menu) 啟用可樣式化的選擇元素/元素。
9	滑塊 (Slider) 基本滑塊是水平的，並且有一個可以使用滑鼠或箭頭鍵移動的單一滑塊。
10	微調器 (Spinner) 提供一種快速的方式從一組值中選擇一個值。
11	選項卡 (Tabs) 用於在分成邏輯部分的內容之間切換。
12	工具提示 (Tooltip) 為使用者提供提示。

jQuery - 主題

Jquery 具有兩種不同的樣式主題 A 和 B。每種主題對按鈕、條形、內容塊等使用不同的顏色。

J query 主題的語法如下所示：

<div data-role = "page" data-theme = "a|b">

一個簡單的 A 主題示例如下所示：

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
			
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

這應該產生以下結果：

一個簡單的 B 主題示例如下所示：

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

這應該產生以下結果：

jQuery - 工具函式

Jquery 以 $(name space) 的格式提供了一些實用程式。這些方法有助於完成程式設計任務。一些實用程式方法如下所示。

$.trim()

$.trim() 用於刪除前導和尾隨空格。

$.trim( "    lots of extra whitespace    " );

$.each()

$.each() 用於迭代陣列和物件。

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});
 
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

.each() 可以對選擇呼叫以迭代選擇中包含的元素。對於迭代選擇中的元素，應使用 .each()，而不是 $.each()。

$.inArray()

$.inArray() 用於返回陣列中值的索引，如果值不在陣列中則返回 -1。

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$.extend()

$.extend() 用於使用後續物件的屬性更改第一個物件的屬性。

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$.proxy()

$.proxy() 用於返回一個始終在提供的範圍內執行的函式——也就是說，將傳遞的函式內部的 this 的含義設定為第二個引數。

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$.browser

$.browser 用於提供有關瀏覽器的資訊。

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$.contains()

$.contains() 用於在第二個引數提供的 DOM 元素是第一個引數提供的 DOM 元素的後代時返回 true，無論它是直接子元素還是巢狀更深。

$.contains( document.documentElement, document.body );
$.contains( document.body, document.documentElement );

$.data()

$.data() 用於提供有關資料的資訊。

即時演示

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>
 
      <script>
         var div = $( "div" )[ 0 ];
			
         jQuery.data( div, "test", {
            first: 25,
            last: "tutorials"
         });
			
         $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

輸出如下所示

The values stored were 25 and tutorials

$.fn.extend()

$.fn.extend() 用於擴充套件 jQuery 原型。

即時演示

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <label><input type = "checkbox" name = "android"> 
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>
 
      <script>
         jQuery.fn.extend({
			
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
 
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
			
      </script>
   </body>
</html>

它提供如下所示的輸出：

$.isWindow()

$.isWindow() 用於識別視窗。

即時演示

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      Is 'window' a window? <b></b>
 
      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

它提供如下所示的輸出：

$.now()

它返回一個表示當前時間的數字。

(new Date).getTime()

$.isXMLDoc()

$.isXMLDoc() 檢查檔案是否為 xml 檔案。

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$.globalEval()

$.globalEval() 用於全域性執行 javascript。

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$.dequeue()

$.dequeue() 用於執行佇列中的下一個函式。

即時演示

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>
		
      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>
		
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>
 
      <script>
         $( "button" ).click(function() {
            $( "div" )
            .animate({ left: '+ = 400px' }, 2000 )
            .animate({ top: '0px' }, 600 )
				
            .queue(function() {
               $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
				
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

它提供如下所示的輸出：

列印頁面

jQuery 快速指南

jQuery - 概述

什麼是 jQuery？

如何使用 jQuery？

本地安裝

示例

基於 CDN 的版本

示例

如何呼叫 jQuery 庫函式？

如何使用自定義指令碼？

使用多個庫

接下來是什麼？

jQuery - 基礎

字串

數字

布林值

物件

陣列

函式

引數

上下文

作用域

回撥

閉包

代理模式

內建函式

文件物件模型

jQuery - 選擇器

$( ) 工廠函式

示例

如何使用選擇器？

選擇器示例

jQuery - 屬性

獲取屬性值

示例

設定屬性值

示例

應用樣式

示例

屬性方法

示例

jQuery - DOM 遍歷

按索引查詢元素

示例

篩選元素

示例

定位後代元素

示例

JQuery DOM 篩選方法

JQuery DOM 遍歷方法

jQuery - CSS 選擇器方法

應用 CSS 屬性

示例

應用多個 CSS 屬性

示例

設定元素寬度 & 高度

示例

JQuery CSS 方法

jQuery - DOM 操作

內容操作

示例

DOM 元素替換

示例

刪除 DOM 元素

示例

插入 DOM 元素

示例

DOM 操作方法

jQuery - 事件處理

繫結事件處理程式

移除事件處理程式

事件型別

事件物件

事件屬性

事件方法

事件操作方法

事件輔助方法

觸發方法

繫結方法

jQuery - Ajax