`
txf2004
  • 浏览: 7028185 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery中的事件与应用

 
阅读更多

目录:

一、事件机制

二、页面载入事件

2.1、ready()方法的工作原理

2.2、ready()方法的几种相同写法

三、绑定事件

四、切换事件

4.1、hover()方法

4.2、toggle()方法

五、移除事件

六、其他事件

6.1、方法one()

6.2、方法trigger()

七、表单应用

7.1、文本框中的事件应用

7.2、下拉列表框中的事件应用

八、列表应用

九、网页选项卡的应用

十、综合案例分析——删除数据时的提示效果在项目中的应用


一、事件机制

众所周知,页面在加载时,会触发Load事件。当用户单击某个按钮时,触发该按钮的Click事件,通过种种事件实现各种功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。那么,事件被出发后是如何执行代码的呢?

严格来说,事件在触发后被分为两个阶段,一个是捕获(Capture),另一个则是冒泡(Bubbling);但有些遗憾的是,大多数浏览器并不是都支持捕获阶段,jQuery也不支持。因此在事件触发后,往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。

二、页面载入事件

2.1、ready()方法的工作原理

jQuery中的页面载入事件ready()方法,类似于传统JavaScript中的OnLoad()方法,只不过在事件执行时间上有区别:OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发,在这种情况下,如果页面中的图片过多或图片过大,那么有可能要等OnLoad()方法执行完毕,用户才能进行其他的操作;如果使用jQuery中的ready()方法加载页面,则只要页面中的DOM模型加载完毕,就会触发ready()方法。因此,两者在事件的执行效果上ready()方法明显优于JavaScript中的OnLoad()方法。

我们剖析一下jQuery()中的ready()方法的工作原理:在jQuery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度,当然遇到执行ready()方法时,通过查看isReady值是否被设置,如果未被设置,那么就说明页面并未加载完成,在此情况下,将未完成的部分用一个数组缓存起来,当全部加载完成后,再将未完成的部分通过缓存一一执行。

2.2、ready()方法的几种相同写法

写法一:

写法二:

写法三:

写法四:

其中写法二简单明了,使用较为广泛。

三、绑定事件

我们可以使用如下的代码绑定按钮的单击事件:

除了上述绑定事件的写法外,在jQuery中,还可以使用bind()方法进行事件的绑定。下面对该方法进行详细的介绍。

bind()功能是为每个选择元素的事件绑定处理函数,其语法格式如下:

其中,参数type为一个或多个类型的字符串,如“click”或“change”,也可以自定义类型;可以被参数type调用的类型包括blur、focus、load、resize、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error。

参数data是作为event.data属性值传递给事件对象的额外数据对象。

参数fn是绑定到每个选择元素的事件中的处理函数。

如果要在一个元素中绑定多个事件,可以将事件用空格隔开。

四、切换事件

在jQuery中,有两个方法用于事件的切换,一个是方法hover(),另一个是方法toggle()。所谓切换事件,即有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。如一个超链接标记<a>,若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发另一个事件,就可以调用jQuery中的hover()方法轻松实现。

4.1、hover()方法

调用jQuery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换,该方法在实际运用中,也可以通过jQuery中的事件mouseenter与mouseleave进行替换。

hover()功能是当鼠标移动到所选的元素上面时,执行指定的第一个函数;当鼠标移出这个元素时,执行指定的第二个函数,其语法格式如下:

参数over为鼠标移到元素时触发的函数,参数out为鼠标移出元素时触发的函数。

示例 用hover方法绑定事件

4.2、toggle()方法

在toggle()方法中,可以依次调用N个指定的函数,知道最后一个函数,然后重复对这些函数轮番调用。

toggle()方法的功能是每次单击后依次调用函数,“依次”说明该方法在调用函数时并未随机或指定调用,而是通过函数设置的前后顺序进行调用,其调用的语法格式如下:

其中参数fn, fn2, ..., fnN为单击时被依次调用的函数。

示例 用toggle方法绑定事件

五、移除事件

在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移除绑定事件的方法,在jQuery中,可以通过unbind()方法移除绑定的所有事件或指定的某一个事件。

unbind()的功能是移除元素绑定的事件,其调用的语法格式如下:

其中,参数type为移除的事件类型,fn为需要移除的事件处理函数;如果该方法没有参数,则移除所有绑定的事件;如果带有参数type,则移除该灿说所指定的事件类型;如果带有参数fn,则只移除绑定时指定的函数fn。

示例 用unbind方法移除事件


六、其他事件

除上述介绍的几种事件方法外,在jQuery中还有很多的事件处理方法,下面介绍其中较为常用的两种处理事件的方法one()和trigger()。

6.1、方法one()

one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:

其中,参数type为事件类型,即需要触发什么类型的事件;参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象;fn为绑定事件时所要触发的函数。

6.2、方法trigger()

在前端页面开发中,有时希望页面在DOM加载完毕后,自动执行一些很人性化的操作,如:文本框中的内容处理全部被选中状态,某个按钮处于焦点中。利用传统的JavaScript语言需要编写复杂的代码才可实现上述功能;而在jQuery中,仅需要调用一个trigger()方法就可以轻松实现。

trigger()方法的功能是在所选择的元素上触发指定类型的事件。其调用的语法格式为:

其中,参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附加参数。

示例 用trigger方法绑定事件

页面效果如下:


说明:trigger()方法可以实现触发性事件,即不必用户做任何动作,自动执行该方法中的事件。在这种情形下,其最终效果可能会有异样产生。如果不希望页面自动执行,可使用triggerHandler()方法,使用方法与trigger()方法基本相同,只是该方法不会自动执行其包含的事件。

七、表单应用

7.1、文本框中的事件应用

文本框是表单中使用最为普遍的元素之一,因此,其前端用户页面的体验度显得十分重要。下面通过一个简单示例,介绍使用jQuery中的事件改变文本框的样式,以提高用户体验。

示例 文本框中的事件应用

示例效果如下:





7.2、下拉列表框中的事件应用

下拉列表框是最为常用的表单对象,该对象可以通过较小的页面空间,展示大量的数据;同时,多个列表框通过联动效果,展示数据的应用也相当广泛。下面通过一个示例,介绍如何在jQuery中,实现三个下拉列表框联动展示数据的功能。

示例 下拉列表框中的事件应用

页面效果如下:


八、列表应用

在页面开发中,经常使用<ul>,即列表标记。在设计展示数据或导航菜单的页面中,列表的使用相当广泛。下面通过一个简单的示例,介绍在jQuery中,如何使用列表<ul>标记实现导航菜单的功能。

示例效果如下所示:


九、网页选项卡的应用

在页面中,除使用列表<ul>标记实现滑动效果的菜单导航条外,还用于网页选项卡的设计。选项卡的功能十分简单,通过单击标题实现内容隐藏或显示的切换,由于它可以在有限的空间中展示大量的数据,因此,被广泛使用在各综合性的门户网站中。下面通过一个简单的示例,介绍网页选项卡快速实现的方法。

示例 网页选项卡的应用

页面效果如下所示:


十、综合案例分析——删除数据时的提示效果在项目中的应用

经分析,该案例的需求如下:

  1. 当用户单击“删除”按钮时,整个页面背景类似于关机效果,“删除”提示框突出显示,用户可以选“关闭”按钮,或单击“确定”或“取消”的操作。
  2. 删除提示框一直居中显示,不论页面大小发生如何变化,这个提示框始终居中显示。
  3. 如果对某条记录打勾,当用户单击提示框中的“确定”按钮时,将在页面中删除该条记录,同时关闭提示框,页面背景恢复正常。

页面效果如下所示:



这里要注意CSS的编写,尤其是各浏览器的兼容。

分享到:
评论

相关推荐

    《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用

    在深入探讨jQuery中的事件与应用之前,我们先要理解jQuery库的基本概念。jQuery是一个轻量级的JavaScript库,它的设计目标是简化HTML文档遍历、事件处理、动画制作以及Ajax交互。由于其简洁的API和高效的性能,...

    jquery鼠标滚轮事件

    在本文中,我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 首先,让我们了解什么是鼠标滚轮事件。在Web开发中,鼠标滚轮事件是当用户滚动鼠标滚轮时触发的事件。这些事件包括`wheel`,这是HTML5新增的标准事件...

    JQUERY应用开发实践指南示例代码

    《jQuery应用开发实践指南》是一本深入浅出介绍jQuery使用的书籍,书中通过丰富的示例代码帮助读者理解并掌握jQuery的核心功能。这份"9780321815262_styer_learningjquery_code"压缩包包含了书中各个章节的示例代码...

    jQuery应用

    jQuery是一个广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和...在"jQuery与表单的综合应用"这一主题中,深入学习和实践这些知识点,将有助于你成为一名优秀的前端开发者。

    jQuery1.12.4+jQuery中文手册.rar

    - 结合实际项目练习,将jQuery的知识应用到网页交互、动态效果和Ajax通信中,提升开发效率。 以上是对jQuery 1.12.4及其相关资源的基本介绍,掌握这些内容,将有助于你在实际开发中熟练运用jQuery,提升前端开发...

    《构建跨平台APP-jQuery.Mobile移动应用实战》 PDF

    第二篇是jQuery Mobile基础篇,介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的使用;第三篇是跨平台APP实战篇,介绍了6个使用jQuery Mobile开发的实际APP;第四篇是发布和推广应用篇,介绍了在开发...

    jquery鼠标滚轮事件支持插件

    在给定的“jquery鼠标滚轮事件支持插件”中,我们关注的是如何利用jQuery扩展来处理鼠标的滚轮事件。这个插件允许开发者监听和响应用户滚动鼠标的滚轮,从而在网页上实现更加动态和交互的功能。 标题中的“jquery...

    jQuery带事件记录的多功能日历

    在这款日历插件中,jQuery扮演了核心的角色,为事件记录、日历展示等功能提供了便利的API和方法。 日历插件的事件记录功能是其核心亮点。用户可以方便地在任何日期上添加事件,无论是会议、约会还是简单的待办事项...

    jQuery Mobile事件参考手册.zip_jQuery Mobile事件参考手册

    《jQuery Mobile事件参考手册》是针对使用jQuery Mobile框架进行移动应用开发的重要参考资料。jQuery Mobile是一个功能丰富的库,专为触摸设备设计,它简化了在HTML5网页上创建响应式、跨平台用户界面的过程。该手册...

    Aspnet 中Jquery应用经典例子

    本文将深入探讨在Asp.net环境中如何利用jQuery实现一系列经典的应用实例。 一、jQuery基本操作 1. **选择器**:jQuery的核心在于它的选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`选取具有特定类...

    jQuery插件flexBox的应用Ⅱ

    jQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用ⅡjQuery插件flexBox的应用Ⅱ

    jquery在sp中的应用图解

    此外,jQuery在SharePoint中的应用还扩展到了Ajax交互,使得与SharePoint列表、服务接口的异步通信变得简单。例如,使用`$.ajax()`或`$.get()`、`$.post()`方法,可以实现数据的获取和提交,提高用户体验。 在处理...

    浅析JQuery框架及其插件应用

    JQuery框架以其轻量级、高性能、易于使用的特性,极大地简化了HTML文档的操作、事件处理、动画以及与服务器的交互等功能。与Prototype、YUI、Mootools等同类库相比,JQuery专注于实用性,摒弃了一些不必要的复杂功能...

    jquery应用实例

    《jQuery应用实例详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API和强大的功能,深受开发者喜爱。本篇文章将深入探讨jQuery在实际应用中的多种实例,帮助读者掌握并熟练运用jQuery,提升...

    jquery很全的例子源码,事件 ajax,表单应用

    《jQuery全方位实例解析:事件、Ajax与表单应用》 jQuery,这个强大的JavaScript库,以其简洁的API和广泛的浏览器兼容性,一直以来都是前端开发者的重要工具。本资源包含了一系列全面的jQuery例子源码,旨在深入...

    JQuery的一些基本应用

    JQuery的一些基本应用,包括自定义行查询,隐藏/显示一行/一列,切换大小图片等

    jQuery应用开发实践指南

    书中不仅详细讲解了jQuery的各种组件的功能特性和jQuery应用开发的流程与方法,而且还讲解了jQuery UI和jQuery Mobile等扩展及插件的用法,可以帮助读者迅速掌握jQuery的用法并具备实战能力。 书中精选了jQuery的...

    jquery仿IPad应用

    本教程将深入探讨如何使用jQuery来创建一个仿iPad的应用,旨在为用户提供与iPad类似的用户体验。我们将讨论以下几个关键知识点: 1. **响应式设计**:iPad应用的一大特点是其适应不同屏幕尺寸的能力。在jQuery中,...

    基于SSH框架与jQuery技术的JavaWeb开发应用

    本文将探讨如何在JavaWeb开发中利用SSH(Struts2 + Spring + Hibernate)框架与jQuery技术,以提高Web应用的性能和用户体验。 #### 二、相关技术介绍 ##### 2.1 SSH框架 SSH框架是由Struts2、Spring和Hibernate三...

    jquery监听DIV的事件

    首先,理解jQuery中的事件处理是非常重要的。jQuery提供了丰富的API来绑定和触发DOM元素上的事件。在jQuery中,我们可以使用`.on()`方法来监听DOM元素的事件。例如,如果我们想要监听一个ID为"myDiv"的DIV元素的点击...

Global site tag (gtag.js) - Google Analytics