極客書

jQuery 快速指南

jQuery是John Resig在2006年創建的一個快速而簡潔的JavaScript庫，它有一個很好的座右銘：少寫，多做。jQuery簡化了HTML文檔遍歷、事件處理、動畫製作和Ajax交互以實現快速web開發。jQuery是一個JavaScript工具包，旨在通過編寫更少的代碼來簡化各種任務。以下是jQuery&minus支持的重要核心特性列表;

  • 通過使用名爲Sizzle的跨瀏覽器開源選擇器引擎，jQuery可以輕鬆地選擇DOM元素、協商它們並修改它們的內容。

  • 事件處理−jQuery提供了一種優雅的方式來捕獲各種各樣的事件，例如用戶單擊連結，而無需使用事件處理程序來擾亂HTML代碼本身。

  • AJAX支持−jQuery幫助您使用AJAX技術開發一個響應迅速、功能豐富的站點。

  • 動畫−jQuery提供了大量內置動畫效果，您可以在網站中使用這些效果。

  • 輕量級jQuery是一個非常輕量級的庫，大小約爲19KB（Minified和gzip）。

  • 跨瀏覽器支持−jQuery具有跨瀏覽器支持，在IE 6.0+、FF 2.0+、Safari 3.0+、Chrome和Opera 9.0中運行良好+

  • 最新技術jQuery支持CSS3選擇器和基本XPath語法。

How to use jQuery?

使用jQuery有兩種方法。

  • 本地安裝−您可以在本地計算機上下載jQuery庫並將其包含在HTML代碼中。

  • 基於CDN的版本−您可以直接從內容交付網絡（CDN）將jQuery庫包含到HTML代碼中。

Local Installation

  • 轉到https://jquery.com/download/>https://jquery.com/download/下載可用的最新版本。

  • 現在將下載的jquery-2.1.3.min.js文件放到您網站的目錄中，例如/jquery。

Example

現在您可以在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 Based Version

您可以直接從內容交付網絡（CDN）將jQuery庫包含到HTML代碼中。谷歌和微軟提供最新版本的內容交付。

We are using Google CDN version of the library throughout this tutorial.

Example

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

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

這將產生以下結果&負;

How to Call a jQuery Library Functions?

與幾乎所有的事情一樣，當使用jQuery讀取或操作文檔對象模型（DOM）時，我們需要確保在DOM準備好後立即開始添加事件等。

如果你想讓一個事件在你的頁面上工作，你應該在$（document）.ready（）函數中調用它。在加載DOM和頁面內容之前，它裡面的所有內容都將加載。

爲此，我們爲文檔註冊了一個ready事件，如下所示;

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

要調用任何jQuery庫函數，請使用如下所示的HTML腳本標記−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

這將產生以下結果&負;

How to Use Custom Scripts?

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

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

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

現在我們可以在HTML文件中包含custom.js文件，如下所示−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

這將產生以下結果&負;

Using Multiple Libraries

您可以同時使用多個庫，而不互相衝突。例如，可以同時使用jQuery和MooTool javascript庫。您可以查看jquery noconflict方法以了解更多詳細信息。

What is Next ?

如果你不理解以上的例子，不要太擔心。你很快就會在後面的章節中掌握它們。

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

jQuery - Basics

jQuery是一個使用JavaScript功能構建的框架。因此，您可以使用JavaScript中的所有功能和其他功能。本章將解釋jQuery中常用的大多數基本概念。

String

JavaScript中的字符串是一個不可變的對象，它不包含任何、一個或多個字符。下面是JavaScript字符串的有效示例−

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

Numbers

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

5350
120.27
0.26

Boolean

JavaScript中的布爾值可以是true或false。如果數字爲零，則默認爲false。如果空字符串默認爲false。

下面是JavaScript布爾值的有效示例−

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

Objects

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

Arrays

可以使用數組文字定義數組，如下所示−

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

Functions

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

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

匿名函數可以用與普通函數類似的方式定義，但它不會有任何名稱。

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

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

JQuery經常使用匿名函數，如下所示−

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

Arguments

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對象還有一個被調用方屬性，該屬性引用您所在的函數。例如−

function func() {
   return arguments.callee; 
}

func();                // ==> func

Context

JavaScript著名關鍵字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

Scope

變量的作用域是程序中定義它的區域。JavaScript變量將只有兩個作用域。

  • 全局變量−全局變量具有全局範圍，這意味著它在JavaScript代碼中的任何地方都被定義。

  • 局部變量−局部變量僅在定義它的函數中可見。函數參數始終是該函數的本地參數。

在函數體中，局部變量優先於同名的全局變量;

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

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

Callback

回調是作爲參數或選項傳遞給某個方法的普通JavaScript函數。有些回調只是事件，調用它是爲了讓用戶在觸發某個狀態時有機會作出反應。

jQuery的事件系統在任何地方都使用這種回調，例如-minus;

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

大多數回調提供參數和上下文。在事件處理程序示例中，使用一個參數（事件）調用回調。

有些回調需要返回某些內容，有些則使返回值成爲可選值。爲了防止表單提交，提交事件處理程序可以返回false，如下所示−

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

Closures

每當從某個內部作用域訪問在當前作用域之外定義的變量時，都會創建閉包。

下面的示例演示了如何在create、increment和print函數中看到變量counter，而不是在它們之外−

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

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

此模式允許您使用對外部世界不可見的數據進行操作的方法創建對象。值得注意的是，數據隱藏是面向對象編程的基礎。

Proxy Pattern

代理是一個對象，可以用來控制對另一個對象的訪問。它實現與這個其他對象相同的接口，並將任何方法調用傳遞給它。另一個物體通常被稱爲真正的主體。

代理可以被實例化來代替這個真實的主題，並允許遠程訪問它。我們可以將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）可以保證調用方不會注意到原始方法和代理方法之間的差異。

Built-in Functions

JavaScript附帶了一組有用的內置函數。這些方法可用於操作字符串、數字和日期。

以下是重要的JavaScript函數−

Sr.No. Method & Description
1

字符（）

返回指定索引處的字符。
2

concat（）

組合兩個字符串的文本並返回一個新字符串。
3

forEach（）

爲數組中的每個元素調用函數。
4

索引（）

返回指定值第一次出現的調用字符串對象中的索引，如果找不到則返回-1。
5

長度（）

返回字符串的長度。
6

彈出（）

從數組中刪除最後一個元素並返回該元素。
7

推（）

將一個或多個元素添加到數組末尾並返回數組的新長度。
8

反轉（）

反轉數組元素的順序--第一個成爲最後一個，最後一個成爲第一個。
9

排序（）

對數組的元素進行排序。
10

子字符串（）

返回字符串中從指定位置開始到指定字符數的字符。
11

toLowerCase（）

返迴轉換爲小寫的調用字符串值。
12

toString（）

返回數字值的字符串表示形式。
13

頭殼（）

返迴轉換爲大寫的調用字符串值。

The Document Object Model

文檔對象模型是HTML的各種元素的樹結構，如下所示−

Live Demo 
<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>的子元素，以及彼此的兄弟元素。

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

jQuery - Selectors

jQuery庫利用層疊樣式表（CSS）選擇器的強大功能，讓我們能夠快速輕鬆地訪問文檔對象模型（DOM）中的元素或元素組。

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

The $() factory function

jQuery選擇器以美元符號和圓括號開頭。factory函數在選擇給定文檔中的元素時使用了以下三個構造塊−

Sr.No. Selector & Description
1

標記名

表示DOM中可用的標記名。例如，$（'p'）選擇文檔中的所有段落<p>。
2

標籤ID

表示在DOM中具有給定ID的可用標記。例如，$（'#some id'）選擇文檔中id爲some-id的單個元素。
3

標記類

表示DOM中給定類可用的標記。例如，$（'.some class'）選擇文檔中具有某個類的類的所有元素。

所有上述項目可以單獨使用，也可以與其他選擇器結合使用。除了一些調整之外，所有jQuery選擇器都基於相同的原則。

注意：factory函數是jQuery（）函數的同義詞。因此，如果您正在使用任何其他JavaScript庫，其中$符號與其他內容衝突，那麼您可以用jQuery名稱替換$符號，並且可以使用函數jQuery（）而不是$（）。

Example

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

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

How to Use Selectors?

選擇器非常有用，在使用jQuery的每一步都需要它。它們從HTML文檔中獲取所需的元素。

下表列出了幾個基本的選擇器，並舉例說明。

Sr.No. Selector & Description
1 Name

選擇與給定元素名匹配的所有元素。
2 #ID

選擇與給定的ID匹配的單個元素。
3 .Class

選擇與給定類匹配的所有元素。
4 Universal (*)

選擇DOM中可用的所有元素。
5 Multiple Elements E, F, G

選擇所有指定選擇器E、F或G的組合結果。

Selectors Examples

與上面的語法和示例類似，下面的示例將幫助您理解如何使用不同類型的其他有用選擇器−

Sr.No. Selector & Description
1

$（「*」）

此選擇器選擇文檔中的所有元素。
2

$（「p>*」）

此選擇器選擇段落元素的所有子元素。
3

$（「'35;特價」）

此選擇器函數獲取id=「specialID」的元素。
4

$（「.specialClass」）

此選擇器獲取類爲specialClass的所有元素。
5

$（「li:not（.myclass）」）

選擇與不具有class=「myclass」的<li>匹配的所有元素。
6

$（「特殊類」

此選擇器匹配id爲specialID和一類specialClass的連結。
7

$（「p a.特殊類別」）

此選擇器與在<p>元素中聲明的特殊類的類相匹配。
8

$（「ul li:first」）

此選擇器僅獲取<ul>元素的第一個<li>元素;。
9

$（「容器p」）

選擇與<p>匹配的所有元素，這些元素是id爲container的元素的後代。
10

$（「li>ul」）

選擇與<ul>匹配的所有元素，這些元素是與<li>匹配的元素的子元素;
11

$（「強+em」）

選擇與<em>匹配的所有元素，這些元素緊跟與<strong>匹配的同級元素;。
12

$（「p~ul」）

選擇與<ul>匹配的所有元素，這些元素跟隨與<p>匹配的同級元素;。
13

$（「代碼，em，強」）

選擇與<code>或<em>或<strong>匹配的所有元素;。
14

$（「p強，.myclass」）

選擇與<strong>匹配的所有元素，這些元素是與<p>匹配的元素的後代，以及具有myclass類的所有元素。
15

$（「：空」）

選擇所有沒有子元素的元素。
16

$（「p:空」）

選擇與沒有子級的<p>匹配的所有元素。
17

$（「div[p]」）

選擇與<div>匹配的所有元素，這些元素包含與<p>匹配的元素;。
18

$（「p[.myclass]）

選擇與<p>匹配的所有元素，這些元素包含類爲myclass的元素。
19

$（「[@rel]」）

選擇與具有rel屬性的<a>匹配的所有元素。
20

$（「輸入[@name=myname]」）

選擇與「輸入」匹配的所有元素，這些元素的名稱值正好等於「我的名稱」。
21

$（「輸入[@name^=myname]」）

選擇與輸入匹配的所有元素，這些元素的名稱值以myname開頭。
22

$（[@rel$=self]）

選擇與<a>匹配的具有以self結尾的rel屬性值的所有元素。
23

$（「a[@ref*=domain.com]）」

選擇與具有包含domain.com的ref值的<a>匹配的所有元素。
24

$（「li:even」）

選擇與具有偶數索引值的<li>匹配的所有元素。
25

$（「tr:odd」）

選擇與具有奇數索引值的<tr>匹配的所有元素。
26

$（「li:first」）

選擇第一個元素。
27

$（「li:最後一個」）

選擇最後一個元素。
28

$（「li：可見」）

選擇與可見的<li>匹配的所有元素。
29

$（「li：隱藏的」）

選擇與隱藏的<li>匹配的所有元素。
30

$（「：收音機」）

選擇窗體中的所有單選按鈕。
31

$（「：選中」）

選中表單中的所有複選框。
32

$（「：輸入」）

僅選擇表單元素（輸入、選擇、文本區域、按鈕）。
33

$（「：文本」）

僅選擇文本元素（輸入[類型=文本]）。
34

$（「li:eq（2）」）

選擇第三個元素。
35

$（「li:eq（4）」）

選擇第五個元素。
36

$（「li:lt（2）」）

選擇與第三個元素之前的<li>元素匹配的所有元素;換句話說，前兩個<li>元素。
37

$（「p:lt（3）」）

選擇與第四個元素之前的<p>元素匹配的所有元素;換句話說，前三個<p>元素。
38

$（「li:gt（1）」）

選擇第二個元素之後與<li>匹配的所有元素。
39

$（「p:gt（2）」）

選擇第三個元素之後與<p>匹配的所有元素。
40

$（「div/p」）

選擇與<p>匹配的所有元素，這些元素是與<div>匹配的元素的子元素;
41

$（「div//code」）

選擇與<code>匹配的所有元素，這些元素是與<div>匹配的元素的後代;。
42

$（「//p//a」）

選擇與<a>匹配的所有元素，這些元素是與<p>匹配的元素的後代;
43

$（「li:第一個孩子」）

選擇與父元素的第一個子元素<li>匹配的所有元素。
44

$（「li：最後一個孩子」）

選擇與父元素最後一個子元素<li>匹配的所有元素。
45

$（「：父項」）

選擇其他元素（包括文本）的父元素。
46

$（「li:contains（second）」）

選擇與第二個文本匹配的所有元素<li>。

You can use all the above selectors with any HTML/XML element in generic way. For example if selector $（「li:first」） works for <li> element then $("p:first") would also work for <p> element.

jQuery - Attributes

當涉及到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爲我們提供了方便地操作元素屬性的方法，並爲我們提供了對元素的訪問，以便我們也可以更改其屬性。

Get Attribute Value

attr（）方法可用於從匹配集的第一個元素獲取屬性值，或將屬性值設置到所有匹配元素上。

Example

下面是一個簡單的示例，它獲取標記中<in>的title屬性，並使用相同的值設置<div id=「Divid」>值;

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Set Attribute Value

attr（name，value）方法可用於使用傳遞的值將命名屬性設置到包裝集中的所有元素上。

Example

下面是一個簡單的示例，它將圖像標記的src屬性設置爲正確的位置−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Applying Styles

可以使用addClass（classes）方法將定義的樣式表應用於所有匹配的元素。可以指定多個用空格分隔的類。

Example

下面是一個簡單的示例，它設置了para<p>tag−的類屬性;

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Attribute Methods

下表列出了幾種可用於操作屬性和屬性的有用方法;

Sr.No. Methods & Description
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>上調用每個匹配元素的value屬性，但如果在<select>上調用該元素，並且傳遞了<option>值，則將選中「傳遞」選項，如果在複選框或單選框上調用該元素，則將選中所有匹配的複選框和單選框。

Examples

與上面的語法和示例類似，下面的示例將幫助您了解如何在不同的情況下使用各種屬性方法;

Sr.No. Selector & Description
1

$（「'35;myID」）.attr（「自定義」）

這將爲與ID myID匹配的第一個元素返回屬性custom的值。
2

$（「img」）.attr（「alt」，「Sample Image」）

這會將所有圖像的alt屬性設置爲新值「Sample Image」。
3

$（「input」）.attr（{value:」，title:「請輸入值」}）

將所有<input>元素的值設置爲空字符串，並將jQuery示例設置爲字符串請輸入值。
4

$（「a[ref^=https:/]」）.attr（「target」，「-u blank」）

選擇所有以https://開頭的ref屬性的連結，並將其目標屬性設置爲\u blank。
5

（「a」）。刪除Attr（「target」）

這將刪除所有連結的target屬性。
6

$（「form」）.submit（function（）{$（「：submit」，this）.attr（「disabled」，「disabled」）;}）

這將在單擊提交按鈕時將disabled屬性修改爲值「disabled」。
7

$（「p:last」）.hasClass（「selected」）

如果最後一個<p>標記已選擇關聯的類，則返回true。
8

$（「p」）.text（）

返回包含所有匹配元素的組合文本內容的字符串。
9

$（「p」）.text（「<i>Hello World<i>」）

這會將「<I>Hello World</I>」設置爲匹配元素的文本內容。
10

$（「p」）.html（）

這將返回所有匹配段落的HTML內容。
11

$（「div」）.html（「Hello World」）

這會將所有匹配的<div>的HTML內容設置爲Hello World。
12

$（「輸入：複選框：選中」）.val（）

從選中的複選框中獲取第一個值。
13

$（「輸入：radio[name=bar]：選中」）.val（）

從一組單選按鈕中獲取第一個值。
14

$（「按鈕」）.val（「你好」）

設置每個匹配元素的值屬性<button>。
15

（「輸入」）.val（「開」）

這將選中值爲「開」的所有單選或複選框按鈕。
16

（$select select.val）（「orange

這將在下拉框中選擇橙色選項，其中有橙色、芒果和香蕉選項。
17

$（「select」）.val（「Orange」，「Mango」）

這將在一個下拉框中選擇橙色和芒果選項，其中有橙色、芒果和香蕉選項。

jQuery - DOM Traversing

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

Find Elements by Index

考慮一個包含以下HTML內容的簡單文檔−

Live Demo 
<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）等來訪問。

Example

下面是一個將顏色添加到第二個列表項的簡單示例。

Live Demo 
<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Filtering out Elements

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

Example

下面是一個簡單的示例，它將顏色應用於與中產階級相關聯的列表−

Live Demo 
<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Locating Descendant Elements

find（selector）方法可用於定位特定類型元素的所有子元素。選擇器可以使用任何選擇器語法編寫。

Example

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

Live Demo 
<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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 Filter Methods

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

Sr.No. Method & Description
1 eq( index )

將匹配元素集減少爲單個元素。
2 filter( selector )

從與指定選擇器不匹配的匹配元素集中刪除所有元素。
3 filter( fn )

從與指定函數不匹配的匹配元素集中刪除所有元素。
4 is( selector )

根據表達式檢查當前所選內容，如果所選內容中至少有一個元素符合給定的選擇器，則返回true。
5 map( callback )

將jQuery對象中的一組元素轉換爲jQuery數組中的另一組值（可能包含，也可能不包含元素）。
6 not( selector )

從匹配的元素集中刪除與指定選擇器匹配的元素。
7 slice( start, [end] )

選擇匹配元素的子集。

JQuery DOM Traversing Methods

下表列出了可用於定位DOM中各種元素的其他有用方法−

Sr.No. Methods & Description
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 Selectors Methods

jQuery庫支持層疊樣式表（Cascading Style Sheet，CSS）規範1到3中包含的幾乎所有選擇器，如全球資訊網聯盟網站所述。

使用JQuery庫開發人員可以增強他們的網站，而無需擔心瀏覽器及其版本，只要瀏覽器啓用了JavaScript。

大多數JQuery CSS方法不修改JQuery對象的內容，它們用於對DOM元素應用CSS屬性。

Apply CSS Properties

使用JQuery方法應用任何CSS屬性都非常簡單CSS（PropertyName，PropertyValue）。

這裡是方法的語法−

selector.css( PropertyName, PropertyValue );

在這裡，可以將PropertyName作爲javascript字符串傳遞，並且根據其值，PropertyValue可以是字符串或整數。

Example

下面是向第二個列表項添加字體顏色的示例。

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Apply Multiple CSS Properties

您可以使用單個JQuery方法CSS（{key1:val1，key2:val2….）應用多個CSS屬性。您可以在一次調用中應用任意多個屬性。

這裡是方法的語法−

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

在這裡，您可以將key作爲property傳遞，將val作爲其值傳遞，如上所述。

Example

下面是一個向第二個列表項添加字體顏色和背景顏色的示例。

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Setting Element Width & Height

可以使用寬度（val）和高度（val）方法分別設置任何元素的寬度和高度。

Example

下面是一個簡單的示例，它設置第一個除法元素的寬度，其中作爲其餘元素的寬度由樣式表設置

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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 Methods

下表列出了可用於播放CSS屬性的所有方法−

Sr.No. Method & Description
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寬度。
18 width( )

獲取第一個匹配元素的當前計算像素寬度。

jQuery - DOM Manipulation

JQuery提供了有效操作DOM的方法。您不需要編寫大代碼來修改任何元素屬性的值或從段落或分區中提取HTML代碼。

JQuery提供了一些方法，如.attr（）、.html（）和.val（），這些方法充當getter，從DOM元素中檢索信息以供以後使用。

Content Manipulation

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

這裡是方法的語法−

selector.html( )

Example

下面是一個使用.html（）和.text（val）方法的示例。html（）從對象中檢索html內容，然後.text（val）方法使用傳遞的參數設置對象的值−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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 () {
               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 Element Replacement

可以用指定的HTML或DOM元素替換完整的DOM元素。替換（內容）方法很好地實現了這一目的。

這裡是方法的語法−

selector.replaceWith( content )

這裡的內容是您想要的，而不是原始元素。這可以是HTML或簡單文本。

Example

下面是一個將division元素替換爲「<h1>JQuery is Great</h1>」的示例;

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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 () {
               $(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>

這將產生以下結果&負;

Removing DOM Elements

可能存在這樣的情況：您希望從文檔中刪除一個或多個DOM元素。JQuery提供了兩種方法來處理這種情況。

empty（）方法從匹配元素集中移除所有子節點，其中作爲方法remove（expr）方法從DOM中移除所有匹配元素。

這裡是方法的語法−

selector.remove( [ expr ])

or 

selector.empty( )

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

Example

下面是一個示例，其中元素一經單擊就被刪除−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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 () {
               $(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>

這將產生以下結果&負;

Inserting DOM Elements

在現有文檔中插入一個或多個新的DOM元素可能會出現這種情況。JQuery提供了在不同位置插入元素的各種方法。

after（content）方法在每個匹配元素之後插入內容，其中，作爲方法before（content）方法在每個匹配元素之前插入內容。

這裡是方法的語法−

selector.after( content )

or

selector.before( content )

這裡的內容是你想要插入的。這可以是HTML或簡單文本。

Example

下面是一個示例，其中<div>元素被插入到單擊的元素−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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 () {
               $(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 Manipulation Methods

下表列出了可用於操作DOM元素的所有方法−

Sr.No. Method & Description
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 - Events Handling

我們可以使用事件創建動態網頁。事件是可由Web應用程式檢測的操作。

以下是事件的示例−

  • A mouse click
  • A web page loading
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard, etc.

當這些事件被觸發時，您可以使用一個自定義函數對事件執行幾乎任何您想要的操作。這些自定義函數調用事件處理程序。

Binding Event Handlers

使用jQuery事件模型，我們可以使用bind（）方法在DOM元素上建立事件處理程序，如下所示−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

此代碼將使division元素響應click事件;此後，當用戶在該division內單擊時，將顯示警報。

這將產生以下結果&負;

bind（）命令的完整語法如下所示−

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

下面是對參數的描述−

  • event type−包含JavaScript事件類型的字符串，例如click或submit。有關事件類型的完整列表，請參閱下一節。

  • event data−這是可選參數，是將傳遞給事件處理程序的數據映射。

  • 處理程序−每次觸發事件時執行的函數。

Removing Event Handlers

通常，一旦建立了事件處理程序，它將在頁面的剩餘生命周期內保持有效。可能需要刪除事件處理程序。

jQuery提供了unbind（）命令來刪除現有的事件處理程序。unbind（）的語法如下−

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

下面是對參數的描述−

  • event type−包含JavaScript事件類型的字符串，例如click或submit。有關事件類型的完整列表，請參閱下一節。

  • handler−如果提供，則標識要刪除的特定偵聽器。

Event Types

Sr.No. Event Type & Description
1

模糊

在元素失去焦點時發生。
2

改變

在元素更改時發生。
3

點擊

在滑鼠單擊時發生。
4

dblclick公司

在滑鼠雙擊時發生。
5

錯誤

在加載或卸載等過程中出錯時發生。
6

聚焦

在元素獲得焦點時發生。
7

按鍵

按鍵時發生。
8

按鍵

在按下並釋放鍵時發生。
9

鑰匙扣

在釋放密鑰時發生。
10

裝載

在加載文檔時發生。
11

摩澤敦

在按下滑鼠按鈕時發生。
12

穆塞特

當滑鼠進入元素區域時發生。
13

穆塞萊夫

當滑鼠離開元素區域時發生。
14

滑鼠移動

在滑鼠指針移動時發生。
15

滑鼠懸停

當滑鼠指針移出元素時發生。
16

滑鼠懸停

當滑鼠指針移到元素上時發生。
17

滑鼠組

在釋放滑鼠按鈕時發生。
18

調整大小

在調整窗口大小時發生。
19

捲軸

在滾動窗口時發生。
20

選擇

在選定文本時發生。
21

提交

提交表單時發生。
22

卸載

在卸載文檔時發生。

The Event Object

回調函數接受單個參數;調用處理程序時，JavaScript事件對象將通過它傳遞。

事件對象通常是不必要的，參數也被省略，因爲當處理程序被綁定來確切知道在處理程序被觸發時需要做什麼時，通常有足夠的上下文可用，但是有一些屬性需要訪問。

The Event Attributes

Sr.No. Property & Description
1

阿爾特基

如果在觸發事件時按了Alt鍵，則設置爲true;否則設置爲false。Alt鍵在大多數Mac鍵盤上被標記爲Option。
2

克特爾基

如果在觸發事件時按了Ctrl鍵，則設置爲true;否則設置爲false。
3

數據

該值（如果有）在建立處理程序時作爲第二個參數傳遞給bind（）命令。
4

密碼

對於keyup和keydown事件，這將返回按下的鍵。
5

元鍵

如果在觸發事件時按下元鍵，則設置爲true;否則設置爲false。元鍵是PCs上的Ctrl鍵和Macs上的Command鍵。
6

第頁

對於滑鼠事件，指定事件相對於頁面原點的水平坐標。
7

我不知道。我不知道。

對於滑鼠事件，指定事件相對於頁面原點的垂直坐標。
8

相關目標

對於某些滑鼠事件，標識觸發事件時光標離開或輸入的元素。
9

螢幕X

對於滑鼠事件，指定事件相對於螢幕原點的水平坐標。
10

絲網

對於滑鼠事件，指定事件相對於螢幕原點的垂直坐標。
11

移位鍵

如果在觸發事件時按下了Shift鍵，則設置爲true;否則設置爲false。
12

目標

標識爲其觸發事件的元素。
13

時間戳

創建事件時的時間戳（以毫秒爲單位）。
14

類型

對於所有事件，指定觸發的事件類型（例如，單擊）。
15

哪個

對於鍵盤事件，指定導致事件的鍵的數字代碼;對於滑鼠事件，指定按了哪個按鈕（1表示左，2表示中，3表示右）。
Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

The Event Methods

有一個方法列表，可以對事件對象調用它−

Sr.No. Method & Description
1 preventDefault()

阻止瀏覽器執行默認操作。
2 isDefaultPrevented()

返回是否在此事件對象上調用過event.preventDefault（）。
3 stopPropagation()

停止事件到父元素的冒泡，防止任何父處理程序收到事件通知。
4 isPropagationStopped()

返回是否在此事件對象上調用了event.stopPropagation（）。
5 stopImmediatePropagation()

停止執行其餘處理程序。
6 isImmediatePropagationStopped()

返回是否曾對此事件對象調用event.stopImmediatePropagation（）。

Event Manipulation Methods

下表列出了與事件相關的重要方法;

Sr.No. Method & Description
1 bind( type, [data], fn )

爲每個匹配的元素將處理程序綁定到一個或多個事件（如單擊）。也可以綁定自定義事件。
2 off( events [, selector ] [, handler(eventObject) ] )

這與live相反，它移除綁定的live事件。
3 hover( over, out )

模擬懸停，例如在對象上移動和關閉滑鼠。
4 on( events [, selector ] [, data ], handler )

將處理程序綁定到所有當前和未來匹配元素的事件（如單擊）。也可以綁定自定義事件。
5 one( type, [data], fn )

將處理程序綁定到一個或多個事件，以便對每個匹配的元素執行一次。
6 ready( fn )

綁定一個在DOM準備好被遍歷和操作時要執行的函數。
7 trigger( event, [data] )

在每個匹配的元素上觸發事件。
8 triggerHandler( event, [data] )

觸發元素上的所有綁定事件處理程序。
9 unbind( [type], [fn] )

這與bind相反，它從每個匹配的元素中移除綁定事件。

Event Helper Methods

jQuery還提供了一組事件幫助函數，可以用來觸發事件來綁定上述任何事件類型。

Trigger Methods

下面是一個在所有段落上觸發blur事件的示例−

$("p").blur();

Binding Methods

Following is an example which would bind a 點擊 event on all the <div> −

$("div").click( function () { 
   // do something here
});
Sr.No. Method & Description
1

模糊（）

觸發每個匹配元素的模糊事件。
2

模糊（fn）

將函數綁定到每個匹配元素的模糊事件。
3

更改（）

觸發每個匹配元素的更改事件。
4

變化（fn）

將函數綁定到每個匹配元素的更改事件。
5

單擊（）

觸發每個匹配元素的單擊事件。
6

點擊（fn）

將函數綁定到每個匹配元素的click事件。
7

dblclick（）

觸發每個匹配元素的dblclick事件。
8

dblclick（fn）鍵

將函數綁定到每個匹配元素的dblclick事件。
9

錯誤（）

觸發每個匹配元素的錯誤事件。
10

錯誤（fn）

將函數綁定到每個匹配元素的錯誤事件。
11

焦點（）

觸發每個匹配元素的焦點事件。
12

焦點（fn）

將函數綁定到每個匹配元素的焦點事件。
13

向下鍵（）

觸發每個匹配元素的keydown事件。
14

按鍵（fn）

將函數綁定到每個匹配元素的keydown事件。
15

按鍵（）

觸發每個匹配元素的按鍵事件。
16

按鍵（fn）

將函數綁定到每個匹配元素的按鍵事件。
17

鍵控（）

觸發每個匹配元素的keyup事件。
18

鍵控（fn

將函數綁定到每個匹配元素的keyup事件。
19

負荷（fn）

將函數綁定到每個匹配元素的加載事件。
20

摩澤敦（fn）

將函數綁定到每個匹配元素的mousedown事件。
21

穆森特（fn）

將函數綁定到每個匹配元素的mouseenter事件。
22

穆塞萊夫（fn）

將函數綁定到每個匹配元素的mouseleave事件。
23

滑鼠移動（fn）

將函數綁定到每個匹配元素的mousemove事件。
24

滑鼠懸停（fn）

將函數綁定到每個匹配元素的mouseout事件。
25

滑鼠懸停（fn）

將函數綁定到每個匹配元素的mouseover事件。
26

滑鼠（fn）

將函數綁定到每個匹配元素的mouseup事件。
27

主題b b b調整大小（fn）/b/b

將函數綁定到每個匹配元素的resize事件。
28

滾動（fn）

將函數綁定到每個匹配元素的滾動事件。
29

選擇（）

觸發每個匹配元素的select事件。
30

選擇（fn）

將函數綁定到每個匹配元素的select事件。
31

提交（）

觸發每個匹配元素的提交事件。
32

提交（fn）

將函數綁定到每個匹配元素的提交事件。
33

卸載（fn）

將函數綁定到每個匹配元素的卸載事件。

jQuery - Ajax

AJAX是異步JavaScript和XML的縮寫，這種技術幫助我們從伺服器加載數據，而無需刷新瀏覽器頁面。

如果您是AJAX新手，我建議您先閱讀我們的AJAX教程。

JQuery是一個很好的工具，它爲開發下一代web應用程式提供了豐富的AJAX方法集。

Loading Simple Data

使用JQuery AJAX很容易加載任何靜態或動態數據。JQuery提供了load（）方法來完成這項工作−

Syntax

下面是load（）方法的簡單語法−

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

這是所有參數的描述;

  • URL−向其發送請求的伺服器端資源的URL。它可以是CGI、ASP、JSP或PHP腳本，可以動態地或從資料庫中生成數據。

  • 數據 − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.

  • callback−在將響應數據加載到匹配集的元素中之後調用的回調函數。傳遞給此函數的第一個參數是從伺服器接收的響應文本，第二個參數是狀態代碼。

Example

考慮下面的HTML文件，其中包含一個小JQuery編碼−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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請求。加載此文件後，所有內容都將填充到用IDstage標記的<div>中。假設我們的/jquery/result.html文件只有一行html−

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

單擊給定按鈕時，將加載result.html文件。

Getting JSON Data

伺服器會根據您的請求返回JSON字符串。JQuery實用程序函數getJSON（）解析返回的JSON字符串，並使返回的字符串作爲第一個參數提供給回調函數，以便採取進一步的操作。

Syntax

下面是getJSON（）方法的簡單語法−

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

這是所有參數的描述;

  • URL−通過GET方法聯繫的伺服器端資源的URL。

  • 數據 − An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.

  • 回調−請求完成時調用的函數。將響應體作爲JSON字符串消化後得到的數據值作爲第一個參數傳遞給此回調，狀態作爲第二個參數傳遞。

Example

考慮下面的HTML文件，其中包含一個小JQuery編碼−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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（）向指定的URLresult.json文件發起Ajax請求。加載此文件後，所有內容都將傳遞給回調函數，該函數最終將填充到標記爲IDstage的<div>中。假設result.json文件包含以下json格式的內容−

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

單擊給定按鈕時，將加載result.json文件。

Passing Data to the Server

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using 數據 parameter of any available Ajax method.

Example

這個例子演示了如何將用戶輸入傳遞給web伺服器腳本，該腳本將發送相同的結果並將其列印出來;

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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.phpscript−編寫的代碼;

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

現在，您可以在給定的輸入框中輸入任何文本，然後單擊「顯示結果」按鈕查看您在輸入框中輸入的內容。

JQuery AJAX Methods

您已經看到了使用JQuery的AJAX的基本概念。下表列出了所有重要的JQuery AJAX方法，您可以根據編程需要使用這些方法;

Sr.No. Methods & Description
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 Events

在AJAX調用過程的生命周期中，可以調用各種JQuery方法。根據不同的事件/階段，可以使用以下方法&負;

您可以查看所有ajax事件。

Sr.No. Methods & Description
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 - Effects

jQuery提供了一個非常簡單的接口來實現各種令人驚奇的效果。jQuery方法允許我們以最少的配置快速應用常用的效果。本教程涵蓋了創建視覺效果的所有重要jQuery方法。

Showing and Hiding Elements

顯示和隱藏元素的命令與我們期望的基本相同−show（）以包裝集的形式顯示元素，而hide（）以隱藏元素。

Syntax

下面是show（）方法的簡單語法−

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

這是所有參數的描述;

  • speed−表示三種預定義速度（「慢速」、「正常」或「快速」）之一的字符串，或運行動畫的毫秒數（例如1000）。

  • callback−此可選參數表示動畫完成時要執行的函數;對每個動畫元素執行一次。

下面是hide（）方法的簡單語法−

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

這是所有參數的描述;

  • speed−表示三種預定義速度（「慢速」、「正常」或「快速」）之一的字符串，或運行動畫的毫秒數（例如1000）。

  • callback−此可選參數表示動畫完成時要執行的函數;對每個動畫元素執行一次。

Example

考慮下面的HTML文件，其中包含一個小JQuery編碼−

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

這將產生以下結果&負;

Toggling the Elements

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

Syntax

下面是其中一個toggle（）方法的簡單語法−

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

這是所有參數的描述;

  • speed−表示三種預定義速度（「慢速」、「正常」或「快速」）之一的字符串，或運行動畫的毫秒數（例如1000）。

  • callback−此可選參數表示動畫完成時要執行的函數;對每個動畫元素執行一次。

Example

我們可以設置任何元素的動畫，例如包含圖像的簡單<div>

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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 Effect Methods

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

Sr.No. Methods & Description
1 animate( params, [duration, easing, callback] )

用於製作自定義動畫的函數。
2 fadeIn( speed, [callback] )

通過調整匹配元素的不透明度並在完成後觸發可選回調，淡入所有匹配元素。
3 fadeOut( speed, [callback] )

淡出所有匹配的元素，方法是將其不透明度調整爲0，然後將「顯示」設置爲「無」，並在完成後觸發可選回調。
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 Library Based Effects

要使用這些效果，您可以從jQuery UI Library下載最新的jQuery UI LibraryjQuery-UI-1.11.4.custom.zip，也可以使用Google CDN以與jQuery類似的方式使用它。

我們在HTML頁面中使用了Google CDN作爲jQuery UI的代碼片段，因此可以使用jqueryui−

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
Sr.No. Methods & Description
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 - Interactions

交互可以添加到任何元素的基本滑鼠行爲。通過使用交互，我們可以創建可排序的列表、可調整大小的元素、拖放行爲。交互還可以爲更複雜的小部件和應用程式生成很好的構建塊。

Sr.No. Interactions & Description
1 Drag able

對任何DOM元素啓用可拖動功能。
2 Drop able

使任何DOM元素都可以刪除。
3 Resize able

允許調整任何DOM元素的大小。
4 Select able

使一個DOM元素（或一組元素）可以選擇。
5 Sort able

使一組DOM元素可排序。

jQuery - Widgets

jQuery UI小部件是一個專門的jQuery插件。使用插件，我們可以對元素應用行爲。但是，插件缺乏一些內置功能，例如將數據與其元素關聯、公開方法、將選項與默認值合併以及控制插件生存期的方法。

Sr.No. Widgets & Description
1 Accordion

啓用此選項可摺疊被分解爲邏輯部分的內容。
2 Autocomplete

啓用以在鍵入欄位時提供建議。
3 Button

按鈕是submit和anchor類型的輸入。
4 Datepicker

它是在一個小的覆蓋打開一個交互式日曆。
5 Dialog

對話框是在HTML頁面上顯示信息的好方法之一。
6 Menu

菜單顯示項目列表。
7 Progressbar

它顯示了進度信息。
8 Select menu

啓用可選擇元素/元素的樣式。
9 Slider

基本滑塊是水平的，有一個可以用滑鼠或箭頭鍵移動的手柄。
10 Spinner

它提供了從集合中選擇一個值的快速方法。
11 Tabs

它用於在分成邏輯部分的內容之間進行交換。
12 Tooltip

它爲用戶提供提示。

jQuery - Theming

Jquery有兩個不同的樣式主題A和B，每個主題的按鈕、欄、內容塊等都有不同的顏色。

J query主題化的語法如下所示−

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

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

Live Demo 
<!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>

這將產生以下結果&負;

下面是一個簡單的主題化示例;

Live Demo 
<!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 - Utilities

Jquery以$（名稱空間）的格式提供了一些實用程序。這些方法有助於完成編程任務。一些實用方法如下所示。

$.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()

$.in array（）用於返回數組中值的索引，如果值不在數組中，則返回-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（）用於返回一個始終在提供的作用域中運行的函數-即，將傳遞的函數中此函數的含義設置爲第二個參數

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

如果第二個參數提供的DOM元素是第一個參數提供的DOM元素的後代，則使用$.contains（）返回true，無論該元素是直接子元素還是嵌套得更深。

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

$.data()

$.data（）用於提供有關數據的信息

Live Demo 
<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原型

Live Demo 
<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（）用於識別窗口

Live Demo 
<!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（）用於執行隊列中的下一個函數

Live Demo 
<!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>

它提供如下所示的輸出;