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

Size: px

Start display at page:

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

霓醇盛
5 years ago
Views:

1 Web 前端开发实验教学指导实验七 :JQuery 实现网页动画一实验目的 1 理解 Web 交互的基本模式和概念 ; 2 掌握 Web 中 JavaScript 使用的基本方法 ; 3 了解 jquery 的特性及用法 ; 4 熟悉的 jquery 基本语法 ; 5 编写代码实现 jquery 的基本动画效果二实验环境 1 Windows XP/Windows Server 2003 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址 ; 3 支持互联网访问三实验要求 1 完成在 Web 中使用 jquery 的编写 ; 2 掌握 jquery 的基本语法, 并能够使用 jquery 编写基本动画 ; 3 完成 jquery 自主实验任务四实验原理 1 JavaScript 的基本语法 ; 2 HTML DOM 的基本原理和 Web 交互的基本原理 ; 3 jquery 语法 ; 4 动画设计的基本方法五实验步骤 1 在页面中使用 jquery 在 Web 中使用 jquery 有两种方法 : 方法一 : 下载 jquery 库, 然后把它包含在网页中 jquery 库是一个 JavaScript 文件, 可用 HTML 的 <script> 标签引用它具体方法如下 <head> <script src="jquery.js"></script> </head> jquery 的下载可以通过官方网站 ( 下载获得方法二 : 使用 Google 或 Mocrsoft 的云服务, 直接在 Web 中加载 CDN JQuery 核心文件具体的使用方法如下 1 使用 Google 的 CDN <script src=" 河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 1 页

2 2 使用 Microsoft 的 CDN <script src= ></script> 推荐在引用 jquery 时, 使用谷歌或微软的 jquery 这是因为许多用户在访问其他站点时, 已经从谷歌或微软加载过 jquery 当他们访问您的站点时, 会从缓存中加载 jquery, 这样可以减少加载时间同时, 大多数 CDN 都可以确保当用户向其请求文件时, 会从离用户最近的服务器上返回响应, 这样也可以提高加载速度本实验将具体使用 Google 或 Microsoft 的 CDN 来进行 jquery 的实现 Google jquery CDN 的详细资料请参考 : 2 使用 jquery 实现 POP 图片轮转 (1) 熟悉 jquery 的基本语法, 并掌握 jquery 使用的基本方法 (2) 用 jquery 实现 POP 图片轮转效果效果可参考实验素材中 11. 实验素材 \02. 实验案例 \7-1.html 参考代码 : <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery 简单的图片切换效果 </title> <style type="text/css" media="screen"> body { margin:40px auto; font: 12px arial; background: #fff; div { width:900px; margin:0px auto;.slideshow { position: relative; background: #fafafa; padding:4px; width: 900px; height: 600px; border: 1px solid #e5e5e5;.slideshow img { position: absolute; z-index: 1; background: #fff; ul.recentlist { position: absolute; list-style: none; z-index: 2; right: 10px; 河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 2 页

3 bottom: 2px; ul.recentlist li { margin: 0; padding: 0; display: inline; ul.recentlist li a, ul.recentlist li a:visited { display: block; float: left; background: #e5e5e5; padding: 4px 8px; margin:1px; color: #000; text-decoration: none; cursor: pointer; ul.recentlist li a:hover, ul.recentlist li a:visited:hover { background: #666; color: #fff; ul.recentlist li a.current { background: #f00; color: #fff; </style> <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { var imgwrapper = $('.slideshow > img'); imgwrapper.hide().filter(':first').show(); ); $('ul.recentlist li a').click(function () { ); if (this.classname.indexof('current') == -1){ </script> </head> <body> imgwrapper.hide(); imgwrapper.filter(this.hash).fadein(500); $('ul.recentlist li a').removeclass('current'); $(this).addclass('current'); return false; <div class="slideshow"> <ul class="recentlist"> <li><a class="current" href="#slide1">1</a></li> <li><a href="#slide2">2</a></li> <li><a href="#slide3">3</a></li> 河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 3 页

4 <li><a href="#slide4">4</a></li> <li><a href="#slide5">5</a></li> <li><a href="#slide6">6</a></li> <li><a href="#slide7">7</a></li> <li><a href="#slide8">8</a></li> <li><a href="#slide9">9</a></li> </ul> <img id="slide1" src="images/office-1.png" alt="" /> <img id="slide2" src="images/office-2.png" alt="" /> <img id="slide3" src="images/office-3.png" alt="" /> <img id="slide4" src="images/office-4.png" alt="" /> <img id="slide5" src="images/office-5.png" alt="" /> <img id="slide6" src="images/office-6.png" alt="" /> <img id="slide7" src="images/office-7.png" alt="" /> <img id="slide8" src="images/office-8.png" alt="" /> <img id="slide9" src="images/office-9.png" alt="" /> </body> </html> 3 使用 jquery 实现浏览器检测用 jquery 实现 POP 图片轮转效果效果可参考实验素材中 11. 实验素材 \02. 实验案例 \7-2.html 参考代码 : <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery 实现浏览器检测 </title> <script type="text/javascript" src=" <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ ) var bro=$.browser; var binfo=" 您的浏览器版本是 :"; if(bro.webkit) {binfo=binfo+"webkit "+bro.version; </script> if(bro.msie) {binfo=binfo+"microsoft Internet Explorer "+bro.version; if(bro.mozilla) {binfo=binfo+"mozilla Firefox "+bro.version; if(bro.safari) {binfo=binfo+"apple Safari / WebKit "+bro.version; if(bro.opera) {binfo=binfo+"opera "+bro.version; $("#browser").html(binfo); <style type="text/css"> body { div { margin:50px; 河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 4 页

5 color:#333; font-size:14px; font-family: 微软雅黑 ; </style> </head> <body> <div id="browser">browser Info </body> </html> 4 使用 jquery 实现表单验证 (1) 熟悉 jquery 中表单验证类的内容和使用方法 ; (2) 实现表单验证效果效果可参考实验素材中 11. 实验素材 \02. 实验案例 \7-3.html 参考代码 : <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery 实现表单验证 </title> <style type="text/css"> body { margin:50px; font:12px/19px Arial, Helvetica, sans-serif; color:#666; form div { margin:4px;.int label { float:left; width:100px; text-align:right;.int input { padding:1px; border:1px solid #ccc; height:16px;.sub { padding-left:100px;.sub input { margin-right:10px;.formtips{ width: 200px; margin:2px; 河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 5 页

6 padding:2px;.onerror{ background:#ffe0e9 center; padding-left:5px;.onsuccess{ background:#e9fbeb center; padding-left:5px;.high{ color:red; </style>  <script type="text/javascript" src=" <script type="text/javascript"> // 如果是必填的, 则加红星标识. $(function(){ $("form :input.required").each(function(){ var $required = $("<strong class='high'> *</strong>"); // 创建元素 $(this).parent().append($required); // 然后将它追加到文档中 ); // 文本框失去焦点后 $('form :input').blur(function(){ var $parent = $(this).parent(); $parent.find(".formtips").remove(); // 验证用户账号 if( $(this).is('#username') ){ if( this.value=="" this.value.length < 6 ){ var errormsg = ' 请输入至少 6 位的用户名.'; $parent.append(' <span class="formtips onerror">'+errormsg+'</span>'); else{ var okmsg = ' 输入正确.'; $parent.append(' <span class="formtips onsuccess">'+okmsg+'</span>'); // 验证电子邮件 if( $(this).is('# ') ){ if( this.value=="" ( this.value!="" &&!/.+@.+\.[a-za-z]{2,4$/.test(this.value) ) ){ var errormsg = ' 请输入正确的地址.'; $parent.append( '<span class="formtips onerror">'+errormsg+'</span>'); else{ var okmsg = ' 输入正确.'; 河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 6 页

7 ) $parent.append(' <span class="formtips onsuccess">'+okmsg+'</span>'); ).keyup(function(){ ) $(this).triggerhandler("blur");.focus(function(){ ); $(this).triggerhandler("blur"); // 提交, 最终验证 $('#send').click(function(){ ); $("form :input.required").trigger('blur'); var numerror = $('form.onerror').length; if(numerror){ // 重置 return false; alert(" 提交成功!"); $('#res').click(function(){ ); </script> </head> <body> $(".formtips").remove(); <form method="post" action=""> <div class="int"> <label for="username"> 用户账号 :</label> <input type="text" id="username" class="required" /> <div class="int"> <label for=" "> 电子邮件 :</label> <input type="text" id=" " class="required" /> <div class="int"> <label for="personinfo"> 详细资料 :</label> <input type="text" id="personinfo" /> <div class="sub"> </form> </body> </html> 要求 : <input type="submit" value=" 提交 " id="send"/><input type="reset" id="res"/> 请通过 jquery 实现实验六中的 POP 轮转效果, 并将具体实现填写到实验报告册中河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 7 页

六自主实验步骤 1 jquery Mobile 实现移动开发的表单验证 (1) 使用 jquery Mobile 项目,

$所示效果可参考实验素材中 11. 实验素材 \03. 自主实验 \7-4.$ jquery Mobile 实现 2 使用 jquery 实现 XML 数据读取与显示 (1) 使用 jquery 实现对 XML

8 六自主实验步骤 1 jquery Mobile 实现移动开发的表单验证 (1) 使用 jquery Mobile 项目, 实现面向移动的表单验证 ; (2) 掌握 jquery Mobile 的基本语法 ; (3) 表单验证页面的设计, 如图 7-1 所示效果可参考实验素材中 11. 实验素材 \03. 自主实验 \7-4.html 图 7-1 jquery Mobile 实现手机验证要求 : 请设计一个表单, 要具有常用的交互效果, 并通过 jquery Mobile 实现 2 使用 jquery 实现 XML 数据读取与显示 (1) 使用 jquery 实现对 XML 数据的读取和展示 ; (2) 使用 XML 存储学生基本信息表, 通过 jquery 读取 XML 数据并通过表格展示出来展示效果如图 7-2 所示河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 8 页

$(3) 具体实现效果和方法, 可参考实验素材中 11. 实验素材 \03. 自主实验 \7-5.$ 3 使用 jquery 除了能够访问 XML 数据外, 是否支持 JSON RSS Text 的数据格式?

9 (3) 具体实现效果和方法, 可参考实验素材中 11. 实验素材 \03. 自主实验 \7-5.html 图 7-2 读取 XML 并展示数据要求 : 1 请熟悉 XML 的基本知识, 并掌握 XML 的基本概念 2 使用 XML 存储数据, 并通过 jquery 访问 XML 数据并展示, 对于 Web Service 的开发有什么作用? 3 使用 jquery 除了能够访问 XML 数据外, 是否支持 JSON RSS Text 的数据格式? 4 请尝试通过 jquery 读取新浪微博的 API, 并展示数据七思考及问答 1 关于 jquery (1) 使用 JavaScript 编写脚本和使用 jquery 编写脚本, 有什么区别和各自的优势? (2)jQuery 都有哪些项目? 分别应用在什么场景下? 主要功能有哪些? 2 Web 前端的标准数据接口 (1) 通过 JavaScript jquery 等脚本读取 XML JSON RSS 等标准数据接口进行 Web 开发, 是否可行? (2) 标准数据接口如何保护自己的数据安全和合法调用? (3) 公共服务的 API 在进行数据服务, 如何保护其数据安全性? 河南中医学院信息技术学院阮晓龙本讲共计 9 页当前是第 9 页

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05