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.淡入淡出切换方法fade