鼠标事件:

    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. js添加、修改、删除xml节点例子

    version="1.0" encoding="gb2312"?> . <bookstore> . <book genre=" ...

  2. Java将科学计数法数据转为字符串

    如果Excel单元格数据类型为数值,数字太长会变成科学计数法,Java读取的时候使用如下方法可将其转为字符串 BigDecimal bd = new BigDecimal("3.000085 ...

  3. solidity语言6

    映射 可以认为是哈希,格式 mapping(_KeyType => _ValueType) pragma solidity ^0.4.0; contract MappingExample { m ...

  4. JavaScript递归深度问题

    递归是有限的东西: function fact(num) { if (num <= 1) { return 1; } else { return fact(num - 1); } } 测试结果是 ...

  5. java带jar包的命令行运行

    运行有些java类需要第三方的jar包(lib),在用命令行运行时本人总结如下几个方法: 方法一.编译  javac -cp D:\lab\googleapi.jar Lab.java设置classp ...

  6. Java应用程序

    示例: public class HelloWorld { public static void main(String[] args) { System.out.println("Hell ...

  7. LeetCode Two Sum 解题思路(python)

    问题描述 给定一个整数数组, 返回两个数字的索引, 使两个数字相加为到特定值. 您可以假设每个输入都有一个解决方案, 并且您不能使用相同的元素两次. 方法 1: 蛮力 蛮力方法很简单.循环遍历每个元素 ...

  8. Jmeter入门11 使用Simple Controller组织接口测试用例

    接口测试实践中,可以使用Simple Controller来组织测试用例. 官网上说该控制器的主要用途用来组织采样器和其他的逻辑控制器等. 以下为一个接口测试项目结构示例: 1 测试计划 >添加 ...

  9. 成都夏季招聘会IT行业缺口大！

    上个周末成都的夏季招聘会在新会展中心举行,我们传智播客的专业市场调查员也深入当中.了解IT行业招聘情况,我们发如今IT软件行业专区招聘的公司特别多,可是去应聘的人却非常少.这意味着IT行业正处于供不应 ...

  10. Python语言程序设计基础（1）—— 程序设计基本方法

    Everybody in this country should learn how to program a computer,because it teaches you how to think ...