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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript Promise启示录
Aug 12 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
Vue实现简易计算器
Feb 25 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
?繁体转换的class
2006/10/09 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
对python字典过滤条件的实例详解
2019/01/22 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
找到不普通的东西:Bonanza
2016/10/20 全球购物
见习期自我鉴定范文
2014/03/19 职场文书
股东协议书
2014/04/14 职场文书
大学生个人求职信
2014/06/02 职场文书
班主任经验交流材料
2014/12/16 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
vscode内网访问服务器的方法
2022/06/28 Servers