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

数组有一个对于迭代有用的长度属性 -

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) 变量参数是一种具有长度属性的数组。下面的例子很好地解释了这一点 -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

参数对象还有一个被调用者属性，它指的是您所在的函数。例如 -

function func() {
   return arguments.callee;
}

func();                // ==> func

语境

JavaScript (jQuery) 著名的关键字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);
});

大多数回调提供参数和上下文。在事件处理程序示例中，使用一个参数（事件）调用回调。

有些回调需要返回某些内容，而另一些回调则使返回值可选。为了阻止表单提交，提交事件处理程序可以返回 false，如下所示 -

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

闭包

每当从某个内部作用域内访问当前作用域之外定义的变量时，就会创建 JavaScript (jQuery) 闭包。

以下示例显示了变量计数器如何在 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);
   };

})();

上面将其代码包装在一个函数中以隐藏代理变量。然后，代理记录对该方法的所有调用，并将该调用委托给原始方法。使用apply(this, argument)可以保证调用者无法注意到原始方法和代理方法之间的差异。

内置功能

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> 的后代，而且还是 <html> 的子元素。

• 同样，除了是 <head> 和 <body> 的祖先之外，<html> 也是它们的父级。

• <p> 元素是 <div> 的子元素（和后代）、<body> 和 <html> 的后代以及彼此 <p> 元素的同级元素。

在学习 jQuery 概念时，了解 DOM 会很有帮助，如果您不了解 DOM，那么我建议您阅读我们关于DOM 教程的简单教程。