《Web前端技术（HTML5+CSS3+jQuery）》课件-第9章 jQuery事件处理

第9章jQuery事件处理学习目标123掌握鼠标相关事件的使用方法掌握键盘相关事件的使用方法

掌握表单相关事件的使用方法本章架构★★★9.1应用鼠标事件和键盘事件9.2应用jQuery操作表单9.3

综合案例9.1应用鼠标事件和键盘事件9.1应用鼠标事件和键盘事件

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。click()是当鼠标单击事件被触发时调用的一个函数。该函数在用户点击HTML元素时执行。与鼠标相关的事件除了单击触发的以外，还有鼠标双击触发、鼠标按下时触发、以及鼠标抬起时触发。1鼠标事件9.1应用鼠标事件和键盘事件（1）单击事件click事件是当鼠标单击时会调用的一个函数，该函数在用户点击HTML元素时执行。

语法：

$(selector).click(function)

参数说明：function：可选，规定当click事件发生时运行的函数。1鼠标事件9.1应用鼠标事件和键盘事件（2）双击事件

鼠标双击事件为dbclick，它是在用户完成迅速连续的两次点击之后触发。dblclick()方法触发dblclick事件，或规定当发生dblclick事件时运行函数。

语法：

$(selector).dblclick(function)

参数说明：function：可选，规定当dblclick事件发生时运行的函数。1鼠标事件9.1应用鼠标事件和键盘事件（3）鼠标按下和抬起事件mousedown事件在用户敲击鼠标键时触发，跟click事件不一样，该事件仅在按下鼠标时触发。mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。1鼠标事件9.1应用鼠标事件和键盘事件（4）鼠标移入和移出事件

当鼠标指针穿过元素时，会发生mouseenter事件。mouseenter()方法触发mouseenter事件，或规定当发生mouseenter事件时运行函数。

语法：

$(selector).mouseenter(function)

参数说明：function：可选。规定mouseenter事件触发时运行的函数。

1鼠标事件9.1应用鼠标事件和键盘事件

当鼠标指针离开元素时，会发生mouseleave事件。该事件大多数时候会与

mouseenter

事件一起使用。mouseleave()方法触发mouseleave事件，或规定当发生mouseleave事件时运行函数。

语法：

$(selector).mouseleave(function)

参数说明：function：可选。规定当发生mouseleave事件时运行的函数。

1鼠标事件9.1应用鼠标事件和键盘事件

用户每次按下或者释放键盘上的键时都会产生键盘事件。2

键盘事件方法描述执行时机keydown()触发或将函数绑定到指定元素的keydown事件按下键盘时keyup()触发或将函数绑定到指定元素的keyup事件释放按键时keypress()触发或将函数绑定到指定元素的keypress事件产生可打印的字符时9.2应用jQuery操作表单9.2应用jQuery操作表单（1）

focus()方法

通过鼠标点击选中元素或通过tab键定位到元素时，触发获得焦点事件，调用focus()方法。

语法：

$(selector).focus(function)

参数说明：function：元素获得焦点时触发的函数。1焦点事件9.2应用jQuery操作表单（2）blur()方法当元素失去焦点时触发失去焦点事件，调用blur()方法。该方法常与

focus()

方法一起使用。语法：$(selector).blur(function)参数说明：function：可选，规定当blur事件发生时运行的函数。1焦点事件9.2应用jQuery操作表单

change()方法的功能是当元素的值发生改变时触发函数。change()方法仅适用于表单字段，当用于<select>元素时，change事件会在选择某个选项时发生。当用于文本输入类型的<text>或<textarea>时，change事件会在元素失去焦点时发生。语法如下：$(selector).change(function)参数说明：function:可选。规定针对被选元素当change事件发生时运行的函数。2内容改变事件9.2应用jQuery操作表单

当<textarea>或文本类型的<input>元素中的文本被选择时，会发生select事件。select()方法触发select事件，或规定当发生select事件时运行的函数。

语法：

$(selector).select(function)

参数说明：

function：select事件的处理函数。3选择事件9.2应用jQuery操作表单

当提交表单时，会发生submit事件。该事件只适用于表单元素。submit()方法触发submit事件，或规定当发生submit事件时运行的函数。如果submit事件的处理函数返回false，则不执行提交操作；如果返回true，则执行提交操作。

语法：

$(selector).submit(handler(eventObject))

参数说明：●handler：submit事件的处理函数●eventObject：handler的参数。4表单提交事件9.3

综合案例9.3

综合案例“信息技术学院专业介绍”网页综合案例，

编写网页，实现展示专业内容的效果。网页运行效果如图所示。9.3

综合案例

当鼠标移到专业目录的