鼠标事件:

    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. Git 几个重要操作指令对比

    1.git merge 和 git rebase https://blog.csdn.net/wh_19910525/article/details/7554489 http://gitbook.li ...

  2. PHP 数字转汉字函数

    /** * 数字转汉字描述 */ function numToStr($num) { // 判断正确数字 if (!preg_match('/^(\d*)(\.\d+)?$/', $num)) ret ...

  3. java面试题之----mysql表优化方案

    本文转载自segmentfault,原文链接:https://segmentfault.com/a/1190000006158186. 当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考 ...

  4. Hadoop ->> 关于数据分割（Data Split）的思考

    今天开始学习Hadoop这门热门的数据库技术.直接从被奉为Hadoop圣经的<Hadoop The Definitive Guide 4th Edition>入手.第一章作者写到一个关于分 ...

  5. UIRecorder安装与使用

    继vue单元测试,将进行vue的e2e测试学习. 学习点: 安装uirecorder 用工具(UI Recorder)录制测试脚本 测试脚本的回放 本文意在安装UI Recorder,并且利用该工具进 ...

  6. Struts2学习-拦截器2

    1.做一个登陆页面(loginView.jsp,才用Action来访问),2.登陆成功后,可以跳转到系统的首页(index.jsp),3.首页有一个链接(testOtherAction访问其它的功能模 ...

  7. 利用Surfingkeys和tampermonkey效率操作网页

    tampermonkey可以实现网页载入后自动进行某些操作,适合有规律的操作,实现完全自动化. 而Surfingkeys可以实现用各种按键实现各种功能,功能全部用JavaScript写,自定义性更强.

  8. 四、获取远程URL图片

    #!/usr/bin/python # -*- coding: UTF-8 -*- import re import urllib def getHtml(url): page = urllib.ur ...

  9. 插上翅膀，让Excel飞起来——xlwings（二）

    在上一篇插上翅膀,让Excel飞起来——xlwings(一)中提到利用xlwings模块,用python操作Excel有如下的优点: xlwings能够非常方便的读写Excel文件中的数据,并且能够进 ...

  10. CryptoSwift：密码学

    Hash (Digest) MD5 | SHA1 | SHA224 | SHA256 | SHA384 | SHA512 | SHA3 Cyclic Redundancy Check (CRC) CR ...