jQuery(二)事件

鼠标事件:

    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(二)事件的更多相关文章

JQuery知识快览之二—事件
事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...
jQuery学习-事件之绑定事件（二）
在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { ...
HTML 事件(二) 事件的注册与注销
本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置前面的话鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
从零开始学习jQuery (五) 事件与事件对象
本系列文章导航从零开始学习jQuery (五) 事件与事件对象一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
从零开始学习jQuery (二) 万能的选择器
本系列文章导航从零开始学习jQuery (二) 万能的选择器一.摘要本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
jQuery的事件change
人生还在继续,只有不断补充以前所不懂的知识,今天练习一个jQuery的事件change.这个事件是在对象失去focus并且原本值有所变化时就产生此事件.如select时,用户所选择的选项有变时,或是t ...
[转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

随机推荐

03_Jsoup
[1.获取一个页面所有的链接] public static void main(String[] args) throws IOException { String url="http:// ...
SharePoint - CAML
1. CAML是顺序操作,如果要实现类似 “A or B or C or D” 的结果,最好写成 “(((A or B) or C) or D)”的形式,但写成 “((A or B) or (C or ...
iPython与notebook的基本用法
1 Ipython 安装 pip install ipython 2 Notebooke 基本用法启动ipython使用ipython 启动notebook 使用 ipython notebook ...
触摸事件MotionEvent
触摸事件MotionEvent在用户交互中,占着非常重要的地位.首先,来看看MotionEvent中封装的一些常用的事件常量,它定义了触摸事件的不同类型. 1.单点触摸按下动作 public stat ...
【起航计划ObjC 002】印第安老斑鸠ObjC的幻想 ---- Ubuntu下安装并使用MAC虚拟机
本文介绍如何在Ubuntu下安装Mac OS X Mavericks系统.具体如下: 1)安装前准备工作下载Mac OS X Mavericks系统,地址:http://pan.baidu.com/ ...
spark1.统计句子中特定内容
val logFile = "./README.md" // Should be some file on your server. val conf = new SparkCon ...
haproxy学习——简介、基本配置（二）
官网:http://www.haproxy.org/ 个人感觉haproxy学习的重点在于配置上,把配置文档搞懂了就明白大部分套路了.不过本篇内容属于入门学习:1.使用haproxy简单的实现负载均衡 ...
转：C函数调用理解
1 空函数 int main() { 00411360 push ebp ;压入ebp 00411361 mov ebp,esp ;ebp = esp,保留esp,待函数调用完再恢复,因为函数调用中肯 ...
使用文档碎片（DocumentFragments）追加DOM元素
标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段 ...
Tomcat与MySQL的数据源连接方法
Tomcat配置数据源,由于项目经常访问数据库,需要不断地打开关闭,这就耗费了大量的资源.所以用数据源的方式访问数据库. 大体步骤: 配置server.xml 配置项目所在的WebRoot/WEB-I ...

jQuery(二)事件

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

随机推荐

热门专题