《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)部分代码如下 #tbStu( width: 260px; border: solid lpx #666, background-color #eee) #tbStu tr( line-height: 23px) body> 学号姓名性别总分 男320 -偶数行 女350 王子夏男320 td>1002张浩杰> /body. (3)请完成以下任务 任务一:编写CSS样式,使标题行和表格行显示如图3-1所示的样式。(2分) 任务二:搭建 jQuery开发环境,编写 jQuery语句实现表格隔行变色?(3分) 本讲共计7页当前第2页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 2 页 （2）部分代码如下： 使用 jQuery 选择器实现隔行变色 body{font-size:12px;text-align:center} #tbStu{width:260px;border:solid 1px #666;background-color:#eee} #tbStu tr{line-height:23px} 学号姓名性别总分 1001张小明男320 1002李明琪女350 1001王子夏男320 1002张浩杰女350 （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 代码如下所示： $(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"); } }); }); （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)部分代码如下所示 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）部分代码如下所示： 打造自己的开心农场 图 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 页 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;
wb交互开发》实验教学指导/实验三:0y操作D6 cursor: hai #fut!/*控制结果按钮* background-image url(images/btn fruit png); width: 56px height: 56px; position: absolute left: 368px; cursor: hand pan span id="grow"> span id="fruit"> (4)完成下述任务。 任务一:分别点击播种、生长、开花、结果按钮显示不同的效果?(8分) 任务二:说明 append()与 prepend()的区别?(2分) 要求 请将上述实验任务的实验结果,填写到实验报告册中。 六、自主实验步骤(20分) 1、实现列表页面的曾理。 (1)页面页面如图3-5-1和3-5-2所示。 (2)完成下述任务 任务一:完成页面的编写。(5分) 任务二:编写单击全选按钮代码。(5分) 任务三:编写删除按钮代码。(5分) 任务四:当鼠标移动到图片上,显示大图。(5分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 本讲共计7页|当前第6页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 6 页 cursor:hand; } #fruit{ /*控制结果按钮*/ background-image:url(images/btn_fruit.png); width:56px; height:56px; position:absolute; top:229px; left:368px; cursor:hand; } （4）完成下述任务。 任务一：分别点击播种、生长、开花、结果按钮显示不同的效果？（8 分） 任务二：说明 append（）与 prepend（）的区别？（2 分） 要求： 请将上述实验任务的实验结果，填写到实验报告册中。 六、自主实验步骤（20 分） 1、实现列表页面的管理。 （1）页面页面如图 3-5-1 和 3-5-2 所示。 （2）完成下述任务。 任务一：完成页面的编写。（5 分） 任务二：编写单击全选按钮代码。（5 分） 任务三：编写删除按钮代码。（5 分） 任务四：当鼠标移动到图片上，显示大图。（5 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中
《Web交互开发》实验教学指导/实验三: jQuery操作DOM 选项编号 购书人性别购书价 选项编号封面购书人性别购书价 李小明男35.60元 曰|101 李小明男35.60元 1002 刘明明女37.元 女37.80元 |10 张厘星女45.80元 003 T星女6560元 口全选刪除」 口全选刪除 图3-5-1列表页面1 图3-5-2列表页面2 七、思考及问答(20分) 1、使用 jQuery网页开发的优势?(5分) 2、 jQuery选择器的种类有几种,分别是什么?(5分) 3、 jQuery如何获取和删除属性?(5分) 4、 jQuery中遍历节点的方法有哪些?(5分) 本讲共计7页当前第7页
《Web 交互开发》实验教学指导 / 实验三 ：jQuery 操作 DOM 本讲共计 7 页 | 当前第 7 页 七、思考及问答（20 分） 1、使用 jQuery 网页开发的优势？（5 分） 2、jQuery 选择器的种类有几种，分别是什么？（5 分） 3、jQuery 如何获取和删除属性？（5 分） 4、jQuery 中遍历节点的方法有哪些？（5 分） 图 3-5-1 列表页面 1 图 3-5-2 列表页面 2