w前端开发》实验教学指导/实验七:y实现网页动画1 《Web前端开发》实验教学指导 实验七: JQuery实现网页动画 、实验目的 1、理解Web交互的基本模式和概念 2、掌握Web中 JavaScript使用的基本方法; 3、了解 jQuery的特性及用法; 4、熟悉的 jQuery基本语法 5、编写代码实现 jQuery I的基本动画效果。 二、实验环境 1、 Windows xP/ Windows Server2003操作系统的计算机 2、局域网网络环境,并且使用固定IP地址 3、支持互联网访问。 三、实验要求 1、完成在Web中使用 jQuery的编写; 2、掌握 jQuery的基本语法,并能够使用 jQuery编写基本动画; 3、完成 jQuery自主实验任务。 四、实验原理 1、 Java Script的基本语 2、 HTML DOM的基本原理和web交互的基本原理 3、 jQuery语法; 4、动画设计的基本方法 五、实验步骤 1、在页面中使用 jQuery 在Web中使用 jQuery有两种方法 方法一:下载 jQuery库,然后把它包含在网页中。 jQuery库是一个 JavaScript文件,可 用HIML的标签引用它。 具体方法如下 jQuery的下载可以通过官方网站(htp/ jquery. com)下载获得。 方法二:使用 Google或 Micrsoft的云服务,直接在Web中加载 CDN JQuery核心文件 具体的使用方法如下。 ①使用 Google的CDN。 scriptsrc="http:/lajaxgoogleapis.com/ajax/libs/jquery/1.8.3/jquery.minjs"></script 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第1页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 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 的标签引用它。 具体方法如下。 jQuery 的下载可以通过官方网站（http://jquery.com）下载获得。 方法二：使用 Google 或 Mocrsoft 的云服务，直接在 Web 中加载 CDN JQuery 核心文件。 具体的使用方法如下。 ①使用 Google 的 CDN
Web前端开发》实验教学指导/实验七:ry实现网页动画2 ②使用 Microsof的CDN。 scriptsrc=http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.minjs"> 推荐在引用 jQuery时,使用谷歌或微软的 jQuery。这是因为许多用户在访问其他站点时,己 经从谷歌或微软加载过 jQuery。当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少 加载时间。同时,大多数CDN都可以确保当用户向其请求文件时,会从离用户最近的服务器上返 回响应,这样也可以提高加载速度 本实验将具体使用 Google或 Microsoft的CDN来进行 jQuery的实现。 GooglejQueryCDN的详细资料请参考:htp/www.google-jquery-cdn.com。 2、使用 jQuery实现POP图片轮转 (1)熟悉 jQuery的基本语法,并掌握 jQuery使用的基本方法 (2)用 jQuery实现POP图片轮转效果。 效果可参考实验素材中【11实验素材02实验案例7-1html】 参考代码 title>jQuery简单的图片切换效果 margin: 40px auto font: 12px arial width: 900px; margin: Opx aut background: #fafafa width: 900px: height: 600px position: abs background #fff position: abs st-style: none; right: 10px 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第2页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 2 页 ②使用 Microsoft 的 CDN。 推荐在引用 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】。 参考代码： jQuery 简单的图片切换效果 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;
b前端开发》实验教学指导/实验七:ry实现网页动画3 bottom: 2px uL. recentlist li ding: 0: display: inline uL. recentlist li a, ul. recentlist li a: visited t background: #e5e5e5 padding: 4px 8px; text-decoration: none cursor: pointer ul. recentlist li a: hover, ul. recentlist li a: visited: hover color: #fff uL recentis li a current background: #f00 S(document). ready(function(( var imgWrapper=SCslideshow img ) img Wrapper. hide(). filter(: first,).show( if (this className indexOf('current)==-1)( imgWrapper. hide (; imgWrapper filter(this hash). fadeIn(500) S(ul. recentlist li a,). remove Class('current) S(this). addClass('current) return false div class="slideshow"> ca class="current" href=#slide 1">1 li>3 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第3页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 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; } $(document).ready(function() { var imgWrapper = $('.slideshow > img'); imgWrapper.hide().filter(':first').show(); $('ul.recentlist li a').click(function () { if (this.className.indexOf('current') == -1){ imgWrapper.hide(); imgWrapper.filter(this.hash).fadeIn(500); $('ul.recentlist li a').removeClass('current'); $(this).addClass('current'); } return false; }); }); 1 2 3
《Web前端开发》实验教学指导/实验七: jQuery实现网页动画 4 4 ca href="#slides">5 6 sa href="#slide7">7 ca href=#slide>8 ca href=#slides">9 3、使用 jQuery实现浏览器检测 用 jQuery实现POP图片轮转效果。 效果可参考实验素材中【实验素材02实验案例7-2htm】 参考代码: title>jQuery实现浏览器检测 S(document). ready(function var bro=s browser var binfo=您的浏览器版本是: if (bro. webkit)(binfo=binfo+WebKit"+bro. version 1 if(bro. msie)[binfo=binfo+"Microsoft Internet Explorer"+bro. version if(bro. mozilla)(binfo=binfo+"Mozilla Firefox"+bro. version; 1 if(bro. safari)(binfo=binfo+"Apple Safari /WebKit"+bro.version if(bro. opera)(binfo=binfo+"Opera"+bro. version; 1 S#browser"). html(binfo) 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第4页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 4 页 4 5 6 7 8 9 3、使用 jQuery 实现浏览器检测 用 jQuery 实现 POP 图片轮转效果。 效果可参考实验素材中【11.实验素材\02.实验案例\7-2.html】。 参考代码： jQuery 实现浏览器检测 $(document).ready(function(){ var bro=$.browser; var binfo="您的浏览器版本是："; if(bro.webkit) {binfo=binfo+"WebKit "+bro.version;} 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); }) body { margin:50px; } div {
b前端开发》实验教学指导/实验七:ry实现网页动画5 co|or:#333: font-family:微软雅黑; Browser Info title>jQuery实现表单验证</tite <style type="text font: 12px/19px Arial, Helvetica, sans-serif color: #666 div i int label float: left ht 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第5页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 5 页 color:#333; font-size:14px; font-family:微软雅黑; } Browser Info 4、使用 jQuery 实现表单验证。 （1）熟悉 jQuery 中表单验证类的内容和使用方法； （2）实现表单验证效果。 效果可参考实验素材中【11.实验素材\02.实验案例\7-3.html】。 参考代码： jQuery 实现表单验证 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;
b前端开发》实验教学指导/实验七:ry实现网页动画6 padding: 2px onError( background: #FFEOE9 center background: #E9FBEB center color: red 引入 jQuery-> ≤ sent type="text/javascript src="http.://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.minjs"> 如果是必填的,则加红星标识 S(form input required").each(function( var$ required=S("*/ strong>");∥创建元素 this) parent0). append( Required);∥/然后将它追加到文档中 ∥文本框失去焦点后 S(form input ). blur(function var Parent= S(this). parent( Parent. find". formtips").remove ∥验证用户账号 if( s(this) is( if( this value=="ll this value length ) Else( +okMsg+ ): ∥验证电子邮件 if( S(this) is(#email )x if( this value=="‖( this valuel=&&1/+@. +\[a-zA-Z]2, 4 S/ test(this value))M var errorMsg='请输入正确的EMa地址 span class="formtips onError">+errorMsg+); Msg=输入正确; 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第6页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 6 页 padding:2px; } .onError{ background:#FFE0E9 center; padding-left:5px; } .onSuccess{ background:#E9FBEB center; padding-left:5px; } .high{ color:red; } //如果是必填的，则加红星标识. $(function(){ $("form :input.required").each(function(){ var $required = $(" *"); //创建元素 $(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 '+errorMsg+''); }else{ var okMsg = '输入正确.'; $parent.append(' '+okMsg+''); } } //验证电子邮件 if( $(this).is('#email') ){ if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){ var errorMsg = '请输入正确的 E-Mail 地址.'; $parent.append( ''+errorMsg+''); }else{ var okMsg = '输入正确.';
w前端开发》实验教学指导/实验七:、y实现网页动画7 Aparent append( +okMsg+") ) keyup(function( s(this). triggerHandler("blur") ) S(this). triggerHandler("blur") ∥提是交,最终验证 S(form input required"). trigger('blur) var numError=S(form onError,). length: if(numErrorM ); S(#res,).click(function 用户账号: abel for="emai">电子邮件: div class="int"> 详细资料: div class="sub"> 要求 请通过 jQuery实现实验六中的POP轮转效果,并将具体实现填写到实验报告册中。 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第7页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 7 页 $parent.append(' '+okMsg+''); } } }) .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(){ $(".formtips").remove(); }); }) 用户账号: 电子邮件: 详细资料: 要求： 请通过 jQuery 实现实验六中的 POP 轮转效果，并将具体实现填写到实验报告册中
b前端开发》实验教学指导/实验七:ry实现网页动画8 六、自主实验步骤 1、 jQuery Mobile实现移动开发的表单验证 (1)使用 jQuery mobile项目,实现面向移动的表单验证 (2)掌握 jQuery Mobile的基本语法 (3)表单验证页面的设计,如图7-1所示。效果可参考实验素材中【11实验素材3自主实验 17-4html】。 iPod会 21:45 回pd分 21:48 学生基本信息录入 学生基本信息录入 学号 学号 姓名: 姓名: 性别: 请选择性别 性别 出生日期 〔请选择性别v 出生日期 籍贯 籍贯: 电话号码 电话号码 Previo Next Previous 1234567890 √请选择性别 /:B(D四四 #千三 ?四口 男女 ABC ■空格前 图7-1 jQuery Mobile实现手机验证 要求 请设计一个表单,要具有常用的交互效果,并通过 jQuery Mobile实现 2、使用 jQuery实现ⅩML数据读取与显示。 (1)使用 jQuery实现对XML数据的读取和展示 (2)使用XML存储学生基本信息表,通过 jQuery读取XML数据并通过表格展示出来。展 效果如图7-2所示。 河南中医学院信息技术学院|阮晓龙 本讲共计9页|当前是第8页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 8 页 六、自主实验步骤 1、jQuery Mobile 实现移动开发的表单验证 （1）使用 jQuery Mobile 项目，实现面向移动的表单验证； （2）掌握 jQuery Mobile 的基本语法； （3）表单验证页面的设计，如图 7-1 所示。效果可参考实验素材中【11.实验素材\03.自主实验 \7-4.html】。 要求： 请设计一个表单，要具有常用的交互效果，并通过 jQuery Mobile 实现。 2、使用 jQuery 实现 XML 数据读取与显示。 （1）使用 jQuery 实现对 XML 数据的读取和展示； （2）使用 XML 存储学生基本信息表，通过 jQuery 读取 XML 数据并通过表格展示出来。展 示效果如图 7-2 所示。 图 7-1 jQuery Mobile 实现手机验证
《Web前端开发》实验教学指导/实验七: jQuery实现网页动画 9 (3)具体实现效果和方法,可参考实验素材中【1l实验素村3.自主实验\-5html】 学生基本信息表 电话 2012001001张德文男1992-10-18河南省洛阳市伊川县18601010001 012001002李国强1991-03-12 河南省郑州市 18601010002 2012001003许盈盈女1992-12-25 河南台南阳市 12001004刘冬冬男199 河南省焦作市沁阳市 22012001005靓颖女 河南省新乡市 18601010005 2012001006朱德刚1992-01-1 河南省许昌市许昌县 8601010006 001007刘娟女1991-03-06 词南省信阳市 18601010041 2012001008刘哲 1991-09-13 可南省驻马店市 8601010123 2012001009赵飞 男1992-07-11 河南省许昌市襄城县 1860101123 012001010马梆女1991-12-28 河南省焦作市 图7-2读取XML并展示数据 要求 1、请熟悉XML的基本知识,并掌握XML的基本概念 2、使用XML存储数据,并通过 jQuery访问XML数据并展示,对于 Web service的开发 有什么作用? 3、使用 jQuery除了能够访问XML数据外,是否支持」SoN、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页
《Web 前端开发》实验教学指导/实验七：jQuery 实现网页动画 河南中医学院信息技术学院 | 阮晓龙 本讲共计 9 页 | 当前是第 9 页 （3）具体实现效果和方法，可参考实验素材中【11.实验素材\03.自主实验\7-5.html】 要求： 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 在进行数据服务，如何保护其数据安全性？ 图 7-2 读取 XML 并展示数据