事件

on方法可以将一个事件绑定在jQuery对象上，当你的操作触发了这些事件时，便会调用你所绑定的函数。

例如，给某个超链接绑定点击事件。

  1.  <head>
  2.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.  <script src="./js/jquery-1.12.0.js"></script>
  4.  <script>
  5.  $(document).ready(function(){
  6.      var a = $('a');
  7.      a.on('click', function(){
  8.          alert('Hello Word');
  9.      });
  10.  });
  11.  </script>
  12.  <title>Event</title>
  13.  </head>
  14.  <body>
  15.  <a href="#0">Click</a>
  16.  </body>

除了用on()以外，还可以直接用click来绑定点击事件。

  1. <script>
  2. $(document).ready(function(){
  3.     var a = $('a');
  4.     a.click(function(){
  5.         alert('Hello');
  6.     });
  7. });
  8. </script>

鼠标事件

click: 鼠标单击时触发；

dblclick：鼠标双击时触发；

mouseenter：鼠标进入时触发；

mouseleave：鼠标移出时触发；

mousemove：鼠标在DOM内部移动时触发；

hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。

keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。

其他事件

focus：当DOM获得焦点时触发；

blur：当DOM失去焦点时触发；

change：当<input>、<select>或<textarea>的内容改变时触发；

submit：当<form>提交时触发；

ready：当页面被载入并且DOM树完成初始化后触发。

其中，ready仅作用于document对象上，在页面DOM树构建完成后触发。

正如上述代码所示，除了能够用on绑定ready事件外，ready事件也可以像click一样被简写。甚至能被更简单的写为：

  1.  <script>
  2.  $(function(){
  3.      var a = $('a');
  4.      a.click(function(){
  5.          alert('Hello');
  6.      });
  7.  });
  8.  </script>

而且这种写法更为常见。

如果想获得事件的其他内容，可以在function传入变量e来获取。

取消绑定：

和on()相反的是，off()可以帮我们取消jQuery对象上的事件绑定，

  1.  <head>
  2.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.  <script src="./js/jquery-1.12.0.js"></script>
  4.  <script>
  5.  $(function(){
  6.      var a = $('a');
  7.      a.click(function(){
  8.          alert('Hello');
  9.      });
  10.      var bt = $('button');
  11.      bt.click(function(){
  12.          a.off('click');
  13.          alert('event_off');
  14.      });
  15.  });
  16.  </script>
  17.  <title>Event</title>
  18.  </head>
  19.  <body>
  20.  <a href="#0">Click</a>
  21.  <button>event_off</button>
  22.  </body>

点击Button时取消了链接的点击事件，再点击链接不会出现提示框。

实际上，这里我们将a链接上的点击事件绑定函数全部取消了，如果只想取消某一个函数，那么我们在绑定时，就不能够采用匿名函数。并且在取消时，将函数对象也作为参数传入。

  1.  <head>
  2.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.  <script src="./js/jquery-1.12.0.js"></script>
  4.  <script>
  5.  $(function(){
  6.      var click_f2 = function(){
  7.          alert('hello 2');
  8.      };
  9.      var a = $('a');
  10.      a.click(function(){
  11.          alert('Hello');
  12.      });
  13.      a.click(click_f2);
  14.  
  15.      var bt = $('button');
  16.      bt.click(function(){
  17.          a.off('click',click_f2);
  18.          alert('click_f2 off');
  19.      });
  20.  });
  21.  </script>
  22.  <title>Event</title>
  23.  </head>
  24.  <body>
  25.  <a href="#0">Click</a>
  26.  <button>event_off</button>
  27.  </body>

这段代码中，我们只取消绑定了click_f2，而Hello仍然正常提示。同时我们可以发现绑定事件响应的先后顺序是根据绑定的先后来的。

事件通常是由用户操作触发，如果我们希望代码可以直接触发事件，则可用trigger()，这样能够避免我们写很多重复的代码。

  1.  <head>
  2.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.  <script src="./js/jquery-1.12.0.js"></script>
  4.  <script>
  5.  $(function(){
  6.      var a = $('a');
  7.      a.click(function(){
  8.          alert('Hello');
  9.      }); 
  10.  
  11.      var bt = $('button');
  12.      bt.click(function(){
  13.          a.trigger('click');
  14.      });
  15.  });
  16.  </script>
  17.  <title>Event</title>
  18.  </head>
  19.  <body>
  20.  <a href="#0">Click</a>
  21.  <button>event_off</button>
  22.  </body>

当我们点击按钮时，我们在代码内部触发了a的点击事件，因此也能弹出Hello。

动画：

我们已经知道了通过show()和hide()方法，可以让一个jQuery对象消失或者隐藏。但是当我们给方法传入一个参数时，页面就能呈现渐变的效果，一般传入的参数是毫秒数，但是'slow'和'fast'也能作为参数传入。

show()和hide()是对象由左上角逐渐收起或是展开，而slideUp()和slideDown()则是垂直方向的收起和展开。

fadeIn()和fadeOut()表示渐入渐出的效果。

同时，jQuery还通过animate()支持自定义动画效果。给animate传入最终的CSS样式和变化的时间，则可以在指定时间内渐变成最后的样式。同时，animate还能够传入回调函数，在动画结束后被调用。

  1.  <head>
  2.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.  <title>Animate</title>
  4.  <script src='./js/jquery-1.12.0.js'></script>
  5.  <script>
  6.  $(function(){
  7.      var bt = $('button');
  8.      var div = $('#test-animate');
  9.      bt.click(function(){
  10.          div.animate({
  11.              width: '256px',
  12.              height: '256px'
  13.          },3000,function(){
  14.              alert('animate done');
  15.          });
  16.      });
  17.  });
  18.  </script>
  19.  </head>
  20.  <body>
  21.  <div id='test-animate'></div>
  22.  <button>change CSS</button>
  23.  </body>

jQuery学习(三)的更多相关文章

  1. Jquery 学习三

    一.each语句 1.each语句的功能 在jQuery中,通过$函数获取的都是jQuery对象.通过测试可知,jQuery对象是一个类数组的特殊对象,其是DOM对象的集合.而each语句就是专门用于 ...

  2. JQuery学习三(隐式迭代和节点遍历)

    在JQuery中根据id获取控件,如果输入id错误是不报错的. 必要时可以通过写判断语句进行判断是否id写错 <!DOCTYPE html> <html xmlns="ht ...

  3. jQuery学习三——事件

    代码如下: <!DOCTYPE html> <html> <head> <title>jquery事件</title> </head& ...

  4. jquery 学习(三) - 遍历操作

    HTML代码 <p>1111</p> <p>1111</p> <p>1111</p> <p>1111</p&g ...

  5. jQuery学习(三)——选择器总结

    1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...

  6. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  7. jQuery学习-事件之绑定事件（三）

    在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...

  8. jquery学习笔记(三)：事件和应用

    内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...

  9. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

随机推荐

  1. DALI 48V驱动

    DALI-CC-30W-48V技术手册 产品名称:DALI-CC-30W-48V 支持协议:IEC 62386-101:2018,IEC 62386-102:2018,IEC 62386-207:20 ...

  2. scratch 如何改变变量的作用域

    在新建变量的时候,有个选项是“适用于所有角色”还是“仅适用于当前角色”.通常称前者为全局变量,所有角色都可以访问到这个变量:后者,称为局部变量,只能在当前角色里访问到这个变量.例如,在使用克隆功能时, ...

  3. 【php】错误日志处理

    一. 错误处理: a) 在写程序的过程当中,遇到错误时,你的反应?可能比较急躁,比较烦 b) 遇到错误后:一别哭,二别闹,三别上吊,四别尿……二. 你可能会遇到的错误: a) 语法错误 i. 语法错误 ...

  4. Serverless无服务器云函数入门唠叨

    B站录了个视频: https://www.bilibili.com/video/av59020925/

  5. 小小的锁，大大的疑问？Lock疑问？

    Lock锁 怎么使用?怎么把下面的这个锁弄得比较合适,大家都能去买票?? 和synchronized相比的好处? lock的使用规范try finnally private final Reentra ...

  6. 2019-07-28【机器学习】无监督学习之聚类 DBSCAN方法及其应用 （在线大学生上网时间分析）

    样本: import numpy as np import sklearn.cluster as skc from sklearn import metrics import matplotlib.p ...

  7. python初学（一）

    1.输入一个百分制成绩,要求输出成绩等级A.B.C.D.E,其中90~100分为A,80~89分为B,70~79分为C,60~69分为D,60分以下为E. 要求:1)用if语句实现:2)输入百分制成绩 ...

  8. Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(五)之Controlling Execution

    In Java, the keywords include if-else,while,do-while,for,return,break, and a selection statement cal ...

  9. \r\n的意思

    \n是换行,英文是New line.\r是回车,英文是Carriage return. 1.换行符(line break),是一种计算机语言表达方式,它的作用是跳到下一个新行.在不同的语言中,代码也有 ...

  10. Python处理HTTP返回包遇到问题总结TypeError、keyError、SyntaxError、AttributeError

    处理HTTP返回包包括对关键参数的校验,参数完整性检验,获取返回包参数的方法,返回包数据去重方法 在执行时遇到不少问题,部分问题记录如下: 1.报错信息:“TypeError: list indice ...