《Web交互开发》实验教学指导/实验三: jQuery操作DOM 《Web交互开发》实验教学指导 实验三: jQuery操作DOM 、实验目的(5分) 1、掌握 jQuery开发环境搭建的方法; 2、掌握 jQuery选择符的使用方法 3、掌握DOM元素属性操作的方法 4、掌握DOM元素的添加、删除和复制等操作 二、实验环境(5分) 1、 Windows xp/ Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、完成表格隔行变色 2、完成导航条的使用 3、完成搜索框的操作 4、完成开心农场的实现; 四、实验原理(5分) l、 jQuery开发环境搭建 2、选择器的使用 3、DOM的操作方法 五、实验步骤(40分) 1、表格隔行变色 (1)表格隔行变色:打开网页后,实现奇数行与偶数行颜色显示不同。具体效果如图3-1 所示 学号 姓名 性别 101张小明男30 李明琪 女 王子夏 男 320 1002 张浩杰 女 图3-1表格隔行变色 本讲共计7页当前第1页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验三：jQuery 操作 DOM 一、实验目的（5 分） 1、掌握 jQuery 开发环境搭建的方法； 2、掌握 jQuery 选择符的使用方法； 3、掌握 DOM 元素属性操作的方法； 4、掌握 DOM 元素的添加、删除和复制等操作； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成表格隔行变色； 2、完成导航条的使用； 3、完成搜索框的操作； 4、完成开心农场的实现； 四、实验原理（5 分） 1、jQuery 开发环境搭建； 2、选择器的使用； 3、DOM 的操作方法； 五、实验步骤（40 分） 1、表格隔行变色 （1）表格隔行变色：打开网页后，实现奇数行与偶数行颜色显示不同。具体效果如图 3-1 所示： 图 3-1 表格隔行变色
《Web交互开发》实验教学指导/实验三: jQuery操作DOM (2)部分代码如下 <lDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN mII/DTD/xhtmll-transitionaldtd chtmlxmins="hTtp://www.w3.org/1999/xhtml"> <head> <te。使用 jQuery选择器实现隔行变色< title <style type="text/css"> #tbStu( width: 260px; border: solid lpx #666, background-color #eee) #tbStu tr( line-height: 23px) </style> body> <table id="tbStu"cellpadding="0"cellspacing=0"> <h>学号<th><th>姓名<th><th>性别<h><th>总分<h> <!-奇数行-> <td100l</d<d张小明</d><td>男</td><td>320<td> -偶数行 <td1002</td><td李明琪</td><td>女</td><td>350</d !-奇数行-> <td1001</td><td>王子夏<td><td>男<td><td>320</td </tr> <!-偶数行-> td>1002</d><td>张浩杰</td<d女</td><td350</td </tbody>> /body. </html> (3)请完成以下任务 任务一:编写CSS样式,使标题行和表格行显示如图3-1所示的样式。(2分) 任务二:搭建 jQuery开发环境,编写 jQuery语句实现表格隔行变色?(3分) 本讲共计7页当前第2页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 2 页 （2）部分代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用 jQuery 选择器实现隔行变色</title> <style type="text/css"> body{font-size:12px;text-align:center} #tbStu{width:260px;border:solid 1px #666;background-color:#eee} #tbStu tr{line-height:23px} </style> </head> <body> <table id="tbStu" cellpadding="0" cellspacing="0"> <tbody> <tr> <th>学号</th><th>姓名</th><th>性别</th><th>总分</th> </tr> <!--奇数行--> <tr> <td>1001</td><td>张小明</td><td>男</td><td>320</td> </tr> <!--偶数行--> <tr> <td>1002</td><td>李明琪</td><td>女</td><td>350</td> </tr> <!--奇数行--> <tr> <td>1001</td><td>王子夏</td><td>男</td><td>320</td> </tr> <!--偶数行--> <tr> <td>1002</td><td>张浩杰</td><td>女</td><td>350</td> </tr> </tbody> </table> </body> </html> （3）请完成以下任务： 任务一：编写 CSS 样式，使标题行和表格行显示如图 3-1 所示的样式。（2 分） 任务二：搭建 jQuery 开发环境，编写 jQuery 语句实现表格隔行变色？（3 分）
《Web交互开发》实验教学指导/实验三: jQuery操作DOM 任务三:将鼠标移到表格行时,当前行高亮显示,移开时恢复原来的样式。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、导航条的使用 (1)导航条的作用:第一,单击标题时,可以伸缩导航条的内容,同时,标题中的 提示图片也随之改变。第二,单击“简化”链接时,隐藏指定的内容,并将“简化”字样 变成“更多”,单击“更多”链接时,返回初始状态,并改变指定显示元素的背景色 (2)导航条的样式如图所示3-2-1,3-2-2,3-3-3所示。 图书分类 图3-2-1导航条标题 小说(H0)文艺(230)青查(A3 少儿(1580)生活(870)社社(N60) 管理(A450)计算机(1780数直(90) 工具书(刘5引进版(980)其它类(20 图书分类 简化》 小说(0)文艺(23)青看(143) 少儿(1560)生活(80)其它类(23 图3-2-3显示全部内容 图3-2-2显示两行内容 (3)部分 jQuery代码如下所示 ipt type=text/javascript SC".clsHead").click(function O( if(s(. clscContent")is(" visible")) s(". clsHead Images/al. gif"); sC.clsContent"). css(display Helsel S".clsHead span img"). attr("src","Images/a2.gif"); s(".clsContent").css("display", "block"); ) ); /script (4)请完成下面的任务 任务一:上述代码中S(" . clsHead span img")at"sr;" Images/al. gif" 本讲共计7页当前第3页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 3 页 任务三：将鼠标移到表格行时，当前行高亮显示，移开时恢复原来的样式。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、导航条的使用 （1）导航条的作用：第一，单击标题时，可以伸缩导航条的内容，同时，标题中的 提示图片也随之改变。第二，单击“简化”链接时，隐藏指定的内容，并将“简化”字样 变成“更多”，单击“更多”链接时，返回初始状态，并改变指定显示元素的背景色。 （2）导航条的样式如图所示 3-2-1，3-2-2，3-3-3 所示。 （3）部分 jQuery 代码如下所示： <script type="text/javascript"> $(function(){ $(".clsHead").click(function(){ if($(".clsContent").is(":visible")){ $(".clsHead span img").attr("src","Images/a1.gif"); $(".clsContent").css("display","none"); }else{ $(".clsHead span img").attr("src","Images/a2.gif"); $(".clsContent").css("display","block"); } }); }); </script> （4）请完成下面的任务： 任务一：上述代码中$(".clsHead span img").attr("src","Images/a1.gif")和 图 3-2-1 导航条标题 图 3-2-2 显示两行内容 图 3-2-3 显示全部内容
wb交互开发》实验教学指导/实验三:0y操作DM4 s(" disContent")cs" display";"none")分别是什么意思;。(3分) 任务二:编写代码实现如图3-22与3-2-3所示的效果?(7分) 要求 请将上述任务的操作方法,填写到实验报告册中。 3、搜索框操作 (1)搜索框的操作,失去焦点时如图3-3-1所示,失去焦点时如图3-3-2所示 搜索:匾输入您要索的关键词 搜索:□ 图3-3-1失去焦点 图3-3-2获取焦点 (2)请完成下面的任务: 任务一:开发代码,显示效果如上图所示。(5分) 任务二:设置和获取元素内容的方法有几种?分别是什么,它们有啥区别?(3分) 任务三:如何设置元素的样式值?(2分) 要求: 请将上述任务的操作方法,填写到实验报告册中 开心农场的实现 (1)使用juey提供的对DOM节点进行操作的方法实现开心农场。点击播种、生长、开花、 结果分别显示不同的效果。提示:主要用到的函数有 remove(O、 append、 replace Witho等。 (2)效果图如图3-4所示。 孩的开心小农场 我的开心小农 图3-4-1开心农场1 图3-4-2开心农场2 (3)部分代码如下所示 <lDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtmll-transItiOnal.dtd"> chtmlxmins="htTp://www.w3.org/1999/xhtml> <head→ <metahttp-equiv="content-type"contenttexT/html;charset=utf-8"a title→打造自己的开心农场</ttle 本讲共计7页当前第4页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 4 页 $(".clsContent").css("display","none")分别是什么意思;。（3 分） 任务二：编写代码实现如图 3-2-2 与 3-2-3 所示的效果？（7 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、搜索框操作 （1）搜索框的操作，失去焦点时如图 3-3-1 所示，失去焦点时如图 3-3-2 所示。 （2）请完成下面的任务： 任务一：开发代码，显示效果如上图所示。（5 分） 任务二：设置和获取元素内容的方法有几种？分别是什么，它们有啥区别？（3 分） 任务三：如何设置元素的样式值？（2 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 4、开心农场的实现 （1）使用 jQuery 提供的对 DOM 节点进行操作的方法实现开心农场。点击播种、生长、开花、 结果分别显示不同的效果。提示：主要用到的函数有 remove()、append()、replaceWith()等。 （2）效果图如图 3-4 所示。 （3）部分代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>打造自己的开心农场</title> 图 3-3-1 失去焦点 图 3-3-2 获取焦点 图 3-4-1 开心农场 1 图 3-4-2 开心农场 2
Wdb交互开发》实验教学指导/实验三:0ey操作Do5 divi border #999 Ipx solid padding: 5px #bg{/*控制页面背景* width: 456px heigh background-image: url(images/plowland jpg) *控制图片* position absolute left: 195px; #sed(/*控制播种按钮* background-image url(images/btn seed. png) position absolute left: 49px /*控制生长按钮* background-image url(images/btn grow. png); width: 56p height: 56px; position absolute left: 154p cursor hand #bloom 控制开花按钮* Ind-lmageur s/btn bloom. pI width: 56px height: 56px; position. absolute, left: 259px 本讲共计7页当前第5页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 5 页 <style type="text/css"> div{ font-size:12px; border:#999 1px solid; padding:5px; } #bg{ /*控制页面背景*/ width:456px; height:266px; background-image:url(images/plowland.jpg); } img{ /*控制图片*/ position:absolute; top:85px; left:195px; } #seed{ /*控制播种按钮*/ background-image:url(images/btn_seed.png); width:56px; height:56px; position:absolute; top:229px; left:49px; cursor:hand; } #grow{ /*控制生长按钮*/ background-image:url(images/btn_grow.png); width:56px; height:56px; position:absolute; top:229px; left:154px; cursor:hand; } #bloom{ /*控制开花按钮*/ background-image:url(images/btn_bloom.png); width:56px; height:56px; position:absolute; top:229px; left:259px;