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 教程 的简单教程。