《linux从入门到精通》实验指导第三讲：文件及目录操作

Size: px

Start display at page:

Download "《linux从入门到精通》实验指导第三讲：文件及目录操作"

嚣庞
6 years ago
Views:

Web 交互开发实验教学指导实验三 :jquery 操作 DOM 一实验目的 (5 分 ) 1 掌握 jquery 开发环境搭建的方法 ; 2 掌握 jquery 选择符的使用方法 ; 3 掌握 DOM 元素属性操作的方法 ; 4 掌握 DOM 元素的添加删除和复制等操作 ; 二实验环境 (5 分 ) 1 Windows XP/Windows 7 操作系统的计算机 ; 2

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 表格隔行变色本讲共计 7 页当前第 1 页

2 (2) 部分代码如下 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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) 导航条的作用 : 第一, 单击标题时, 可以伸缩导航条的内容, 同时,

所示图 3-2-1 导航条标题图 3-2-3 显示全部内容图 3-2-2 显示两行内容 (3) 部分 jquery 代码如下所示 : <script type="text/javascript"> $(function(){ $(".

clscontent").css("display","none"); else{ $(".clshead span img").attr("src","images/a2.gif"); $(".clscontent").css("display","block"); ); ); </script> (4) 请完成下面的任务 : 任务一 : 上述代码中 $(".

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") 和本讲共计 7 页当前第 3 页

$(".clscontent").css("display","none") 分别是什么意思 ; ( 3 分 ) 任务二 : 编写代码实现如图 3-2-2 与 3-2-3 所示的效果?

4 $(".clscontent").css("display","none") 分别是什么意思 ; ( 3 分 ) 任务二 : 编写代码实现如图与所示的效果?(7 分 ) 请将上述任务的操作方法, 填写到实验报告册中 3 搜索框操作 (1) 搜索框的操作, 失去焦点时如图所示, 失去焦点时如图所示图失去焦点图获取焦点 (2) 请完成下面的任务 : 任务一 : 开发代码, 显示效果如上图所示 (5 分 ) 任务二 : 设置和获取元素内容的方法有几种? 分别是什么, 它们有啥区别?(3 分 ) 任务三 : 如何设置元素的样式值?(2 分 ) 请将上述任务的操作方法, 填写到实验报告册中 4 开心农场的实现 (1) 使用 jquery 提供的对 DOM 节点进行操作的方法实现开心农场点击播种生长开花结果分别显示不同的效果提示 : 主要用到的函数有 remove() append() replacewith() 等 (2) 效果图如图 3-4 所示图开心农场 1 图开心农场 2 (3) 部分代码如下所示 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> 打造自己的开心农场 </title> 本讲共计 7 页当前第 4 页

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{ /* 控制图片 */ 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 页

6 #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) 页面页面如图和所示 (2) 完成下述任务任务一 : 完成页面的编写 (5 分 ) 任务二 : 编写单击全选按钮代码 (5 分 ) 任务三 : 编写删除按钮代码 (5 分 ) 任务四 : 当鼠标移动到图片上, 显示大图 (5 分 ) 请将完成上述任务的步骤, 填写到实验报告册中本讲共计 7 页当前第 6 页

图 3-5-1 列表页面 1 图 3-5-2 列表页面 2 七思考及问答 (20 分

7 图列表页面 1 图列表页面 2 七思考及问答 (20 分 ) 1 使用 jquery 网页开发的优势?(5 分 ) 2 jquery 选择器的种类有几种, 分别是什么?(5 分 ) 3 jquery 如何获取和删除属性?(5 分 ) 4 jquery 中遍历节点的方法有哪些?(5 分 ) 本讲共计 7 页当前第 7 页

《linux从入门到精通》实验指导第三讲：文件及目录操作

《linux从入门到精通》实验指导第三讲：文件及目录操作 Web 交互开发实验教学指导实验二 :JavaScript 编程应用一实验目的 (5 分 ) 1 掌握 JavaScript 内置对象的使用 ; 2 掌握 JavaScript 事件的使用 ; 3 掌握 JavaScript 图像处理的方法 ; 4 理解 JavaScript 编程的思路 ; 5 掌握 JavaScript 程序执行的过程二实验环境 (5 分 ) 1 Windows XP/Windows