基礎知識

jQuery - 基礎知識

jQuery 是一個使用 JavaScript 構建的框架。因此，盡管使用 jQuery 開發(fā)應用程序，你也可以使用 JavaScript 中所有可用的函數(shù)和其他功能。

本節(jié)將解釋基于 jQuery 的應用程序中最基本的但經(jīng)常使用的概念。

字符串

字符串在 JavaScript 中是一個不可變的對象，包括 0 個、一個或多個字符。

以下是 JavaScript 字符串的正確的例子 ——

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

數(shù)字

數(shù)字在 JavaScript 中是 64 位格式 IEEE 754 雙精度值。它們和字符串一樣，也是不可變的。

以下是 JavaScript 數(shù)字的正確的例子 ——

5350
120.27
0.26

布爾值

JavaScript 中布爾值是 true 或者 false。如果一個數(shù)字是 0，它默認為 false。如果一個字符串為空，它也默認為 false ——

以下是 JavaScript 布爾值的正確的例子 ——

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

對象

JavaScript 同樣也支持對象的概念。你可以使用對象文字創(chuàng)建一個對象，如下所示 ——

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

你也可以使用點符號來讀或?qū)憣傩?，如下所?——

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

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

數(shù)組

你可以使用數(shù)組文字定義數(shù)組，如下所示 ——

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

數(shù)組有 length 屬性，這對迭代是非常有用的 ——

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

函數(shù)

在 JavaScript 中的函數(shù)可以是命名的或匿名的。命名函數(shù)可以使用 function 關鍵字定義，如下所示 ——

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

匿名函數(shù)可以用定義正常函數(shù)一樣的方式定義，但它不會有任何的名字。

匿名函數(shù)可以被分配給一個變量或傳遞給一個方法，如下所示。

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

jQuery 會頻繁使用匿名函數(shù)，如下所示 ——

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

參數(shù)

JavaScript 變量 arguments 是一種帶有長度屬性的數(shù)組。下面的例子會很好的解釋這一點 ——

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

參數(shù)對象也有 callee 屬性，指向內(nèi)部函數(shù)。例如 ——

function func() {
   return arguments.callee; 
}
func();                // ==> func

上下文

JavaScript 著名的關鍵字 this 總是指當前上下文。在一個函數(shù)中，this 上下文可以改變，這取決于函數(shù)調(diào)用的方式 ——

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

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

你可以使用函數(shù)內(nèi)置的方法 call() 和 apply() 為函數(shù)調(diào)用指定上下文。

這兩種方法之間的區(qū)別是它們傳遞參數(shù)的方式。Call 方法通過將所有參數(shù)作為參數(shù)傳遞給函數(shù)，而 apply 方法只接受數(shù)組作為參數(shù)。

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 代碼中的任何位置。

• 局部變量 —— 局部變量只能在該變量被定義的函數(shù)中可見。函數(shù)的參數(shù)對該函數(shù)來說是局部的。

在一個函數(shù)體中，同名的局部變量優(yōu)先于全局變量 ——

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

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

回調(diào)

回調(diào)是一個簡單的 JavaScript 函數(shù)，作為參數(shù)或選擇傳遞給一些方法。一些回調(diào)就是事件，當觸發(fā)某種狀態(tài)時，給用戶做出反應的機會，就會調(diào)用回調(diào)。

jQuery 的事件系統(tǒng)會在任何位置使用回調(diào)，例如 ——

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

大所數(shù)回調(diào)提供了參數(shù)和上下文。在事件處理程序的示例中，使用一個 Event 參數(shù)調(diào)用回調(diào)。

一些回調(diào)是必需的，其他返回值是可選的。為了阻止表單提交，提交事件處理程序會返回一個錯誤，如下所示 ——

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

閉包

當定義在當前作用域外的一個變量被內(nèi)部作用域接收時，閉包就會被創(chuàng)建。

下面的例子顯示了變量 counter 在 creat、increment 以及 print 函數(shù)中是可見的，但在這些函數(shù)外部是不可見的 ——

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

      print: function() {
         console.log(counter);
      }
   }
}
var c = create();
c.increment();
c.print();     // ==> 1

這種模式允許你創(chuàng)建帶有操作數(shù)據(jù)的對象，該對象對外不可見。應該注意的是，數(shù)據(jù)隱藏是面向?qū)ο缶幊痰幕A。

代理模式

代理是一個對象，可以用來控制訪問另一個對象。它為另一對象實現(xiàn)了相同的接口并傳遞了任何方法來調(diào)用它。這里的另一對象通常被稱為真正的主題。

代理可以被實例化來代替這真正的主題并允許遠程訪問。我們可以在閉包中節(jié)省 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);
   };
})();

上述方法將它的代碼包裝在函數(shù)中來隱藏代理變量。然后代理會記錄所有方法的調(diào)用并調(diào)用原始方法。使用 apply(this, arguments) 方法保證調(diào)用者不能區(qū)分原件及代理方法之間的區(qū)別。

內(nèi)置函數(shù)

JavaScript 帶有一組有用的內(nèi)置函數(shù)。這些方法可以用來操縱字符串、數(shù)字和日期。

以下是重要的 JavaScript 函數(shù) ——

完整的 JavaScript 內(nèi)置函數(shù)列表可參考 —— 內(nèi)置函數(shù)

文檔對象模型

文檔對象模型是 HTML 各種元素的樹結(jié)構，如下所示 ——

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

這將產(chǎn)生如下所示結(jié)果 ——

下面是關于上述樹結(jié)構的重點 ——

• <html> 是所有其他元素的祖先；換句話說，所有其他元素是 < html> 的后代。

• <head> 和 < body> 元素不僅是 < html>的后代，還是 < html> 的孩子。

• 同樣，< html> 不僅是 < head> 和 < body> 的祖先，還是它們的父親。

• < p> 元素是 < div>元素的孩子(后代)，是 < body> 和 < html> 的后代，還是其他 < p>元素的同輩。

在學習 jQuery 概念時，對 DOM 有一定的了解是很有幫助的，如果你不了解 DOM，那么我建議你瀏覽一下我們的簡單教程 DOM 教程。