基礎(chǔ)知識(shí)

jQuery - 基礎(chǔ)知識(shí)

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

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

字符串

字符串在 JavaScript 中是一個(gè)不可變的對(duì)象，包括 0 個(gè)、一個(gè)或多個(gè)字符。

以下是 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。如果一個(gè)數(shù)字是 0，它默認(rèn)為 false。如果一個(gè)字符串為空，它也默認(rèn)為 false ——

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

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

對(duì)象

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

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

你也可以使用點(diǎn)符號(hào)來(lái)讀或?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 屬性，這對(duì)迭代是非常有用的 ——

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 關(guān)鍵字定義，如下所示 ——

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

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

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

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

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

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

參數(shù)

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

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

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

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

上下文

JavaScript 著名的關(guān)鍵字 this 總是指當(dāng)前上下文。在一個(gè)函數(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 方法通過(guò)將所有參數(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

作用域

一個(gè)變量的作用域是該變量所在的程序的定義的范圍。JavaScript 變量將只有兩個(gè)作用域。

• 全局變量 —— 全局變量有全局作用域，意味著它可以被定義在 JavaScript 代碼中的任何位置。

• 局部變量 —— 局部變量只能在該變量被定義的函數(shù)中可見(jiàn)。函數(shù)的參數(shù)對(duì)該函數(shù)來(lái)說(shuō)是局部的。

在一個(gè)函數(shù)體中，同名的局部變量?jī)?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)是一個(gè)簡(jiǎn)單的 JavaScript 函數(shù)，作為參數(shù)或選擇傳遞給一些方法。一些回調(diào)就是事件，當(dāng)觸發(fā)某種狀態(tài)時(shí)，給用戶做出反應(yīng)的機(jī)會(huì)，就會(huì)調(diào)用回調(diào)。

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

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

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

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

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

閉包

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

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

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ù)的對(duì)象，該對(duì)象對(duì)外不可見(jiàn)。應(yīng)該注意的是，數(shù)據(jù)隱藏是面向?qū)ο缶幊痰幕A(chǔ)。

代理模式

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

代理可以被實(shí)例化來(lái)代替這真正的主題并允許遠(yuǎn)程訪問(wèn)。我們可以在閉包中節(jié)省 jQuery 的 setArray 方法，并按如下所示的方法重新編寫(xiě) ——

(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ù)中來(lái)隱藏代理變量。然后代理會(huì)記錄所有方法的調(diào)用并調(diào)用原始方法。使用 apply(this, arguments) 方法保證調(diào)用者不能區(qū)分原件及代理方法之間的區(qū)別。

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

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

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

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

文檔對(duì)象模型

文檔對(duì)象模型是 HTML 各種元素的樹(shù)結(jié)構(gòu)，如下所示 ——

<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é)果 ——

下面是關(guān)于上述樹(shù)結(jié)構(gòu)的重點(diǎn) ——

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

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

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

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

在學(xué)習(xí) jQuery 概念時(shí)，對(duì) DOM 有一定的了解是很有幫助的，如果你不了解 DOM，那么我建議你瀏覽一下我們的簡(jiǎn)單教程 DOM 教程。