鼠标事件:

    click

    dblclick

    mouseenter:鼠标进入

    mouseleave:鼠标离开

    hover:鼠标悬停
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("p").mouseenter(function(){

    $("p").css("background-color","yellow");

  });

  $("p").mouseleave(function(){

    $("p").css("background-color","lightgray");

  });

  $("#eilin").click(function(){

    $("p").css("background-color","red");

  });

  $(".eiling").dblclick(function(){

    $("p").css("background-color","black");

  });

  $("p").hover(function(){

    $("p").css("background-color","blue");

  });

});

</script>

</head>

<body>

<p>鼠标移动到该段落。</p>

<button id='eilin'>单击</button>

<button class='eiling'>双击</button>

</body>

</html>
键盘事件

    keypress:键被按下

    keydown:键被按下的过程

    keyup:键盘被松开
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

i= 0;

$(document).ready(function(){

  $("input").keydown(function(){

    $("input").css("background-color","yellow");

  });

  $("input").keyup(function(){

    $("input").css("background-color","pink");

  });

  $("input").keypress(function(){

    $("span").text(i+1);

  });

});

</script>

</head>

<body>

输入你的名字: <input type="text">

<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>

<p>键盘按下的次数:<span>0</span></p>

</body>

</html>
表单事件

    submit:当提交表单时，会发生 submit 事件。该事件只适用于 <form> 元素。

    blur:当失去焦点时发生 blur 事件

    focus:获得焦点时发生 focus 事件

    change:字段改变时警报文本
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("form").submit(function(){

    alert("提交");

  });

  $("input[name='FirstName']").change(function(){

    alert("文本已被修改");

  });

  $("input[name='LastName']").focus(function(){

    $("span").css("display","inline").fadeOut(2000);

  });

  $("input").blur(function(){

    alert("输入框失去了焦点");

  });

});

</script>

</head>

<body>

<form action="">

First name:

<input type="text" name="FirstName" value="Mickey"><br>

Last name:

<input type="text" name="LastName" value="Mouse"><br>

<input type="submit" value="提交">

<p><span>12</span></p>

</form> 

</body>

</html>
文档/窗口事件

    load:当指定的元素已加载时，会发生 load 事件(适用于任何带有 URL的元素（比如图像、脚本、框架、内联框架）以及 window 对象)

    resize:当调整浏览器窗口大小时，发生 resize 事件

    scroll:当用户滚动指定的元素时，会发生 scroll 事件(所有可滚动的元素和 window 对象（浏览器窗口）)

    unload:当离开页面时，显示提示消息
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

x=0;

y=0;

$(document).ready(function(){

  $("div").scroll(function(){

    $("span").text(x+=1);

  });

  $(window).unload(function(){

      alert('unload');

  });

  $(window).resize(function(){

      $('span').text(y+=1);

  });

  $('image').load(function(){

      alert('load successful');

  });

});

</script>

</head>

<body>

<p>尝试滚动 div 中的滚动条</p>

<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！

<br><br>

菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！</div>

<p>滚动了 <span>0</span> 次。</p>

<p>当你点击 <a href="//www.runoob.com">这个链接</a>, 或者关闭窗口，alert 窗口会弹出。</p>

<image src="//www.runoob.com/wp-content/uploads/2015/11/rock600x400.jpg" alt="图片文字描述" width="304" height="236"/>

</body>

</html>

jQuery(二)事件的更多相关文章

  1. JQuery知识快览之二—事件

    事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...

  2. jQuery学习-事件之绑定事件（二）

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

  3. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

  4. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  5. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  6. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  7. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  8. jQuery的事件change

    人生还在继续,只有不断补充以前所不懂的知识,今天练习一个jQuery的事件change.这个事件是在对象失去focus并且原本值有所变化时就产生此事件.如select时,用户所选择的选项有变时,或是t ...

  9. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

随机推荐

  1. memcached与spring集成

    一.背景 销售CRM(项目A)将负责管理项目信息系统(项目B)的支付与权限 上级要求为避免频繁调用CRM接口,中间放一级缓存,但要做到缓存中保证最新数据 因项目B已使用memcache作缓存,所以决定 ...

  2. Flask入门数据库框架flask-SQLAlchemy(十)

    ​ Web程序开发中最重要的莫过于关系型数据库,即SQL 数据库,另外文档数据库(如 mongodb).键值对数据库(如 redis)慢慢变得流行. 原因 : 我们不直接使用这些数据库引擎提供的 Py ...

  3. Python 列表(list)操作

    创建列表 sample_list = ['a',1,('a','b')] Python 列表操作 sample_list = ['a','b',0,1,3] 得到列表中的某一个值 value_star ...

  4. SVN：验证位置时发生错误解决方案

    1. 2. 3.preferencens > svn >svn接口-选择SVNKit(Pure Java)设置后,再引用svn路径后,直接弹出输入用户名和密码就对了. 4.

  5. Infinity 与 NAN

    System.out.println(5.0/0.0+''-"+0.0/0.0); 正确的输出结果是Infinity-NaN 1.为什么不是java.lang.ArithmeticExcep ...

  6. FFT算法实现——基于GPU的基2快速傅里叶变换

    最近做一个东西,要用到快速傅里叶变换,抱着蛋疼的心态,自己尝试写了一下,遇到一些问题. 首先看一下什么叫做快速傅里叶变换(FFT)(来自Wiki): 快速傅里叶变换(英语:Fast Fourier T ...

  7. CSS基础语法(一) CSS的3种引入

    CSS样式表 CSS可算是网页设计的一个突破,它解决了网页界面排版的难题.可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout). Web ...

  8. Git 还没push 前可以做的事(转)

    Git 版本控制系統(3) 還沒 push 前可以做的事 转载:http://ihower.tw/blog/archives/2622   這一集要講的是:還沒 push 前可以做的壞事,也就是 re ...

  9. 关于c++对文件读写的封装

    namespace { UINT_T GetWriteSizeForNoBuf(UINT_T fsize) { UINT_T write_buf_size = ; == ) { write_buf_s ...

  10. Python爬虫利器之Beautiful Soup，Requests，正则的用法（转）

    https://cuiqingcai.com/1319.html https://cuiqingcai.com/2556.html https://cuiqingcai.com/977.html