最新Web编程基础－CSS、JavaScript、jQuery第三部分 jQuery(共52张PPT课件).pptx

jQuery第三(dsn)部分WEB编程基础(jch)第一页，共五十二页。WEB编程基础(jch)教学教学(jio xu)(jio xu)目标目标通过这一部分的学习让学生掌握通过这一部分的学习让学生掌握jQueryjQuery特性，特性，jQueryjQuery语法、选择器和事件相关知识语法、选择器和事件相关知识(zh shi)(zh shi)。能够熟练。能够熟练使用使用jQuery jQuery 应用应用 JavaScript JavaScript 效果，用于制作网页文本、效果，用于制作网页文本、图片、菜单等网页特效。图片、菜单等网页特效。第二页，共五十二页。网站滑动菜单制作网站滑动菜单制作jQueryjQuery语法。语法。jQuery选择器（元素选择器、属性选择器和选择器（元素选择器、属性选择器和CSS选择器）。选择器）。jQuery事件函数事件函数(hnsh)（隐藏、显示、切换、滑动以及动画（隐藏、显示、切换、滑动以及动画等）。等）。jQuery常用方法。常用方法。WEB编程基础(jch)教学内容教学内容第三页，共五十二页。重点：重点： 1、jQuery语法语法(yf)基础基础 2、jQuery选择器选择器 3、jQuery事件事件 4、jQuery效果效果 5、jQuery 其他操作其他操作难点：难点： jQuery事件和效果的使用事件和效果的使用WEB编程基础(jch)教学教学(jio xu)(jio xu)重难点重难点第四页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch) 以前学过用行为制作弹出式菜单(ci dn)，这样的菜单(ci dn)看上去样式单一乏味。现在我们可以用jQuery相关知识制作各种精美的菜单。一、网站首页滑动菜单一、网站首页滑动菜单图图1 1 菜单效果图菜单效果图第五页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜单制滑动菜单制作作WEB编程基础(jch)1、jQuery 简介jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 库可以(ky)通过一行简单的标记被添加到网页中。（1）添加 jQuery 库 jQuery 库位于单个的 JavaScript 文件中，其中包含所有 jQuery 函数。可以通过下面的标记把 jQuery 添加到网页中：二、关键技术二、关键技术 注意： 标签应该位于页面的 部分。第六页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜单制滑动菜单制作作WEB编程基础(jch)1、jQuery 简介（2）下载(xi zi) jQuery 存在两份 jQuery 拷贝可供下载，一是缩小版（由 Google Closure Compiler），另一个是未压缩版（供 debugging 或 reading）。 两份拷贝均可以从 jQ 下载：jQuery minfied jQuery regular 二、关键技术二、关键技术第七页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)1、jQuery 简介（3）库的替代 Google 和 Microsoft 对 jQuery 的支持都很好。 如果(rgu)您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google or Microsoft 加载 CDN jQuery 核心文件。 使用使用 Google Google 的的 CDN CDN二、关键技术二、关键技术 第八页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)1、jQuery 简介(jin ji)（3）库的替代 使用使用 Microsoft Microsoft 的的 CDN CDN二、关键技术二、关键技术 第九页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单制作菜单制作WEB编程基础(jch)2、jQuery 语法通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。jQuery 语法是为 HTML 元素的选取编制(binzh)，可以对元素执行某些操作。基础语法是基础语法是：$(selector).action()美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery action( ) 执行对元素的操作 二、关键技术二、关键技术第十页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜单制滑动菜单制作作WEB编程基础(jch)2、jQuery 语法（1）$(this).hide() - 隐藏当前隐藏当前(dngqin)元素元素二、关键技术二、关键技术 $(document).ready(function() $(button).click(function() $(this).hide(); ); );Click me/body第十一页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)2、jQuery 语法（2）$(p).hide() - 隐藏隐藏(yncng)所有段落所有段落二、关键技术二、关键技术 $(document).ready(function() $(button).click(function() $(p).hide(); ); );第十二页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜单制滑动菜单制作作WEB编程基础(jch)2、jQuery 语法（3）$(p.test).hide() - 隐藏所有隐藏所有(suyu) class=test 的段落的段落（4）$(#test).hide() - 隐藏所有隐藏所有 id=test 的元素的元素 程序与（1）（2）相似，只需修改隐藏函数hide() 前的函数即可。提示提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。二、关键技术二、关键技术第十三页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)3、jQuery 选择器 选择器允许您对元素组或单个元素进行操作。 在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。关键点是学习(xux) jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中，选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。二、关键技术二、关键技术第十四页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)3、jQuery 选择器（1）jQuery 元素选择器 jQuery 使用(shyng) CSS 选择器来选取 HTML 元素。 $(p) 选取 元素。 $(p.intro) 选取所有 class=intro 的 元素。 $(p#demo) 选取 id=demo 的第一个 元素。（2）jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(href) 选取所有带有 href 属性的元素。 二、关键技术二、关键技术第十五页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)3、jQuery 选择器（2）jQuery 属性选择器 $(href=#) 选取(xunq)所有带有 href 值等于 # 的元素。 $(href!=#) 选取所有带有 href 值不等于 # 的元素。 $(href$=.jpg) 选取所有 href 值以 .jpg 结尾的元素。（3）jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：$(p).css(background-color,red); 二、关键技术二、关键技术第十六页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)3、jQuery 选择器 二、关键技术二、关键技术语法语法描述描述$(this)当前当前 HTML 元素元素$(p)所有所有 元素元素$(p.intro)所有所有 class=intro 的的 元素元素$(.intro)所有所有 class=intro 的元素的元素$(#intro)id=intro 的第一个元素的第一个元素$(ul li:first)每个每个 的第一个的第一个 元素元素$(href$=.jpg)所有带有以所有带有以 .jpg 结尾的结尾的 href 属性的属性属性的属性$(div#intro .head)id=intro 的的 元素中的所有元素中的所有 class=head 的元素的元素第十七页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜单滑动菜单制作制作WEB编程基础(jch)4、jQuery 事件（1）jQuery 事件函数jQuery 事件处理函数是 jQuery 中的核心函数。事件处理函数是当 HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发(chf)”（triggered）是经常被用到的术语。由于 jQuery 是为事件处理特别设计的，通常是把 jQuery 代码置于网页 部分的“事件处理”函数中。如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。二、关键技术二、关键技术第十八页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)4、jQuery 事件（2）jQuery事件参考手册1）.jQuery 事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例(shl)：上面的例子将触发 id=“demo” 的 button 元素的 click 事件。二、关键技术二、关键技术$(button#demo).click()第十九页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制制作作WEB编程基础(jch)4、jQuery 事件(shjin)（2）jQuery事件参考手册1）.jQuery 事件方法绑定实例：上面的例子会在点击 id=demo 的按钮时隐藏所有图像。二、关键技术二、关键技术$(button#demo).click(function()$(img).hide()方法方法描述描述ready()ready()文档就绪事件（当 HTML 文档就绪可用时）blur()blur()触发、或将函数绑定到指定元素的 blur 事件change()change()触发、或将函数绑定到指定元素的 change 事件click()click()触发、或将函数绑定到指定元素的 click 事件第二十页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)4、jQuery 事件(shjin)（2）jQuery事件参考手册1）.jQuery 事件方法二、关键技术二、关键技术方法方法描述描述dblclick()dblclick()触发、或将函数绑定到指定元素的 double click 事件error()error()触发、或将函数绑定到指定元素的 error 事件focus()focus()触发、或将函数绑定到指定元素的 focus 事件keydown()keydown()触发、或将函数绑定到指定元素的 key down 事件keypress()keypress()触发、或将函数绑定到指定元素的 key press 事件keyup()keyup()触发、或将函数绑定到指定元素的 key up 事件load()load()触发、或将函数绑定到指定元素的 load 事件mousedown()mousedown()触发、或将函数绑定到指定元素的 mouse down 事件mouseenter()mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件第二十一页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)4、jQuery 事件(shjin)（2）jQuery事件参考手册1）.jQuery 事件方法二、关键技术二、关键技术方法方法描述描述mouseleave()mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件mousemove()mousemove()触发、或将函数绑定到指定元素的 mouse move 事件mouseout()mouseout()触发、或将函数绑定到指定元素的 mouse out 事件mouseover()mouseover()触发、或将函数绑定到指定元素的 mouse over 事件mouseup()mouseup()触发、或将函数绑定到指定元素的 mouse up 事件resize()resize()触发、或将函数绑定到指定元素的 resize 事件scroll()scroll()触发、或将函数绑定到指定元素的 scroll 事件select()select()触发、或将函数绑定到指定元素的 select 事件submit()submit()触发、或将函数绑定到指定元素的 submit 事件unload()unload()触发、或将函数绑定到指定元素的 unload 事件第二十二页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜菜单制作单制作WEB编程基础(jch)4、jQuery 事件(shjin)（2）jQuery事件参考手册2）.jQuery 事件处理方法事件处理方法把事件处理器绑定至匹配元素。二、关键技术二、关键技术方法方法触发触发$(selector).bind(event)$(selector).bind(event)向匹配元素添加一个或更多事件处理器$(selector).delegate(selector, $(selector).delegate(selector, event)event)向匹配元素添加一个事件处理器，现在或将来$(selector).die()$(selector).die()移除所有通过 live() 函数添加的事件处理器$(selector).live(event)$(selector).live(event)向匹配元素添加一个事件处理器，现在或将来$(selector).one(event)$(selector).one(event)向匹配元素添加一个事件处理器。该处理器只能触发一次。第二十三页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)4、jQuery 事件(shjin)（2）jQuery事件参考手册2）.jQuery 事件处理方法事件处理方法把事件处理器绑定至匹配元素。二、关键技术二、关键技术方法方法触发触发$(selector).unbind(event)$(selector).unbind(event)从匹配元素移除一个被添加的事件处理器$(selector).undelegate(event)$(selector).undelegate(event)从匹配元素移除一个被添加的事件处理器，现在或将来$(selector).trigger(event)$(selector).trigger(event)所有匹配元素的指定事件$(selector).triggerHandler(event)$(selector).triggerHandler(event)第一个被匹配元素的指定事件第二十四页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)5、jQuery 效果（1）jQuery隐藏和显示通过 hide() 和 show() 两个(lin )函数，jQuery 支持对 HTML 元素的隐藏和显示：二、关键技术二、关键技术$(#hide).click(function()$(p).hide(););$(#show).click(function()$(p).show(););第二十五页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)5、jQuery 效果(xiogu)（1）jQuery隐藏和显示 hide() 和 show() 都可以设置两个可选参数：speed 和 callback。语法： $(selector).hide(speed,callback) $(selector).show(speed,callback)callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。speed 参数可以设置这些值：“slow”, “fast”, “normal” 或 milliseconds（ 毫秒）：二、关键技术二、关键技术$(button).click(function()$(p).hide(1000););第二十六页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制制作作WEB编程基础(jch)5、jQuery 效果（2）jQuery切换 jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法： $(selector).toggle(speed,callback)speed 参数可以设置(shzh)这些值：slow, fast, normal 或 毫秒。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。二、关键技术二、关键技术第二十七页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜单滑动菜单制作制作WEB编程基础(jch)5、jQuery 效果（3）jQuery滑动函数 - slideDown, slideUp, slideToggle jQuery 拥有以下滑动函数： $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)speed 参数可以设置这些值：slow, fast, normal 或 毫秒 。callback 参数是在 hide 或 show 函数完成(wn chng)之后被执行的函数名称。二、关键技术二、关键技术第二十八页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制制作作WEB编程基础(jch)5、jQuery 效果（3）jQuery滑动(hudng)函数 - slideDown, slideUp, slideToggle slideDown() slideUp() slideToggle()二、关键技术二、关键技术$(.flip).click(function()$(.panel).slideDown(););$(.flip).click(function()$(.panel).slideUp(););$(.flip).click(function()$(.panel).slideToggle(););第二十九页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜菜单制作单制作WEB编程基础(jch)5、jQuery 效果(xiogu)（4）jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()jQuery 拥有以下 fade 函数： $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)speed 参数可以设置这些值：slow, fast, normal 或 毫秒。fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。 二、关键技术二、关键技术第三十页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)5、jQuery 效果(xiogu)（4）jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo() fadeTo() fadeOut() 二、关键技术二、关键技术$(button).click(function()$(div).fadeTo(slow,0.25););$(button).click(function()$(div).fadeOut(4000););第三十一页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)5、jQuery 效果（5）jQuery自定义动画jQuery 函数创建自定义动画的语法：$(selector).animate(params,duration,easing,callback)关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：animate(width:70%,opacity:0.4,marginLeft:0.6in,fontSize:3em);第二个参数是 duration。它定义用来应用(yngyng)于动画的时间。它设置的值是：slow, fast, normal 或 毫秒。 二、关键技术二、关键技术第三十二页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)5、jQuery 效果(xiogu)（6）jQuery效果参考手册 二、关键技术二、关键技术Hide / ShowHide / Show描述描述show()show()显示被选的元素hide()hide()隐藏被选的元素toggle()toggle()对被选元素进行隐藏和显示的切换SlideSlide 描述描述slideDown()slideDown()通过调整高度来滑动显示被选元素slideUp()slideUp()通过调整高度来滑动隐藏被选元素slideToggle()slideToggle()对被选元素进行滑动隐藏和滑动显示的切换Animation 描述描述animate()对被选元素应用“自定义”的动画stop()停止在被选元素上运行动画第三十三页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)5、jQuery 效果(xiogu)（6）jQuery效果参考手册 二、关键技术二、关键技术Fade in / outFade in / out 描述描述fadeIn()fadeIn()淡入被选元素至完全不透明fadeOut()fadeOut()淡出被选元素至完全不透明fadeTo()fadeTo()把被选元素减弱至给定的不透明度QueueQueue 描述描述clearQueue()clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()dequeue()运行被选元素的下一个排队函数queue()queue()显示被选元素的排队函数第三十四页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)6、jQuery HTML 操作（1）改变 HTML 内容语法 $(selector).html(content)html() 函数改变所匹配的 HTML 元素(yun s)的内容（innerHTML）。实例 $(p).html(W3C); 二、关键技术二、关键技术第三十五页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)6、jQuery HTML 操作（2）添加 HTML 内容(nirng)语法1 $(selector).append(content)append() 函数向所匹配的 HTML 元素内部追加内容。语法2 $(selector).prepend(content)prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。实例 $(p).append(W3C);二、关键技术二、关键技术第三十六页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)6、jQuery HTML 操作（2）添加 HTML 内容语法3 $(selector).after(content)after() 函数在所有匹配的元素之后插入(ch r) HTML 内容。语法4 $(selector).before(content)before() 函数在所有匹配的元素之前插入 HTML 内容。实例 $(p).after(W3C);二、关键技术二、关键技术第三十七页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)6、jQuery HTML 操作(cozu)（3）jQuery HTML 操作 文档操作参考手册二、关键技术二、关键技术方法方法描述描述addClass()addClass()向匹配的元素添加指定的类名。after()after()在匹配的元素之后插入内容。append()append()向匹配的元素内部追加内容。appendTo()appendTo()向匹配的元素内部追加内容。attr()attr()设置或返回匹配元素的属性和值。before()before()在每个匹配的元素之前插入内容。clone()clone()创建匹配元素集合的副本。detach()detach()从 DOM 中移除匹配元素集合。empty()empty()删除匹配的元素集合中所有的子节点。hasClasshasClass()()检查匹配的元素是否拥有指定的类。第三十八页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)6、jQuery HTML 操作(cozu)（3）jQuery HTML 操作 文档操作参考手册二、关键技术二、关键技术方法方法描述描述html()html()设置或返回匹配的元素集合中的 HTML 内容。insertAfter()insertAfter()把匹配的元素插入到另一个指定的元素集合的后面。insertBefore()insertBefore()把匹配的元素插入到另一个指定的元素集合的前面。prepend()prepend()向每个匹配的元素内部前置内容。prependTo()prependTo()向每个匹配的元素内部前置内容。remove()remove()移除所有匹配的元素。removeAttr()removeAttr()从所有匹配的元素中移除指定的属性。removeClass()removeClass()从所有匹配的元素中删除全部或者指定的类。replaceAll()replaceAll()用匹配的元素替换所有匹配到的元素。replaceWith()replaceWith()用新内容替换匹配的元素。第三十九页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)6、jQuery HTML 操作(cozu)（3）jQuery HTML 操作 文档操作参考手册二、关键技术二、关键技术方法方法描述描述text()text()设置或返回匹配元素的内容。toggleClass()toggleClass()从匹配的元素中添加或删除一个类。unwrap()unwrap()移除并替换指定元素的父元素。val()val()设置或返回匹配元素的值。wrap()wrap()把匹配的元素用指定的内容或元素包裹起来。wrapAll()wrapAll()把所有匹配的元素用指定的内容或元素包裹起来。wrapinner()wrapinner()将每一个匹配的元素的子内容用指定的内容或元素包裹起来。第四十页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)7、jQuery CSS 函数(hnsh)（1）jQuery CSS 操作Query 拥有三种供 CSS 操作的重要函数：$(selector).css(name,value) $(selector).css(properties) $(selector).css(name) 函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值：$(selector).css(name,value)$(p).css(background-color,yellow);二、关键技术二、关键技术第四十一页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)7、jQuery CSS 函数（1）jQuery CSS 操作函数 css(properties) 同时为所有匹配元素的一系列 CSS 属性设置值：$(selector).css(properties)$(“p”).css(“background-color”:“yellow”,“font-size”:“200%”);函数 css(name) 返回(fnhu)指定的 CSS 属性的值：$(selector).css(name)$(this).css(background-color);二、关键技术二、关键技术第四十二页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)7、jQuery CSS 函数（2）jQuery Size 操作(cozu)jQuery 拥有两种供尺寸操作的重要函数：$(selector).height(value) $(selector).width(value) 函数 height(value) 设置所有匹配元素的高度：$(selector).height(value)$(#id100).height(200px);函数 width(value) 设置所有匹配元素的宽度：$(selector).width(value) $(#id200).width(300px); 二、关键技术二、关键技术第四十三页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)7、jQuery CSS 函数(hnsh)（3）jQuery CSS 操作参考手册 二、关键技术二、关键技术CSS CSS 属性属性描述描述css()css()设置或返回匹配元素的样式属性。height()height()设置或返回匹配元素的高度。offset()offset()返回第一个匹配元素相对于文档的位置。offsetParent()offsetParent()返回最近的定位祖先元素。position()position()返回第一个匹配元素相对于父元素的位置。scrollTop()scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。scrollLeft()scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。width()width()设置或返回匹配元素的宽度。第四十四页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)1、添加二级菜单项 为先前做好的菜单(ci dn)添加二级菜单(ci dn)项，例如： 学院概况 学院简介 机构设置 专业建设 联系我们 三、操作步骤三、操作步骤第四十五页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)2、添加jQuery库 在head中添加jQuery库：3、制作菜单特效 创建layout.js文件(wnjin)，编写jQuery程序：$(document).ready(function() catalogue(); setTimeout(function() var bodyHeight=$(PageBody).height();var headHeight=$(#Header).height();$(#homeNav).css(height, bodyHeight - headHeight); , 200);三、操作步骤三、操作步骤第四十六页，共五十二页。网站滑动菜单网站滑动菜单(ci dn)(ci dn)制作制作WEB编程基础(jch)3、制作菜单(ci dn)特效 创建layout.js文件，编写jQuery程序：function catalogue() $(#homeNav .catalogue).hover(function() $(this).find(h1a).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);三、操作步骤三、操作步骤第四十七页，共五十二页。网站滑动网站滑动(hudng)(hudng)菜单菜单制作制作WEB编程基础(jch)3、制作菜单特效 创建layout.js文件(wnjin)，编写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); );三、操作步骤三、操作步骤第四十八页，共五十二页。网站网站(wn zhn)(wn zhn)滑动菜滑动菜单制作单制作WEB编程基础(jch)3、制作菜单特效 创建layout.js文件，编写(binxi)jQuery程序：function homeNav() t = $(#navhear).offset().top; mh = $(#Header).height(); $(window).scroll(function() s = $(document).scrollTop(); if (s t - 10) $(#navhear).stop(false, false).animate( marginTop: s - mh , 500); else $(#navhear).stop(false, false).animate( marginTop: 0 , 500); )三、操作步骤三、操作步骤第四十九页，共五十二页。网站网站(wn zhn)(