Web编程基础－CSS、JavaScript、jQuery第三部分 jQuery.ppt

jQuery,第三部分,WEB编程基础,WEB编程基础,教学目标,通过这一部分的学习让学生掌握jQuery特性，jQuery语法、选择器和事件相关知识。能够熟练使用jQuery应用JavaScript效果，用于制作网页文本、图片、菜单等网页特效。,网站滑动菜单制作jQueryjQuery语法。jQuery选择器（元素选择器、属性选择器和CSS选择器）。jQuery事件函数（隐藏、显示、切换、滑动以及动画等）。jQuery常用方法。,WEB编程基础,教学内容,重点：1、jQuery语法基础2、jQuery选择器3、jQuery事件4、jQuery效果5、jQuery其他操作难点：jQuery事件和效果的使用,WEB编程基础,教学重难点,网站滑动菜单制作,WEB编程基础,以前学过用行为制作弹出式菜单，这样的菜单看上去样式单一乏味。现在我们可以用jQuery相关知识制作各种精美的菜单。,一、网站首页滑动菜单,图1菜单效果图,网站滑动菜单制作,WEB编程基础,1、jQuery简介jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。jQuery库可以通过一行简单的标记被添加到网页中。（1）添加jQuery库jQuery库位于单个的JavaScript文件中，其中包含所有jQuery函数。可以通过下面的标记把jQuery添加到网页中：,二、关键技术,注意：标签应该位于页面的部分。,网站滑动菜单制作,WEB编程基础,1、jQuery简介（2）下载jQuery存在两份jQuery拷贝可供下载，一是缩小版（由GoogleClosureCompiler），另一个是未压缩版（供debugging或reading）。两份拷贝均可以从jQ下载：jQueryminfiedjQueryregular,二、关键技术,网站滑动菜单制作,WEB编程基础,1、jQuery简介（3）库的替代Google和Microsoft对jQuery的支持都很好。如果您不愿意在自己的计算机上存放jQuery库，那么可以从GoogleorMicrosoft加载CDNjQuery核心文件。使用Google的CDN,二、关键技术,网站滑动菜单制作,WEB编程基础,1、jQuery简介（3）库的替代使用Microsoft的CDN,二、关键技术,网站滑动菜单制作,WEB编程基础,2、jQuery语法通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。jQuery语法是为HTML元素的选取编制，可以对元素执行某些操作。基础语法是：$(selector).action()美元符号定义jQuery选择符（selector）“查询”和“查找”HTML元素jQueryaction()执行对元素的操作,二、关键技术,网站滑动菜单制作,WEB编程基础,2、jQuery语法（1）$(this).hide()-隐藏当前元素,二、关键技术,$(document).ready(function()$(button).click(function()$(this).hide();););Clickmea).addClass(onto)$(this).stop(true,false).animate(height:$(this).find(ul).height()+30,200);$(this).find(h1).stop(true,false).animate(top:0,height:$(this).find(ul).height()+35,200);$(this).find(ul).stop(true,false).animate(top:20,left:30,200);,三、操作步骤,网站滑动菜单制作,WEB编程基础,3、制作菜单特效创建layout.js文件，编写jQuery程序：,function()$(this).find(h1a).removeClass(onto);$(this).stop(true,false).animate(height:60,200);$(this).find(h1).stop(true,false).animate(top:20,height:20,200);$(this).find(ul).stop(true,false).animate(top:0,left:150,200););,三、操作步骤,网站滑动菜单制作,WEB编程基础,3、制作菜单特效创建layout.js文件，编写jQuery程序：functionhomeNav()t=$(#navhear).offset().top;mh=$(#Header).height();$(window).scroll(function()s=$(document).scrollTop();if(st-10)$(#navhear).stop(false,false).animate(marginTop:s-mh,500);else$(#navhear).stop(false,false).animate(marginTop:0,500);),三、操作步骤,网站滑动菜单制作,WEB编程基础,3、制作菜单特效添加layout.js文件到网页中：执行效果：这里我们只讲解了“学院概况”二级菜单的制作。其他菜单制作方法一样，就不在此讲解了。,三、操作