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 。如果一个数为0，则默认为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

Context

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);
   };

})();

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

内置函数

JavaScript随附一组实用的内置函数。这些方法可以用于操作字符串、数字和日期。

以下是重要的JavaScript函数。

序号	方法与描述
1	charAt() 返回指定索引处的字符。
2	concat() 将两个字符串的文本组合在一起并返回一个新的字符串。
3	forEach() 对数组中的每个元素调用函数。
4	indexOf() 返回调用 String 对象中指定值第一次出现的索引，如果没有找到则返回 -1。
5	length() 返回字符串的长度。
6	pop() 从数组中移除最后一个元素并返回该元素。
7	push() 向数组末尾添加一个或多个元素，并返回新数组的长度。
8	reverse() 颠倒数组中元素的顺序，第一个变为最后一个，最后一个变为第一个。
9	sort() 对数组的元素进行排序。
10	substr() 返回字符串中从指定位置开始的指定数量的字符。
11	toLowerCase() 将调用字符串的值转换为小写。
12	toString() 返回数字值的字符串表示形式。
13	toUpperCase() 将调用字符串的值转换为大写。

文档对象模型

文档对象模型是HTML各个元素的树形结构。

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

以下是关于上述树状结构的重要要点：