jQuery学习总结之jQuery事件


Posted in Javascript onJune 30, 2014

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

<img id="imgGoogle" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="google.com" />

<input type="button" id="btnHide" value="隐藏图片" />
jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

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

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

在过去,我们经常看到:

<div onclick="alert('租房贵');" id="divRent">在北京</div>

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

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

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

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

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

<div id="divRent">人在北京</div>
jQuery("#divRent").one("click", function() {

    alert("租房贵");

});

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

2、focus()和blur()事件

<input id="tTest" type="text" />
jQuery("#tTest").focus(function() { 

    jQuery(this).css("background", "yellow"); 

}).blur(function() { 

    jQuery(this).css("background", "white"); 

});

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

3、keydown()和keyup()事件

<input type="text" id="tTest" /> 

<label id="lResult"></label>
jQuery("#tTest").keyup(function() { 

    jQuery("#lResult").html(jQuery(this).val()); 

});

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

4、submit()事件

<form id="form2" runat="server">

    <input id="text" type="text" /> 

    <asp:button id="btnTest" onclick="btnTest_Click" runat="server" text="测试"> 

    </asp:button> 

</form>
jQuery("#form1").submit(function() { 

    if (jQuery.trim(jQuery("#text").val()).length == 0) { 

        return false; 

    } 

});

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

5、hover()事件

<div id="divHover">hover me</div>
jQuery("#divHover").hover(function() { 

    jQuery(this).css("background", "yellow"); 

}, function() { 

    jQuery(this).css("background", "red"); 

});

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

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

Javascript 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
子页向父页传值示例
Nov 27 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
JavaScript 获取任一float型小数点后两位的小数
Jun 30 #Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 #Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 #Javascript
javascript时间函数大全
Jun 30 #Javascript
js取得html iframe中的元素和变量值
Jun 30 #Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 #Javascript
js实现的点击div区域外隐藏div区域
Jun 30 #Javascript
You might like
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
社区工作者先进事迹
2014/01/18 职场文书
社区消防工作实施方案
2014/03/21 职场文书
募捐倡议书
2014/04/14 职场文书
绿色环保口号
2014/06/12 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2014年林业工作总结
2014/12/05 职场文书
捐书活动倡议书
2015/04/27 职场文书
第一军规观后感
2015/06/12 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python