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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
js实现简易ATM功能
Oct 27 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
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
实现51Map地图接口(示例代码)
2013/11/22 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Django自定义用户认证示例详解
2018/03/14 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
详解python中的异常和文件读写
2021/01/03 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
工程力学专业自荐信范文
2014/03/17 职场文书
学校安全责任书
2014/04/14 职场文书
《菜园里》教学反思
2014/04/17 职场文书
大学班级学风建设方案
2014/05/01 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫