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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
JQuery性能优化的几点建议
May 14 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
JS面向对象编程详解
Mar 06 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
python生成器generator用法实例分析
2015/06/04 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
postman和python mock测试过程图解
2020/02/22 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
怎样声明一个匿名的内部类
2016/06/01 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
勤俭节约倡议书
2014/04/14 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
第一军规观后感
2015/06/12 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript