jQuery - 基礎

---

---

在我們開始學習 jQuery 語法之前，讓我們快速瀏覽一下 JavaScript 的基本概念。這是因為 jQuery 是一個使用 JavaScript 功能構建的框架。因此，在使用 jQuery 時，您可以使用 JavaScript 中所有可用的函式和其他功能。所以讓我們快速瞭解一下最基本的概念，但這些概念在 jQuery 中最常用。

字串

JavaScript (jQuery) 中的字串是一個不可變的物件，它包含零個、一個或多個字元。以下是 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 (jQuery) 中的布林值可以是 true 或 false。如果一個數字為零，則預設為 false。如果一個空字串預設為 false。

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

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

物件

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

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 (jQuery) 中的函式可以是命名函式或匿名函式。命名函式可以使用 function 關鍵字定義，如下所示：

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

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

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

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

JQuery 經常使用匿名函式，如下所示：

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

引數

JavaScript (jQuery) 變數 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 (jQuery) 著名的關鍵字 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 (jQuery) 變數只有兩個作用域。

• 全域性變數 - 全域性變數具有全域性作用域，這意味著它在您的 JavaScript 程式碼中隨處可見。

• 區域性變數 - 區域性變數僅在其定義的函式內可見。函式引數始終是該函式的區域性變數。

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

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

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

回撥

回撥是一個普通的 JavaScript (jQuery) 函式，作為引數或選項傳遞給某些方法。一些回撥只是事件，用於在觸發特定狀態時為使用者提供做出反應的機會。

jQuery 的事件系統在各個地方都使用這樣的回撥，例如：

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

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

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

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

閉包

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

下面的示例顯示了變數 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 函式：

文件物件模型

文件物件模型是 HTML 各種元素的樹狀結構，如下所示。嘗試單擊圖示 以執行以下 jQuery 程式碼：

<html>
<head>
   <title>The DOM 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 教程 的簡單教程。