【精品】web编程基础－css、javascript、jquery第三部分 jquery（可编辑.ppt

《【精品】web编程基础－css、javascript、jquery第三部分 jquery（可编辑.ppt》由会员分享，可在线阅读，更多相关《【精品】web编程基础－css、javascript、jquery第三部分 jquery（可编辑.ppt（51页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web编程基础CSS、JavaScript、jQuery第三部分 jQueryWEB编程基础教学目标教学目标通过这一部分的学习让学生掌握通过这一部分的学习让学生掌握jQueryjQuery特性，特性，jQueryjQuery语法、选择器和事件相关知识。能够熟练使语法、选择器和事件相关知识。能够熟练使用用jQuery jQuery 应用应用 JavaScript JavaScript 效果，用于制作网页文本、效果，用于制作网页文本、图片、菜单等网页特效。图片、菜单等网页特效。网站滑动菜单制作网站滑动菜单制作jQueryjQuery语法。语法。jQuery选择器（元素选择器、属性选择器和选择器（元

2、素选择器、属性选择器和CSS选择器）。选择器）。jQuery事件函数（隐藏、显示、切换、滑动以及动画等）。事件函数（隐藏、显示、切换、滑动以及动画等）。jQuery常用方法。常用方法。WEB编程基础教学内容教学内容重点：重点：1、jQuery语法基础语法基础 2、jQuery选择器选择器 3、jQuery事件事件 4、jQuery效果效果 5、jQuery 其他操作其他操作难点：难点：jQuery事件和效果的使用事件和效果的使用WEB编程基础教学重难点教学重难点网站滑动菜单制作网站滑动菜单制作WEB编程基础 以前学过用行为制作弹出式菜单，这样的菜单看上去样式单一乏味。现在我们可以用jQuery

3、相关知识制作各种精美的菜单。一、网站首页滑动菜单一、网站首页滑动菜单图图1 1 菜单效果图菜单效果图网站滑动菜单制作网站滑动菜单制作WEB编程基础1、jQuery 简介（3）库的替代 Google 和 Microsoft 对 jQuery 的支持都很好。如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google or Microsoft 加载 CDN jQuery 核心文件。使用使用 Google Google 的的 CDN CDN二、关键技术二、关键技术 网站滑动菜单制作网站滑动菜单制作WEB编程基础1、jQuery 简介（3）库的替代 使用使用 Microsoft Mic

4、rosoft 的的 CDN CDN二、关键技术二、关键技术 网站滑动菜单制作网站滑动菜单制作WEB编程基础2、jQuery 语法通过 jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。jQuery 语法是为 HTML 元素的选取编制，可以对元素执行某些操作。基础语法是基础语法是：$(selector).action()美元符号定义 jQuery 选择符（selector）“查询”和“查找”HTML 元素 jQuery action()执行对元素的操作 二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础2、jQuery 语法（

5、1）$(this).hide()-隐藏当前元素隐藏当前元素二、关键技术二、关键技术$(document).ready(function()$(button).click(function()$(this).hide();););Click me/body网站滑动菜单制作网站滑动菜单制作WEB编程基础2、jQuery 语法（2）$(p).hide()-隐藏所有段落隐藏所有段落二、关键技术二、关键技术$(document).ready(function()$(button).click(function()$(p).hide();););网站滑动菜单制作网站滑动菜单制作WEB编程基础2、jQuer

6、y 语法（3）$(p.test).hide()-隐藏所有隐藏所有 class=test 的段落的段落（4）$(#test).hide()-隐藏所有隐藏所有 id=test 的元素的元素 程序与（1）（2）相似，只需修改隐藏函数hide()前的函数即可。提示提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础3、jQuery 选择器 选择器允许您对元素组或单个元素进行操作。在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的

7、元素。jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中，选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础3、jQuery 选择器（1）jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。$(p)选取 元素。$(p.intro)选取所有 class=intro 的 元素。$(p#demo)选取 id=demo 的第一个 元素。（2）jQuery 属性选择器 j

8、Query 使用 XPath 表达式来选择带有给定属性的元素。$(href)选取所有带有 href 属性的元素。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础3、jQuery 选择器（2）jQuery 属性选择器$(href=#)选取所有带有 href 值等于#的元素。$(href!=#)选取所有带有 href 值不等于#的元素。$(href$=.jpg)选取所有 href 值以.jpg 结尾的元素。（3）jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：$(p).css

9、(background-color,red);二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础3、jQuery 选择器 二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础4、jQuery 事件（1）jQuery 事件函数jQuery 事件处理函数是 jQuery 中的核心函数。事件处理函数是当 HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。由于 jQuery 是为事件处理特别设计的，通常是把 jQuery 代码置于网页 部分的“事件处理”函数中。如果您的网站包含许多页面，并且您希望您的

10、 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的.js 文件中。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础4、jQuery 事件（2）jQuery事件参考手册1）.jQuery 事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例：上面的例子将触发 id=“demo”的 button 元素的 click 事件。二、关键技术二、关键技术$(button#demo).click()网站滑动菜单制作网站滑动菜单制作WEB编程基础4、jQuery 事件（2）jQuery事件参考手册1）.jQuery 事件方法绑定实例：

11、上面的例子会在点击 id=demo 的按钮时隐藏所有图像。二、关键技术二、关键技术$(button#demo).click(function()$(img).hide()网站滑动菜单制作网站滑动菜单制作WEB编程基础4、jQuery 事件（2）jQuery事件参考手册1）.jQuery 事件方法二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础4、jQuery 事件（2）jQuery事件参考手册1）.jQuery 事件方法二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础4、jQuery 事件（2）jQuery事件参考手册2）.jQuery 事件处理方法

12、事件处理方法把事件处理器绑定至匹配元素。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础4、jQuery 事件（2）jQuery事件参考手册2）.jQuery 事件处理方法事件处理方法把事件处理器绑定至匹配元素。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果（1）jQuery隐藏和显示通过 hide()和 show()两个函数，jQuery 支持对 HTML 元素的隐藏和显示：二、关键技术二、关键技术$(#hide).click(function()$(p).hide(););$(#show).click(function()

13、$(p).show(););网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果（1）jQuery隐藏和显示 hide()和 show()都可以设置两个可选参数：speed 和 callback。语法：$(selector).hide(speed,callback)$(selector).show(speed,callback)callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。speed 参数可以设置这些值：“slow”,“fast”,“normal”或 milliseconds（毫秒）：二、关键技术二、关键技术$(button).click(f

14、unction()$(p).hide(1000););网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果（2）jQuery切换 jQuery toggle()函数使用 show()或 hide()函数来切换 HTML 元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法：$(selector).toggle(speed,callback)speed 参数可以设置这些值：slow,fast,normal 或 毫秒。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuer

15、y 效果（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 函数完成之后被执行的函数名称。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果

16、（3）jQuery滑动函数-slideDown,slideUp,slideToggle slideDown()slideUp()slideToggle()二、关键技术二、关键技术$(.flip).click(function()$(.panel).slideDown(););$(.flip).click(function()$(.panel).slideUp(););$(.flip).click(function()$(.panel).slideToggle(););网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果（4）jQuery Fade 函数-fadeIn(),fad

17、eOut(),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 函数完成之后被执行的函数名称。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQ

18、uery 效果（4）jQuery Fade 函数-fadeIn(),fadeOut(),fadeTo()fadeTo()fadeOut()二、关键技术二、关键技术$(button).click(function()$(div).fadeTo(slow,0.25););$(button).click(function()$(div).fadeOut(4000););网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果（5）jQuery自定义动画jQuery 函数创建自定义动画的语法：$(selector).animate(params,duration,easing,callba

19、ck)关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：animate(width:70%,opacity:0.4,marginLeft:0.6in,fontSize:3em);第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是：slow,fast,normal 或 毫秒。二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果（6）jQuery效果参考手册 二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础5、jQuery 效果（6）jQuery效果参考手册 二、关键技术二、关键技术网站

20、滑动菜单制作网站滑动菜单制作WEB编程基础6、jQuery HTML 操作（1）改变 HTML 内容语法$(selector).html(content)html()函数改变所匹配的 HTML 元素的内容（innerHTML）。实例$(p).html(W3C);二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础6、jQuery HTML 操作（2）添加 HTML 内容语法1$(selector).append(content)append()函数向所匹配的 HTML 元素内部追加内容。语法2$(selector).prepend(content)prepend()函数向所匹

21、配的 HTML 元素内部预置（Prepend）内容。实例$(p).append(W3C);二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础6、jQuery HTML 操作（2）添加 HTML 内容语法3$(selector).after(content)after()函数在所有匹配的元素之后插入 HTML 内容。语法4$(selector).before(content)before()函数在所有匹配的元素之前插入 HTML 内容。实例$(p).after(W3C);二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础6、jQuery HTML 操作（3

22、）jQuery HTML 操作 文档操作参考手册二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础6、jQuery HTML 操作（3）jQuery HTML 操作 文档操作参考手册二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础6、jQuery HTML 操作（3）jQuery HTML 操作 文档操作参考手册二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础7、jQuery CSS 函数（1）jQuery CSS 操作Query 拥有三种供 CSS 操作的重要函数：$(selector).css(name,value)$(sel

23、ector).css(properties)$(selector).css(name)函数 css(name,value)为所有匹配元素的给定 CSS 属性设置值：$(selector).css(name,value)$(p).css(background-color,yellow);二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础7、jQuery CSS 函数（1）jQuery CSS 操作函数 css(properties)同时为所有匹配元素的一系列 CSS 属性设置值：$(selector).css(properties)$(“p”).css(“background

24、-color”:“yellow”,“font-size”:“200%”);函数 css(name)返回指定的 CSS 属性的值：$(selector).css(name)$(this).css(background-color);二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础7、jQuery CSS 函数（2）jQuery Size 操作jQuery 拥有两种供尺寸操作的重要函数：$(selector).height(value)$(selector).width(value)函数 height(value)设置所有匹配元素的高度：$(selector).height(

25、value)$(#id100).height(200px);函数 width(value)设置所有匹配元素的宽度：$(selector).width(value)$(#id200).width(300px);二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础7、jQuery CSS 函数（3）jQuery CSS 操作参考手册 二、关键技术二、关键技术网站滑动菜单制作网站滑动菜单制作WEB编程基础1、添加二级菜单项 为先前做好的菜单添加二级菜单项，例如：学院概况 学院简介 机构设置 专业建设 联系我们 三、操作步骤三、操作步骤网站滑动菜单制作网站滑动菜单制作WEB编程基础2

26、、添加jQuery库 在head中添加jQuery库：3、制作菜单特效 创建layout.js文件，编写jQuery程序：$(document).ready(function()catalogue();setTimeout(function()var bodyHeight=$(PageBody).height();var headHeight=$(#Header).height();$(#homeNav).css(height,bodyHeight-headHeight);,200);三、操作步骤三、操作步骤网站滑动菜单制作网站滑动菜单制作WEB编程基础3、制作菜单特效 创建layout.js

27、文件，编写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,fals

28、e).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).anim

29、ate(top:0,left:150 ,200););三、操作步骤三、操作步骤网站滑动菜单制作网站滑动菜单制作WEB编程基础3、制作菜单特效 创建layout.js文件，编写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);)三、操作步骤三、操作步骤网站滑动菜单制作网站滑动菜单制作WEB编程基础3、制作菜单特效 添加layout.js文件到网页中：执行效果：这里我们只讲解了“学院概况”二级菜单的制作。其他菜单制作方法一样，就不在此讲解了。三、操作步骤三、操作步骤图图2 2 二级菜单制作效果图二级菜单制作效果图WEB编程基础小结小结 通过这一部分的学习，同学要掌握jQuery特性，jQuery语法、选择器和事件相关知识。能够熟练使用jQuery 应用 JavaScript 效果，用于制作网页文本、图片、菜单等网页特效。