上一个实践主要对jquery的ready事件进行。本实践要来使用jQuery改变页面的背景图片。

可以先试试效果：

当你打开页面时，会看到一闪一闪的雪花效果。

这不是使用jQuery的效果，只是用CSS设置了背景图片为动态图而已。

本实践将要用jquery改变页面的背景图。

代码如下:

1  2  3  4 
      5  6 
      7  8  9 10 11 
     
      12 
      
何问起
13 
      
jQuery实践树(2) 
14 
      首页 
      原文 
      特效15 
      
 16 当你打开页面时，会看到一闪一闪的雪花效果。
      
这不是使用jQuery的效果，只是用CSS设置了背景图片为动态图而已。
      
本实践将要用jquery改变页面的背景图。请点击下列链接。
      
17 
      
18 
      圣诞节背景图 
      背景图1 
      背景图2 
      背景图319 
      还原 
      清除背景图片20 
     
21 31 32 

其中的$(document).ready(),表示当页面载入完后执行指定函数，请参考：

代码中， $("#backHoverTree1")，是jquery的选择器，表示选择id为backHoverTree1的元素，也就是

<a href="javascript:;" id="backHoverTree1" target="_self">背景图1</a>

这个链接的id为backHoverTree1，请注意这是区分大小写的。

jQuery # 选择器 也叫做id选择器

# 选取带有唯一的指定 id 的元素。

id 引用 HTML 元素的 id 属性。

相同的 id 值只能在文档中使用一次。

语法

$("#id")

其中的id为必需。规定所要选择的元素的 id。

id 选择器使用 HTML 元素的 id 属性。

注意不要使用数字开头的 ID 名称！在某些浏览器中可能出问题。

选择了元素后，就可以对元素进行操作了，代码中的on()函数表示附加一个函数来处理指定的事件

请参考：

$("#backHoverTree1").on("click", function () { });

其中click表示点击，表示当点击id为backHoverTree1的元素时执行function中的代码

上面代码中实际为

$("body").css("background-image", "url(http://hovertree.com/texiao/jquerytree/2/images/flower.jpg)")

这个语句表示设置body的背景图片为http://hovertree.com/texiao/jquerytree/2/images/flower.jpg

$("body")表示选择body元素，这是一个标签选择器

请参考：

选择之后，就是对body元素进行样式设置，也就是就是对body元素进行css()方法操作，css() 方法返回或设置匹配的元素的一个或多个样式属性。

一 返回 CSS 属性值

返回第一个匹配元素的 CSS 属性值。

注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。

$(selector).css(name)

其中 name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

二设置 CSS 属性

设置所有匹配元素的指定 CSS 属性。

$(selector).css(name,value)

其中 name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。

value可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。

如果设置了空字符串值，则从元素中删除指定属性。

本示例代码下载：

web前端：