jQuery学习大总结(四)jQuery事件

前三篇总结了jQuery的一些基础，有jQuery对象的介绍、jQuery操作css样式和jQuery操作元素。今天总结一下jQuery事件，这是比较重要的一块，希望本次总结能帮助到很多同我一样的新手。

成都创新互联专业做网站、成都网站设计，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文推广等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。

首先，我们来看一个有用的实例，来加深以前所掌握的知识，其中有些是在前边出现过的。

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery(document).ready(function() {
    2. 
  
  
  
  2.     jQuery("#btnHide").click(function() {
    3. 
  
  
  
  3.         jQuery("#imgGoogle").hide("1000");
    4. 
  
  
  
  4.     });
    5. 
  
  
  
  5. });
    6.

当点击隐藏图片时，google的logo图片将在一秒钟进行隐藏。这里我们用到了hide()方法，当然也可不指定时间，如果要显示图片的话应该使用show()方法，感觉是不是很棒。

现在开始本篇的主要内容：事件。大家可能已经注意到了，上边已经在多处用到了事件。其中，document.ready就是一个事件，当文档准备好了，它告诉jQuery可以执行事件了，鼠标移动、点击、文本框焦点离开等都是事件。

在过去，我们经常看到：

 
 
 
    
  
  
  
  1. 在北京

这种写法。从现在开始，大家应该抛弃这种写法。实现js代码和html的分离，这样页面整洁了，效率也会更高。现在的写法，将会变成：

 
 
 
    
  
  
  
  1. jQuery("#divRent").click(function() {
    2. 
  
  
  
  2.     alert("租房贵");
    3. 
  
  
  
  3. });
    4.

既然是总结，我还是像前三篇那样，用实例来记录尽可能多的事件方法，方便大家在需要的时候查阅。

以下是自己在学习过程中遇到的：

1、one()事件，绑定要执行一次的事件

 
 
 
    
  
  
  
  1. 人在北京

 
 
 
    
  
  
  
  1. jQuery("#divRent").one("click", function() {
    2. 
  
  
  
  2.     alert("租房贵");
    3. 
  
  
  
  3. });
    4.

以上绑定一次单击事件，第二次点击时，不会再弹出提示。

2、focus()和blur()事件

 
 
 
    
  
  
  
  1.  
    2. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery("#tTest").focus(function() { 
    2. 
  
  
  
  2.     jQuery(this).css("background", "yellow"); 
    3. 
  
  
  
  3. }).blur(function() { 
    4. 
  
  
  
  4.     jQuery(this).css("background", "white"); 
    5. 
  
  
  
  5. });
    6.

此例实用到了链式写法，相信不难理解。如果对jQuery操作css样式不熟悉，可以看看第二篇总结。此例当焦点聚焦在本文框时，背景色变为黄色，离开时又变回白色。这样做的目的，可以提高用户体验，我个人感觉。

3、keydown()和keyup()事件

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery("#tTest").keyup(function() { 
    2. 
  
  
  
  2.     jQuery("#lResult").html(jQuery(this).val()); 
    3. 
  
  
  
  3. }); 
    4.

当键弹起时（这里感觉不好表达^_^），在label中将会显示文本框中的内容。操作元素属性部分可以看看第三篇总结。

4、submit()事件

 
 
 
    
  
  
  
    2. 
  
  
  
  2.      
    3. 
  
  
  
  3.      
    4. 
  
  
  
  4.      
    5. 
  
  
  
  5.  
    6. 
 
 
 
 
 
 
    
  
  
  
  1. jQuery("#form1").submit(function() { 
    2. 
  
  
  
  2.     if (jQuery.trim(jQuery("#text").val()).length == 0) { 
    3. 
  
  
  
  3.         return false; 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5. });
    6.

可以看出，本实例使用了服务器控件。实质上是一样的，最终会进行表单提交。点击按钮时，进行表单提交。如果文本框内容为空时，返回false，从而不进行提交；否则，进行提交。此类应用在web开发中随处可见。

5、hover()事件

 
 
 
    
  
  
  
  1. hover me

 
 
 
    
  
  
  
  1. jQuery("#divHover").hover(function() { 
    2. 
  
  
  
  2.     jQuery(this).css("background", "yellow"); 
    3. 
  
  
  
  3. }, function() { 
    4. 
  
  
  
  4.     jQuery(this).css("background", "red"); 
    5. 
  
  
  
  5. });
    6.

鼠标移动到div上时，div背景色变成黄色，移出背景色变成红色。

以上几种事件是比较常见的，也是用的比较多的。当然本篇总结的只是一小部分，学习中遇到问题还得用jQuery文档进行查阅。

网页题目：jQuery学习大总结(四)jQuery事件
分享URL：http://www.mswzjz.com/qtweb/news2/201252.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

品牌网站设计知识

分类信息网站

h5页面制作　　 　四川正泰动物　　 　南充网站制作　　 　梦港之夜　　 　网络营销推广　　 　手机网站　　 　四川白乌鱼　　 　雅安电信机房　　 　vi形象设计　　 　绵阳科技城电信IDC机房　　 　木包装箱　　 　温江服务器托管　　 　微信小程序开发　　 　成都服务器托管　　 　成都微商城开发　　 　南充做网站　　 　梅州网站建设　　 　成都做网站　　 　富顺网站建设　　 　成都移动服务器托管