jQuery对象入门级介绍(2)_H5之家 - 中国HTML5教程资源分享第一站

$(document).ready(…);

复制代码

　　下一节你将知道ready的作用是什么。

　　关键点

　　将对象简写：{name:”Digger”, species:”gerbil”}，在方法中使用到的this是依附于一个对象(或者一个方法)的，它指向包含它的对象。

　　匿名函数

　　在JS中，创建函数的方法多种多样。只要你有一点编程经验那对下面的函数声明就不会陌生：

function meepMeep(){

alert("meep meep");

}

复制代码

　　在上文里我们已经知道了函数是可以被赋值到变量上的。我们创建了meepMeep函数，并将它赋值到digger.speak上。事实上，函数还可以被匿名地创建出来（我们称呼这样的函数为：函数表达式），它们在声明时是没有任何名字的，声明后再被赋值到一个变量上：

var meepMeep = function(){

alert("meep meep");

};

复制代码

　　在JS中，函数可以被赋值到变量上，还能像变量一样到处传递。让我们看看下面这个例子：

function runMe(f){

f();

}

复制代码

　　runMe函数有一个传入参数f，它将这个传入参数视作一个函数，还调用的这个函数。所以你可以这么使用runMe：

runMe(function(){

alert("meep meep");

});

复制代码

　　这样meepMeep函数就会被成功调用。如果在这个方法里，你连meepMeep的名字都不需要了，那事情就会更有趣些了。你可以直接创建它，当需要的时候再把它传入runMe来调用这个函数：

meepMeep();

复制代码

　　事实上，哪里都会出现meepMeep，等同于它的匿名函数也是这样的。这么调用：

(function(){

alert("meep meep");

})();

复制代码

　　不像上面那样，你可以用匿名函数替换掉meepMeep，虽然使用匿名函数的时候你需要在最外层添加一组括号：

1.jpg (27.06 KB, 下载次数: 0)

下载附件

昨天 14:10 上传

　　在JS中，这种写法常常是用在制造变量作用域上。你能不能猜到下面这段代码的输出是什么呢？

var x=3;

(function(){

var x=4; console.log("x is " + x);

})();

console.log ("x is " + x);

复制代码

　　在匿名函数里的var是解题的关键点。通过var，我们在函数内定义了一个局部变量x，它的值是4，然后通过console.log输出这个值。因为var这个关键词，函数内的x和函数外的值为3的x就是互相独立的。因此这段代码会将4和3先后打印出来。

　　现在我们的沙鼠已经不会发出尖锐的声音了，所以在代码中我们不再使用alert改用console.log来打印它的结果。在现代浏览器中console.log*是可以使用的(换言之，IE浏览器低版本中无法使用它)，使用console.log就能安静地在浏览器控制台中输出信息。

　　我们接着就要讲匿名函数了。jQuery的ready方法可以说是上文中的runMe函数的延时版。ready方法中的内容会等到DOM完全加载完会后在运行。所以等到document加载完成了，下面的匿名函数才会运行:

function(){

$("button").click (…)

}

复制代码

　　如果需要在HTML文档加载完后再执行一些动作的话，程序员们通常会使用$(document).ready(…)。

　　关键点

　　匿名函数就是没有名字的函数，像function(){alert(1);}这样。它们可以被赋值到变量上、被传递到其他函数中也可以立即执行以创建出一个作用域来。

　　方法链

　　在更详细地分析代码之前，我们要先介绍JS中一个常见的内容：方法链。方法链指的是在一行代码中执行多个函数。这真的只是上述giveMeTheGerbil()的一个扩展：

giveMeTheGerbil().sayMyName();

复制代码

　　现在让我们要重新定义一下gerbil相关的方法来返回他们的引用。

digger.speak = function(){

alert("meep meep"); return this;

}

digger.sayMyName = function(){

alert("Meep! I am a " + this.species); return this;

}

复制代码

　　这两个函数都是对digger做了一些处理后返回digger对象。代码没有做什么改动，但是将digger对象返回以后，就可以把函数串在一起使用：

giveMeTheGerbil().speak().sayMyName().speak();

复制代码

　　giveMeTheGerbil先运行，返回了digger对象的引用。所以上面那行代码等价于：

digger.speak().sayMyName().speak();

复制代码

　　下一步，digger对象的speak方法运行后弹窗出’meep meep’。这也能返回digger的引用，然后这行代码就变成：

digger.sayMyName().speak();

复制代码

　　在这之后，sayMyName运行后返回digger的引用……运行后会出现三个警告框：‘meep meep. Meep! I am a gerbil, meep meep’。这样的链式效果常常出现在JS中，你可能在字符串（string）对象中见到这个：