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 的下载可以通过官方网站 (http://jquery.com) 下载获得 方法二 : 使用 Google 或 Mocrsoft 的云服务, 直接在 Web 中加载 CDN JQuery 核心文件 具体的使用方法如下 1 使用 Google 的 CDN <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 河南中医学院信息技术学院 阮晓龙本讲共计 9 页 当前是第 1 页
2 使用 Microsoft 的 CDN <script src= http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js ></script> 推荐在引用 jquery 时, 使用谷歌或微软的 jquery 这是因为许多用户在访问其他站点时, 已经从谷歌或微软加载过 jquery 当他们访问您的站点时, 会从缓存中加载 jquery, 这样可以减少加载时间 同时, 大多数 CDN 都可以确保当用户向其请求文件时, 会从离用户最近的服务器上返回响应, 这样也可以提高加载速度 本实验将具体使用 Google 或 Microsoft 的 CDN 来进行 jquery 的实现 Google jquery CDN 的详细资料请参考 :http://www.google-jquery-cdn.com 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 页
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 页
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <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 页
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 页
padding:2px;.onerror{ background:#ffe0e9 center; padding-left:5px;.onsuccess{ background:#e9fbeb center; padding-left:5px;.high{ color:red; </style> <!-- 引入 jquery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <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('#email') ){ if( this.value=="" ( this.value!="" &&!/.+@.+\.[a-za-z]{2,4$/.test(this.value) ) ){ var errormsg = ' 请输入正确的 E-Mail 地址.'; $parent.append( '<span class="formtips onerror">'+errormsg+'</span>'); else{ var okmsg = ' 输入正确.'; 河南中医学院信息技术学院 阮晓龙本讲共计 9 页 当前是第 6 页
) $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="email"> 电子邮件 :</label> <input type="text" id="email" 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 项目, 实现面向移动的表单验证 ; (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.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 页