Web 前端开发技术 教案 项目十一 jQuery 操作方法及应用

Web前端开发技术教案设计项目课题jQuery操作方法及应用授课时间授课对象大学生学习目标1.掌握jQuery操作元素对象信息的方法及应用。2.掌握jQuery特效的方法及应用。学习重点掌握jQuery操作元素对象信息的方法及应用。学习难点掌握jQuery特效的方法及应用。教学方法讲授法、课堂演示法教学用具多媒体课件教学流程教学环节教学内容教学过程任务一元素对象信息一、获取元素对象信息获取元素对象信息包括获取元素的文本内容、HTML标记内容、表单值、属性值、样式值等。获取元素对象信息的方法及说明如表11-1所示。获取元素对象信息包括获取元素的文本内容、HTML标记内容、表单值、属性值、样式值等。获取元素对象信息的方法及说明如表11-1所示。二、设置元素对象信息设置元素对象信息包括设置元素的文本内容、HTML标记内容、属性值、样式值等。设置元素对象信息的方法及说明如表11-2所示。用css()方法设置元素的属性时,可以批量设置,即对选择的元素对象同时进行多个属性设置。批量设置属性的基本语法格式如下。$("元素").css({属性:"属性值",属性:"属性值"……});其中,属性名称不需要加双引号,属性值要加双引号。另外,属性名称中不能有“-”,还要改为“驼峰标记法”格式,即第一个单词小写,后面单词的首字母大写。例如,CSS中背景颜色属性“background-color”要改为“backgroundColor”。任务二事件概述事件是一些可以通过脚本响应的页面动作。当用户按下鼠标键或提交一个表单,或者在页面上移动鼠标指针时,都会产生相关的事件。事件处理是一段JavaScript代码,总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分关联的事件发生时,事件处理器就会被调用。绝大多数事件的命名是描述性的,很容易理解,如Click、Submit、MouseOver等,通过名称即可猜测其含义。但也有少数事件的名称不易理解,如blur(英文的字面意思为“模糊”),表示一个域或者一个表单失去焦点。通常,事件处理器的命名原则是,在事件名称前加上前缀on。例如,对于click事件,处理器名为onClick。jQuery事件的基本语法格式如下。$("元素").事件名称(function(){事件处理代码;});在jQuery事件中,选中的元素对象触发了事件,如果事件代码中需要对这些元素对象进行处理,则可以再次选中这些元素对象,也可以用this关键字引用当前选中的元素对象。一、键盘事件键盘事件是对文档对象document或对获得焦点的指定元素,设置在按下或释放键盘按键时触发的处理过程。常用的键盘事件及说明如表11-3所示。二、鼠标事件鼠标事件是为网页文档中的任意HTML元素对象设置在鼠标操作时触发的处理过程。常用的鼠标事件及说明如表11-4所示。三、表单事件表单事件是表单元素发生用户交互动作时触发的事件。常用的表单事件及说明如表11-5所示。任务三操作文档结构jQuery可以在网页文档中添加、删除元素和内容。操作文档结构的常用方法及说明如表11-6所示。任务四jQuery特效一、隐藏和显示1.隐藏元素方法hide()hide()方法用于隐藏指定元素,其基本语法格式如下。$("元素").hide(持续时间,完成后执行的函数);hide()方法的参数都是可选参数,持续时间可以是关键字fast或slow,也可以是具体的时间值(以毫秒为单位)。fast是200毫秒,slow是600毫秒。若未设置时间,则默认是400毫秒。2.显示元素方法show()show()方法用于显示指定元素,其基本语法格式如下。$("元素").show(持续时间,完成后执行的函数);3.切换显示或隐藏元素方法toggle()toggle()方法用于隐藏已显示的元素或显示已隐藏的元素,其基本语法格式如下。$("元素").toggle(持续时间,完成后执行的函数);二、淡入和淡出1.淡入方法fadeIn()fadeIn()方法用于修改指定元素的透明度,直至元素完全显现,其基本语法格式如下。$("元素").fadeIn(持续时间,完成后执行的函数);fadeIn()方法的参数都是可选参数。2.淡出方法fadeOut()fadeOut()方法用于修改指定元素的透明度,直至元素完全隐藏,其基本语法格式如下。$("元素").fadeOut(持续时间,完成后执行的函数);fadeOut()方法的参数都是可选参数。3.淡入淡出切换方法fadeToggle()fadeToggle()方法用于修改指定元素的透明度,实现隐藏的元素淡入显示或可见的元素淡出隐藏,其基本语法格式如下。$("元素").fadeToggle(持续时间,完成后执行的函数);fadeToggle()方法的参数都是可选参数。4.透明度变化方法fadeTo()fadeTo()方法用于修改指定元素的透明度,变化到指定的透明度,其基本语法格式如下。$("元素").fadeTo(持续时间,透明度,完成后执行的函数);三、滑动1.向下滑动方法slideDown()slideDown()方法用于设置元素从上往下滑动显示,其基本语法格式如下。$("元素").slideDown(持续时间,完成后执行的函数);slideDown()方法的参数都是可选参数。2.向上滑动方法slideUp()slideUp()方法用于设置元素从下往上滑动隐藏,其基本语法格式如下。$("元素").slideUp(持续时间,完成后执行的函数);slideUp()方法的参数都是可选参数。3.上下滑动切换方法slideToggle()slideToggle()方法用于设置元素不可见时从上往下滑动显示,元素可见时从下往上滑动隐藏,其基本语法格式如下。$("元素").slideToggle(持续时间,完成后执行的函数);slideToggle()方法的参数都是可选参数。四、动画1.动画方法animate()animate()方法通过指定元素结束时的CSS属性值,自动实现从初始属性值到结束属性值变化的动画效果,其基本语法格式如下。$("元素").animate({属性:"属性值"},持续时间,完成后执行的函数);属性和属性值是必填参数,持续时间和完成后执行的函数是可选参数。允许设置多个属性和属性值,用逗号分隔。属性名称中有“-”的,需要改为“驼峰标记法”的格式。animate()方法可以实现绝大部分CSS属性变化的动画效果,如宽度、高度、透明度、位置等。在设置位置变化的动画时,元素的position属性值必须设定为absolute、relative或fixed才有效。jQuery函数库中没有颜色变化的动画效果,如果要实现颜色变化的动画效果,则需要下载相关的插件。属性值可以是确定值,也可以是相对值,用“+=”或“-=”相对于当前值计算得到。同一个animate()方法的多个属性变化动画可以同时发生,而多个连续的animate()方法只能依次执行。2.停止动画方法stop()stop()方法用于停止指定元素进行中的或后续的animate()动画操作,其基本语法格式如下。$("元素").stop(是否停止后续所有动画,是否完成当前动画);是否停止后续所有动画和是否完成当前动画两个参数都是可选参数,默认值是false。任务五方法链接对同一元素依次执行多种操作时,可以使用方法链接,只需要选择一次元素,然后依次将新动作追加到上一动作后面即可,其基本语法格式如下。$("元素").方法1().方法2().方法3()……;或者$("元素").方法1().方法2().方法3()……;作业布置一、问答题(1)jQuery获取元素文本内容的方法有哪些?(2)jQuery设置元素宽度和高度的方法有哪些?(3)jQuery在文档中增加文本和增加元素的区别是什么?(4)哪个jQuery函数用于在文档结束加载之前阻止代码运行?(5)当鼠标指针进入H