jQuery - 基础知识( Basics)

jQuery是一个使用JavaScript功能构建的框架。因此，您可以使用JavaScript中提供的所有功能和其他功能。本章将解释大多数基本概念，但经常在jQuery中使用。

String

JavaScript中的字符串是一个不可变对象，它包含无，一个或多个字符。以下是JavaScript字符串的有效示例 -

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

Numbers

JavaScript中的数字是双精度64位格式IEEE 754值。它们是不可变的，就像字符串一样。以下是JavaScript编号的有效示例 -

5350
120.27
0.26

Boolean

JavaScript中的布尔值可以是true或false 。如果数字为零，则默认为false。如果空字符串默认为false。

以下是JavaScript布尔值的有效示例 -

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

Objects

JavaScript非常支持Object概念。您可以使用对象文字创建对象，如下所示 -

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

Arrays

您可以使用数组文字定义数组，如下所示 -

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

功能 (Functions)

JavaScript中的函数可以是命名的，也可以是匿名的。可以使用function关键字定义命名函数，如下所示 -

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

匿名函数可以与普通函数类似的方式定义，但它没有任何名称。

可以将匿名函数分配给变量或传递给方法，如下所示。

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

JQuery非常频繁地使用匿名函数，如下所示 -

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

参数 (Arguments)

JavaScript变量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着名的关键字总是指当前的上下文。在函数中， this上下文可以更改，具体取决于函数的调用方式 -

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

您可以使用函数内置方法call()和apply()方法为函数调用指定上下文。

它们之间的区别在于它们如何传递参数。调用将所有参数作为参数传递给函数，而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

Scope

变量的范围是程序中定义它的区域。 JavaScript变量只有两个范围。

Global Variables - 全局变量具有全局范围，这意味着它在JavaScript代码中的任何位置都定义。
Local Variables - 局部变量仅在定义它的函数中可见。函数参数始终是该函数的本地参数。

在函数体内，局部变量优先于具有相同名称的全局变量 -

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

Callback

回调是一个普通的JavaScript函数，作为参数或选项传递给某个方法。一些回调只是事件，被调用以使用户有机会在触发某个状态时做出反应。

例如，jQuery的事件系统在所有地方使用这样的回调 -

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

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

一些回调需要返回一些东西，其他回调值则是可选的。为了防止表单提交，提交事件处理程序可以返回false，如下所示 -

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

Closures

只要从某个内部作用域内访问在当前作用域之外定义的变量，就会创建闭包。

下面的示例显示了变量counter如何在创建，增量和打印功能中可见，但不在其外部 -

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

此模式允许您使用对外部世界不可见的数据进行操作的方法创建对象。应该注意， data hiding是面向对象编程的基础。

代理模式

代理是一个可用于控制对另一个对象的访问的对象。它实现与此其他对象相同的接口，并将任何方法调用传递给它。这个其他对象通常被称为真实主题。

可以实例化代理来代替该真实主题，并允许远程访问它。我们可以在一个闭包中保存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函数 -

Sr.No.	方法和描述
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 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>

这将产生以下结果 -

新页面打开

以下是关于上述树形结构的重点 -

html是所有其他元素的祖先;换句话说，所有其他元素都是html的后代
head和body元素不仅是的后代，而且还是其子元素。
同样，html除了是head和body的祖先之外，还是它们的父类。
p元素是div的子元素(和子元素)、body和html的子元素(和子元素)以及相互之间的p元素的兄弟元素。

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

<上一篇.jQuery - 概述

jQuery - 选择器( Selectors).下一篇>

jQuery - 教程

jQuery - 概述