9.6 本章小结

  在本章中,我们介绍了如何操作DOM元素,从而使用JavaScript来更新HTML。正如你所见的,jQuery提供了功能更强大的方法来选择元素、修改元素甚至对其实现动画。我们还介绍了一个新的HTML属性---id,它允许给元素一个唯一的标识符。

在下一章中,我们将学习在JavaScript运行时如何控制它,例如,当定时器计时完成或者当单击一个按钮的时候。我们还会看到,如何多次运行相同的代码段,每次之间有一个延时,例如,每秒种更新一次时钟。

9.7 编程挑战

  尝试一下这些挑战,以使用jQuery 和DOM做更多的事情。

#1:用jQuery列出你的好朋友(让他们露出笑脸!)

创建包含一些朋友的名字的一个数组。使用for循环,为每个朋友创建一个p元素,并且使用jQuery的append方法把它们添加到body元素的末尾。使用jQuery修改h1元素,以便它和朋友们打招呼而不是说“Hello world!”。使用隐藏方法,后面跟着fadeIn方法,以淡入所提供的每个名字。

现在,修改你创建的p元素,在每个朋友后边增加一个文本“笑脸!”。提示:如果使用$(“p”)选择p元素,append方法会应用于所有的P元素。

#2:实现一个标题闪烁

如何使用fadeOut和fadeIn让标题一秒钟闪烁5次?可以使用for循环来实现吗?尝试修改这个循环,以便第1次用一秒钟来淡出和淡入,第2次用两秒种,第3次用三秒种,以此类推。

#3:延迟动画

delay方法可以用于延迟动画。使用delay方法、fadeOut方法和fadeIn方法,让页面上的元素淡出,然后过5秒钟再淡入回来。

#4:使用fadeTo方法

尝试使用fadeTo方法。它的第1个参数是一个毫秒数,就像其他所有动画方法一样。它的第2个参数是从0到1的一个数字。当运行下面的代码时,会发生什么情况?

$("h1").fadeTo(2000, 0.5);

你认为第2个参数表示什么?尝试使用0到1之间的不同的值,以便搞清楚第2个参数的用途。