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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
JavaScript中的类型检查
Feb 03 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
文员个人的求职信范文
2013/09/26 职场文书
运动会跳远加油稿
2014/02/20 职场文书
师德师风演讲稿
2014/05/05 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python