首页 > web前端 > js教程 > 正文

jQuery学习总结之jQuery事件_jquery

php中文网
发布: 2016-05-16 16:42:42
原创
1456人浏览过

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

Logomaster.ai
Logomaster.ai

Logo在线生成工具

Logomaster.ai 99
查看详情 Logomaster.ai
复制代码 代码如下:

google.com

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});
登录后复制

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

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

在过去,我们经常看到:

复制代码 代码如下:

在北京

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

jQuery("#divRent").click(function() {
  alert("租房贵");
});
登录后复制

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

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

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

复制代码 代码如下:

人在北京

复制代码 代码如下:

jQuery("#divRent").one("click", function() {
    alert("租房贵");
});

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

2、focus()和blur()事件

复制代码 代码如下:


复制代码 代码如下:

jQuery("#tTest").focus(function() {
    jQuery(this).css("background", "yellow");
}).blur(function() {
    jQuery(this).css("background", "white");
});

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

3、keydown()和keyup()事件

复制代码 代码如下:



复制代码 代码如下:

jQuery("#tTest").keyup(function() {
    jQuery("#lResult").html(jQuery(this).val());
});

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

4、submit()事件

复制代码 代码如下:


   
   

复制代码 代码如下:

jQuery("#form1").submit(function() {
    if (jQuery.trim(jQuery("#text").val()).length == 0) {
        return false;
    }
});

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

5、hover()事件

复制代码 代码如下:

hover me

复制代码 代码如下:

jQuery("#divHover").hover(function() {
    jQuery(this).css("background", "yellow");
}, function() {
    jQuery(this).css("background", "red");
});

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

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

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号