jQuery技术

jQuery学习大总结(四)jQuery事件

字号+ 作者:H5之家 来源:H5之家 2017-02-12 16:02 我要评论( )

前三篇总结了jQuery的一些基础,有jQuery对象的介绍、jQuery操作css样式和jQuery操作元素。今天总结一下jQuery事件,这是比较重要的一块,希望本次总结能帮助到很多同我一样的新手。 首先,我们来看一个有用的实例,来加深以前所掌握的知识,其中有些是在前

前三篇总结了jQuery的一些基础,有jQuery对象的介绍、jQuery操作css样式和jQuery操作元素。今天总结一下jQuery事件,这是比较重要的一块,希望本次总结能帮助到很多同我一样的新手。

首先,我们来看一个有用的实例,来加深以前所掌握的知识,其中有些是在前边出现过的。

jQuery jQuery});});

当点击隐藏图片时,google的logo图片将在一秒钟进行隐藏。这里我们用到了hide()方法,当然也可不指定时间,如果要显示图片的话应该使用show()方法,感觉是不是很棒。

现在开始本篇的主要内容:事件。大家可能已经注意到了,上边已经在多处用到了事件。其中,document.ready就是一个事件,当文档准备好了,它告诉jQuery可以执行事件了,鼠标移动、点击、文本框焦点离开等都是事件。

在过去,我们经常看到:

这种写法。从现在开始,大家应该抛弃这种写法。实现js代码和html的分离,这样页面整洁了,效率也会更高。现在的写法,将会变成:

alert});

既然是总结,我还是像前三篇那样,用实例来记录尽可能多的事件方法,方便大家在需要的时候查阅。

以下是自己在学习过程中遇到的:

1、one()事件,绑定要执行一次的事件

alert});

以上绑定一次单击事件,第二次点击时,不会再弹出提示。

2、focus()和blur()事件

jQuery jQuery});

此例实用到了链式写法,相信不难理解。如果对jQuery操作css样式不熟悉,可以看看第二篇总结。此例当焦点聚焦在本文框时,背景色变为黄色,离开时又变回白色。这样做的目的,可以提高用户体验,我个人感觉。

3、keydown()和keyup()事件

jQuery});

当键弹起时(这里感觉不好表达^_^),在label中将会显示文本框中的内容。操作元素属性部分可以看看第三篇总结。

4、submit()事件

可以看出,本实例使用了服务器控件。实质上是一样的,最终会进行表单提交。点击按钮时,进行表单提交。如果文本框内容为空时,返回false,从而不进行提交;否则,进行提交。此类应用在web开发中随处可见。

5、hover()事件

jQuery jQuery});

鼠标移动到div上时,div背景色变成黄色,移出背景色变成红色。

以上几种事件是比较常见的,也是用的比较多的。当然本篇总结的只是一小部分,学习中遇到问题还得用jQuery文档进行查阅。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery延迟加载(懒加载)插件 jquery.lazyload.js

    jQuery延迟加载(懒加载)插件 jquery.lazyload.js

    2017-02-12 17:00

  • jquery datatables 学习笔记

    jquery datatables 学习笔记

    2017-02-12 14:03

  • Bootstrap和jQuery UI是同一类的东西吗?

    Bootstrap和jQuery UI是同一类的东西吗?

    2017-02-12 08:09

  • What’s New In jQuery 3 : 17 Added Features amp; How To Use T

    What’s New In jQuery 3 : 17 Added Features amp; How To Use T

    2017-02-11 18:01

网友点评