14-jQuery应用.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,*,页,第,14,章 jQuery应用,2024年12月4日,第,1,页,学习目标,掌握jQuery选择器,掌握jQuery常用方法,熟悉jQuery事件与动画,2024/12/4 周三,14.1 jQuery简介,目前网络上有大量开源的 JS 框架，但jQuery 是最流行的 JS 框架。许多大公司如Google、Microsoft、IBM等都在使用 jQuery。jQuery除了具有HTML元素选取、HTML元素操作、CSS 操作和HTML事件处理等功能，还提供大量的插件给用户使用。,在网页的引用jQuery库就可以调用jQuery库中的函数：,2024/12/4 周三,14.1 jQuery简介,用户也可以不下载jQuery库，直接引用谷歌、微软等公司的CDN(内容分发网络)中的jQury库，如引用微软CDN中的jQuery库格式为：,2024/12/4 周三,14.2 jQuery选择器,先通过例14-1了解怎样在网页中调用jQuery库来修改HTML元素样式。,2024/12/4 周三,14.2 jQuery选择器,例14-1在浏览器中的浏览效果如图所示,可以看到,“,jQuery,”,这个单词变成了红色，字体大小相对与其他文字要稍微大一些。文字颜色、文字大小都是通过调用jQuery库中的方法实现了。,2024/12/4 周三,14.2 jQuery选择器,下面以其中一条语句为例来说明jQuery语句的语句：,可以看到，调用jQuery库中的方法实现一定的功能需要先选定要操作的元素，再对选定的元素调用jQuery库中的方法实现特定的功能。,2024/12/4 周三,14.2 jQuery选择器,jQuery 选择器基于元素的 id、类、类型、属性、属性值等,“,查找,”,（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。常用的jQuery选择器有：,(1)元素选择器,元素选择器基于元素名选取元素。如在页面中选取所有 元素：$(,“,p,”,)。下面的代码实现了单击按钮时，将所有的段落隐藏。,2024/12/4 周三,14.2 jQuery选择器,2024/12/4 周三,14.2 jQuery选择器,(2)#id 选择器,jQuery#id 选择器通过 HTML 元素的 id 属性选取指定的元素。如$(#test)。下面的代码演示在文档就绪函数中定义按钮的单击事件，单击按钮时将ID为test的元素隐藏。,2024/12/4 周三,14.2 jQuery选择器,（3）类选择器,jQuery 类选择器可以通过指定的 class 查找元素。如$(,“,.test,”,)。下面的代码演示在文档就绪函数中定义按钮的单击事件，单击按钮时将类名为test的元素显示出来。,2024/12/4 周三,14.2 jQuery选择器,将元素选择器、类选择器和类选择器进行组合并与伪类结合就可以得到多种复杂的选择器，下表列举了部分复合选择器。,2024/12/4 周三,14.2 jQuery选择器,课本例14-2（源码参照课本）利用jQuery的组合选择器实现表格的奇偶行背景色不同，并设置鼠标移动到表格行上时行的背景色。,例14-2在浏览器中的显示效果如下图，可以看到，表格奇数行的背景色为白色，偶数行的背景色为灰色，当鼠标移动到某一行上时，这一行的背景色变为橙色,2024/12/4 周三,14.3 jQuery事件,页面对不同访问者的响应叫做事件，事件处理程序指的是当 HTML 中发生某些事件时所调用的方法，。常见的事件还有单击事件（click）、获得焦点事件（focus）、失去焦点事件（blur）等。下面的例子定义了按钮的单击事件，单击按钮时，如果div是隐藏的，则将div显示出来；否则将div隐藏起来。,2024/12/4 周三,14.3 jQuery事件,2024/12/4 周三,14.3 jQuery事件,例14-4演示focus事件和blur事件，当文本框获得焦点时，将文本框的背景色设置为灰色；当文本框失去焦点时，将文本框的背景色设置为白色，同时对文本框的内容进行判断，如果内容为空弹出警告框。,2024/12/4 周三,14.3 jQuery事件,2024/12/4 周三,14.4 jQuery效果,（1）元素显示与隐藏,通过 jQuery，使用 hide()和 show()方法来隐藏和显示 HTML 元素，显示与隐藏的语法为：,$(selector).hide(speed,callback);,$(selector).show(speed,callback);,speed 参数规定隐藏/显示的速度，可以取以下值：,“,slow,”,、,“,fast,”,或毫秒，可选的 callback 参数是隐藏或显示完成后所执行的函数名称。下面的代码实现单击button元素时所有段落在1000毫秒内隐藏,2024/12/4 周三,14.4 jQuery效果,可以使用 toggle()方法来切换 hide()和 show()方法。显示被隐藏的元素，并隐藏已显示的元素，使用方法为：,可以使用 toggle()方法来切换 hide()和 show()方法。显示被隐藏的元素，并隐藏已显示的元素。,2024/12/4 周三,14.4 jQuery效果,（2）淡入淡出效果,jQuery fadeIn()用于淡入已隐藏的元素，fadeOut()方法用于淡出可见元素，fadeToggle()方法可以在 fadeIn()与 fadeOut()方法之间进行切换。如果元素已淡出，则 fadeToggle()会向元素添加淡入效果；如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。这三个方法的语法相同，下面以fadeIn()为例介绍淡入淡出效果的使用。fadeIn()的语法为：,$(selector).fadeIn(speed,callback);,2024/12/4 周三,14.4 jQuery效果,下例演示单击按钮时，三个div的不同速度淡入效果,2024/12/4 周三,14.4 jQuery效果,上例先通过CSS将三个div的,“,display,”,设置为,“,none,”,，实现元素的隐藏，当单击按钮时分别选择三个div，调用fadeIn()实现元素的淡入效果，效果如图所示。,2024/12/4 周三,14.4 jQuery效果,（3）滑动效果,jQuery slideDown()、slideUp()、slideToggle()分别实现元素向下、向上和向上与向下间自动切换的滑动效果。三个方法的语法相识，以slideUp为例介绍其语法：,$(selector).slideUp(speed,callback);,同样speed 参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。下面的代码实现单击,“,#flip,”,元素时，,“,#panel,”,元素向下滑动。,2024/12/4 周三,14.4 jQuery效果,2024/12/4 周三,14.4 jQuery效果,利用jQuery的滑动效果，还可以制作垂直弹出式菜单，课本例14-6（源码参照课本）实现利用滑动效果制作垂直弹出式菜单。,例14-6在浏览器中的浏览效果如图所示，单击,“,垂直导航,”,时，显示子菜单；鼠标移到到子菜单项时背景色变为橙色。,2024/12/4 周三,14.4 jQuery效果,（4）动画效果,jQuery animate()方法用于执行一个基于css属性的自定义动画，用户可以为匹配的元素设置css样式，animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画。其函数语法为：,params 参数定义形成动画的 CSS 属性；speed参数规定效果的时长。它可以取以下值：slow、fast 或毫秒；callback参数是动画完成后所执行的函数名称。,2024/12/4 周三,14.4 jQuery效果,下面的代码把元素向左移动250像素（注意把元素的 CSS position 属性设置为 relative、fixed 或 absolute）：,使用animate生成动画可以同时使用多个属性：,2024/12/4 周三,14.4 jQuery效果,Animate还可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上+=或-=：,2024/12/4 周三,14.4 jQuery效果,课本例14-7（源码参照课本）利用animate自定义动画制作可以单击来展开/收缩的元素。,例14-7在浏览器中的浏览效果如图所示，但用鼠标单击标题h3时，标题h3后的div会自动在展开/收缩两种状态间切换。,2024/12/4 周三,14.5 jQuery应用,应用jQuery可以完成网页元素内容修改，样式设置等,(1)设置文本框样式,假设表达中有一个文本框，其id为,“,username,”,，可以用jQuery为此文本框获得焦点时设置背景和边框，失去焦点时移除背景和边框设置详细代码如下：,2024/12/4 周三,14.5 jQuery应用,2024/12/4 周三,14.5 jQuery应用,此网页在用户输入信息时的效果如图所示，采用hover伪类也可以达到同样的效果，但低版本IE浏览器不支持除超链接外的hover伪类选择器，本小节中代码可以兼容低版本IE浏览器。,2024/12/4 周三,14.5 jQuery应用,(2)操作复选框,jQuery为操作表单加入了表单选择器，可以方便获取表单的元素。下表列举了部分常用的表单选择器,2024/12/4 周三,14.5 jQuery应用,表达选择器可以与其他选择器结合使用，如$(name=sports:checkbox)选择所有,“,name,”,属性等于,“,sports,”,的复选框，下面的代码演示使用jQuery设置所有复选框为全部选中或全部没有选中,2024/12/4 周三,14.5 jQuery应用,当,“,全选,”,复选框处于,“,选中,”,状态时，所有的复选框都被选中，如图（a）；当,“,全选,”,复选框处于,“,未选中,”,状态时，所有的复选框都没被选中，如图（b）。,2024/12/4 周三,14.5 jQuery应用,(3)为表格添加丰富的样式,表格是网页上非常常见的一个元素，可以为表格添加丰富的样式，如奇偶性的样式不同。课本示例代码（源码参照课本）演示为表格的奇偶行设置不同的背景颜色，同时当鼠标移动到某一行时，这一个高亮显示。,2024/12/4 周三,本章小结,本章介绍了jQuery的配置，jQuery选择器，详细描述了使用jQuery制作动画和修改网页元素样式，通过本章学习，读者对jQuery有一个初步的认识，并能用jQury丰富网页元素效果，并可以进一步学习用jQuery在一定程度上解决不同浏览器的兼容问题。,2024/12/4 周三,