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

昨天 14:13 上传

　　每次button被点击了，绿色的div就会收起或者展开，然后添加一个新的“hi”到div中。

　　事件驱动造成的问题

　　下面这段代码看起来够简单的吧：

//set h to 200

var h = 200;

$(document).ready(function(){

$("button").click(function(){

//animate up to h, 200 pixels high

$("div").animate({height:h});

});

复制代码

　　你可能只是希望div的高度到200px，但是事实上从*h*被赋值为200到动画真正发生之间还可能发生了很多事情导致最终的结果和你所期望的不一样。在一个复杂的jQuery应用中，变量*h*可能会被反复使用或者它的值被改写。你可能会发现div的高度只会达到50px而不是期望中的200px。这时候你需要去看看是不是别的代码改写了h的值，当执行*for (h=1; h<50; h++) {…}*来改变h的值时，你可能会有所发现。

　　坦白来说，这个问题并不是由jQuery或者匿名函数造成的，而是事件驱动编程本身就会遇到的问题。上述的代码的片段其实是在不同的时间点被执行的：

首次执行时（$(document).ready(…)）

页面加载完成后（$(“button”).click(…)）

button被点击后（$(“div”).animate(…)）

　　服务端的代码（比如PHP的程序）运行是有按照从头到尾的顺序的，从开始到结束，输入HTML以显示页面。JS也可以做到这一点，但是它如果和事件结合起来才能发挥最大作用，比如button点击事件。这就是事件驱动编程，可不仅仅只有JS是这样的编程哦。手机应用背后的程序很多也都是事件驱动的，比如Objective-C、Java或者C++在处理用户与屏幕互动这块也是使用事件驱动编程的。

　　如果上面的代码转成Java后再Android手机中运行，那么在最里层的函数中的h的引用就会出现错误。这是因为h并没有被声明为全局（或者是Java中的static）变量，所以里层的代码不知道h的值应该是什么。虽然了解这点也解决不了事件驱动造成的问题，不过至少以后你会想清楚要怎么使用变量。

　　避免上述问题的一个解决办法就是将你的变量放在适当的作用域中。在第一个匿名函数中声明var h变量来解决这个问题，这样局部变量h的优先级高于其他任何的全局变量h：

$(document).ready (function(){

//set h to 200

var h = 200;

$("button").click (function(){

//animate up to h, 200 pixels high

$("div").animate ({height:h});

});

复制代码

　　如果你一定要使用全局变量，那就将这些全局变量命名、组合好，并在你的代码中加上适当的comment：

//properties of the animation

var animationConfig = {upToHeight:200};

//when document is loaded

$(document).ready(function(){

//when any <button> element is clicked

$("button").click(function(){

//change the height of all <div>s

$("div").animate({height:animationConfig.upToHeight});

});

复制代码

　　结论

　　这篇文章是一篇针对初学者的介绍JS语法和如何使用jQuery使用的指南。jQuery只是一个JS库，它有一个很看起来很特别的函数：$，推荐在jQuery中使用对象的简写形式、匿名函数还有方法链。类似的库还有YUI(Yahoo User Interface)。

　　现在再看jQuery的代码时，你是不是不会再抱有过去的疑问和不确定了呢?你已经知道它要做什么了。虽然由于事件驱动编程的复杂性，你可能不确定什么时候使用它，但是你会知道怎么做。