上QQ阅读APP看书，第一时间看更新
5.6 综合实例：实现我的开心小农场
通过jQuery可以很方便地对DOM节点进行操作，下面就通过“我的开心小农场”实例，来说明通过jQuery操作DOM节点的具体应用。
本实例的需求主要有以下两点：
（1）在页面中引入农场图片，单击“播种”“生长”“开花”“结果”按钮时，在农场中显示相应效果。
（2）在IE6之前版本的浏览器下，png格式图片有背景，将其处理为透明效果。
运行本实例，将显示如图5.15所示的效果，单击“播种”按钮，将显示如图5.16所示的效果，单击“生长”按钮，将显示如图5.17效果，单击“开花”按钮，将显示如图5.18的效果，单击“结果”按钮，将显示一棵结满果实的草莓秧。
图5.15 页面的默认运行结果
图5.16 单击“播种”按钮的结果
图5.17 单击“生长”按钮的结果
图5.18 单击“开花”按钮的结果
【例5.11】我的开心小农场。（实例位置：光盘\TM\sl\5\11）
（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的代码解决PNG图片背景不透明的问题。
<!--使用jQuery解决PNG图片背景不透明的问题-->
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery.pngFix.js"></script>
<script src="../js/jquery.pngFix.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bg").pngFix();
});
</script>
（2）在页面的<body>标记中，添加一个显示农场背景的<div>标记，并且在该标记中添加4个<span>标记，用于设置控制按钮，代码如下：
<div id="bg">
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
</div>
（3）编写CSS代码，控制农场背景、控制按钮和图片的样式，具体代码参见光盘。
（4）编写jQuery代码，分别为播种、生长、开花和结果按钮绑定单击事件，并在其单击事件中应用操作DOM节点的方法控制作物的生长，具体代码如下：
<script type="text/javascript">
$(document).ready(function(){
$("#seed").bind("click", function(){ //绑定播种按钮的单击事件
$("#temp").remove(); //移除img元素
$("#bg").prepend("<span id='temp'><img src='images/seed.png' /></span>");
});
$("#grow").bind("click", function(){ //绑定生长按钮的单击事件
$("#temp").remove(); //移除img元素
$("#bg").append("<span id='temp'><img src='images/grow.png' /></span>");
});
$("#bloom").bind("click", function(){ //绑定开花按钮的单击事件
$("#temp").replaceWith("<span id='temp'><img src='images/bloom.png' /></span>");
});
$("#fruit").bind("click", function(){ //绑定结果按钮的单击事件
$("<span id='temp'><img src='images/fruit.png' /></span>").replaceAll("#temp");
});
$("#seed, #grow, #bloom, #fruit").bind("click", function(){ //为多个按钮绑定单击事件
$("#temp").pngFix(); //控制IE6下PNG图片背景透明
$("#temp").css({"position":"absolute", "top":"85px", "left":"195"});
});
});
</script>
注意
$("tr:odd")和$("tr:even")选择器中索引是从0开始的，因此第一行是偶数行。