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 表格隔行变色 本讲共计 7 页 当前第 1 页
(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> <th> 学号 </th><th> 姓名 </th><th> 性别 </th><th> 总分 </th> <!-- 奇数行 --> <td>1001</td><td> 张小明 </td><td> 男 </td><td>320</td> <!-- 偶数行 --> <td>1002</td><td> 李明琪 </td><td> 女 </td><td>350</td> <!-- 奇数行 --> <td>1001</td><td> 王子夏 </td><td> 男 </td><td>320</td> <!-- 偶数行 --> <td>1002</td><td> 张浩杰 </td><td> 女 </td><td>350</td> </tbody> </table> </body> </html> (3) 请完成以下任务 : 任务一 : 编写 CSS 样式, 使标题行和表格行显示如图 3-1 所示的样式 (2 分 ) 任务二 : 搭建 jquery 开发环境, 编写 jquery 语句实现表格隔行变色?(3 分 ) 本讲共计 7 页 当前第 2 页
任务三 : 将鼠标移到表格行时, 当前行高亮显示, 移开时恢复原来的样式 (5 分 ) 请将上述任务的操作方法, 填写到实验报告册中 2 导航条的使用 (1) 导航条的作用 : 第一, 单击标题时, 可以伸缩导航条的内容, 同时, 标题中的提示图片也随之改变 第二, 单击 简化 链接时, 隐藏指定的内容, 并将 简化 字样变成 更多, 单击 更多 链接时, 返回初始状态, 并改变指定显示元素的背景色 (2) 导航条的样式如图所示 3-2-1,3-2-2,3-3-3 所示 图 3-2-1 导航条标题 图 3-2-3 显示全部内容 图 3-2-2 显示两行内容 (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") 和 本讲共计 7 页 当前第 3 页
$(".clscontent").css("display","none") 分别是什么意思 ; ( 3 分 ) 任务二 : 编写代码实现如图 3-2-2 与 3-2-3 所示的效果?(7 分 ) 请将上述任务的操作方法, 填写到实验报告册中 3 搜索框操作 (1) 搜索框的操作, 失去焦点时如图 3-3-1 所示, 失去焦点时如图 3-3-2 所示 图 3-3-1 失去焦点 图 3-3-2 获取焦点 (2) 请完成下面的任务 : 任务一 : 开发代码, 显示效果如上图所示 (5 分 ) 任务二 : 设置和获取元素内容的方法有几种? 分别是什么, 它们有啥区别?(3 分 ) 任务三 : 如何设置元素的样式值?(2 分 ) 请将上述任务的操作方法, 填写到实验报告册中 4 开心农场的实现 (1) 使用 jquery 提供的对 DOM 节点进行操作的方法实现开心农场 点击播种 生长 开花 结果分别显示不同的效果 提示 : 主要用到的函数有 remove() append() replacewith() 等 (2) 效果图如图 3-4 所示 图 3-4-1 开心农场 1 图 3-4-2 开心农场 2 (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> 本讲共计 7 页 当前第 4 页
<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{ /* 控制图片 */ top:85px; left:195px; #seed{ /* 控制播种按钮 */ background-image:url(images/btn_seed.png); left:49px; #grow{ /* 控制生长按钮 */ background-image:url(images/btn_grow.png); left:154px; #bloom{ /* 控制开花按钮 */ background-image:url(images/btn_bloom.png); left:259px; 本讲共计 7 页 当前第 5 页
#fruit{ /* 控制结果按钮 */ background-image:url(images/btn_fruit.png); left:368px; </style> </head> <body> <div id="bg"> <span id="seed"></span> <span id="grow"></span> <span id="bloom"></span> <span id="fruit"></span> </div> </body> </html> (4) 完成下述任务 任务一 : 分别点击播种 生长 开花 结果按钮显示不同的效果?(8 分 ) 任务二 : 说明 append() 与 prepend() 的区别?(2 分 ) 请将上述实验任务的实验结果, 填写到实验报告册中 六 自主实验步骤 (20 分 ) 1 实现列表页面的管理 (1) 页面页面如图 3-5-1 和 3-5-2 所示 (2) 完成下述任务 任务一 : 完成页面的编写 (5 分 ) 任务二 : 编写单击全选按钮代码 (5 分 ) 任务三 : 编写删除按钮代码 (5 分 ) 任务四 : 当鼠标移动到图片上, 显示大图 (5 分 ) 请将完成上述任务的步骤, 填写到实验报告册中 本讲共计 7 页 当前第 6 页
图 3-5-1 列表页面 1 图 3-5-2 列表页面 2 七 思考及问答 (20 分 ) 1 使用 jquery 网页开发的优势?(5 分 ) 2 jquery 选择器的种类有几种, 分别是什么?(5 分 ) 3 jquery 如何获取和删除属性?(5 分 ) 4 jquery 中遍历节点的方法有哪些?(5 分 ) 本讲共计 7 页 当前第 7 页