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的< script>标签引用它。 具体方法如下 <script src="jquery. js"></script> 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 的<script>标签引用它。 具体方法如下。 <head> <script src="jquery.js"></script> </head> jQuery 的下载可以通过官方网站（http://jquery.com）下载获得。 方法二：使用 Google 或 Mocrsoft 的云服务，直接在 Web 中加载 CDN JQuery 核心文件。 具体的使用方法如下。 ①使用 Google 的 CDN。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Web前端开发》实验教学指导/实验七:ry实现网页动画2 ②使用 Microsof的CDN。 scriptsrc=http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.minjs"></script> 推荐在引用 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】 参考代码 <doctype html> <meta charset="utf-8"> title>jQuery简单的图片切换效果 </title <style type="text/css"media="screen"> 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。 <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;
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 <script type="text/javascript"src="JS/jquery js"charset="utf-8"></ script> <script type="text/javascript"> 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"> <li>ca class="current" href=#slide 1">1</a></i> li><a href=#slide">3</a></li> 河南中医学院信息技术学院|阮晓龙 本讲共计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; } </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){ imgWrapper.hide(); imgWrapper.filter(this.hash).fadeIn(500); $('ul.recentlist li a').removeClass('current'); $(this).addClass('current'); } return false; }); }); </script> </head> <body> <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>
《Web前端开发》实验教学指导/实验七: jQuery实现网页动画 4 <li><a href=#slided">4</a></li> <li>ca href="#slides">5</a></li> <li><a href="#slide6">6</a></li> <li>sa href="#slide7">7</a></i> <li>ca href=#slide>8</a></li> <li>ca href=#slides">9</a></li <img id="slide 1"src="images/Office-1. png"alt=""/> <img id="slide" src="images/Office-2 png" alt="/> <img id="slided"src="images/Office-4png"alt="/> <img id="slide"src="images/Office-5 png"alt=""/> <img id="slide "src="images/Office-7.png"alt="/> <img id="slide 8"src="images/Office-8 png"alt="/> <img id="slide 9"src="images/Office-9 png"alt="/> 3、使用 jQuery实现浏览器检测 用 jQuery实现POP图片轮转效果。 效果可参考实验素材中【实验素材02实验案例7-2htm】 参考代码: <head> <meta charset="utf-8"> title>jQuery实现浏览器检测</itle type="text/javascript src="http:/ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.minjs"></script> <script type="text/javascript"> 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 页 <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="" /> </div> </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;} 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); }) </script> <style type="text/css"> body { margin:50px; } div {
b前端开发》实验教学指导/实验七:ry实现网页动画5 co|or:#333: font-family:微软雅黑; <div id="browser">Browser Info</div 4、使用 jQuery实现表单验证。 (1)熟悉 jQuery中表单验证类的内容和使用方法; (2)实现表单验证效果 效果可参考实验素材中【实验素材02实验案例7-3htm】 参考代码 <doctype html> <meta charset="utf-8"> 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:微软雅黑; } </style> </head> <body> <div id="browser">Browser Info</div> </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;