鼠标事件:

    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. SQLServer存储过程 实例，很多语法可以以后参考

    SQL代码 alter PROCEDURE sp_addnewdtgtype ( ), @dtgdllcontent image, ) ) AS BEGIN ); declare @v_count i ...

  2. 【SQL Server 2012】按倒序存储“分组统计”结果的临时表到新建表

    程序预先说明: 本文访问的数据库是基于存有RDF三元组的开源数据库Localyago修改的库,其中只有一个表,表中有五个属性:主语subject.谓语predict.宾语object.主语的编号sub ...

  3. raw_input与input的区别

    1. 版本差异 raw_input——>python2版本 input——>python3版本 2. 输入格式差异 就是raw_input()随便输都是字符串,而input()必须按照Py ...

  4. ZT 困难是什么？困

    困难是什么?困难就是摆在我们面前的山峰,需要我们去翻越;困难就是摆阻碍我们前行的巨浪,需要我们扬帆劈刀斩浪航行:困难就是我们眼前所下的暴风雨,要坚信暴风雨过后会有阳光和彩虹. 其实困难并不可怕,怕的就 ...

  5. 关于selenium无法定位动态元素的解决方法

    今天在写一个关于登录的自动化脚本时,在对元素定位时总会报下面的错:

  6. cftool拟合&函数逼近

    cftool拟合&函数逼近 cftool 真是神奇,之前我们搞的一些线性拟合解方程,多项式拟合,函数拟合求参数啊,等等. 已经超级多了,为啥还得搞一个cftool拟合啊?而且毫无数学理论. 如 ...

  7. POJ 3088 斯特林

    题意:有一个n个按钮的锁,按下一些按钮打开门,有多少开门方式,其中,一些按钮可以选,可以不选,选中的按钮 可以分成一些集合,集合之间无序,是同时按下的. 分析: 1.首先选择 i 个按钮,组合数 2. ...

  8. 【转】 ios的手势操作之UIGestureRecognizer浅析

    一.概述 iPhone中处理触摸屏的操作,在3.2之前是主要使用的是由UIResponder而来的如下4种方式: - (void)touchesBegan:(NSSet *)touches withE ...

  9. POJ 1984 Navigation Nightmare 【经典带权并查集】

    任意门:http://poj.org/problem?id=1984 Navigation Nightmare Time Limit: 2000MS   Memory Limit: 30000K To ...

  10. 2018.11.15 Nginx服务器的使用

    Nginx简单教程 1.什么是Nginx? Nginx(engine x)是一款轻量级的Web服务器.反向代理服务器及电子邮件(IMAP/POP3)代理服务器 什么是反向代理服务器? 反向代理方式是指 ...