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 相关文章推荐
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 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与javascript对多项选择的处理
2006/10/09 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
详解js的六大数据类型
2016/12/27 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
优秀学生事迹材料
2014/02/08 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
挂职锻炼个人总结
2015/03/05 职场文书