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 事件的基 ...
随机推荐
- 我是一只IT小小鸟读书笔记3
Part6: 一. 无论在什么时候,师兄师姐都是我们最好的资源,遇到不会的问题一定要及时向他们请教,善于利用身边的人脉关系也是一个基本的技能. 二. 爱好很多,但特长一定要有.仔细思考一下 ...
- HQL（Hibernate Query Language）
1. NativeSQL > HQL > EJB QL(JP QL 1.0) > QBC(Query By Criteria) > QBE(Query By Example)2 ...
- Flask入门request session cookie(二)
1 HTTP方法分类 1 GET 浏览器告知服务器:只获取页面上的信息并发给我.这是最常用的方法. 2 HEAD 浏览器告诉服务器:欲获取信息,但是只关心消息头 .应用应像处理 GET 请求一样来处理 ...
- day010-缓冲流、转换流、序列化流
1. 缓冲流 又称为高效流.高效流高效的原理:使用缓冲区(数组)临时存储多个数据,减少底层资源的调用次数.从而提高读写速度. 1.1 缓冲流分类 字节缓冲流: BufferedOutputSt ...
- Laravel 生成小程序图文海报最佳方案之一
目前已经更新 2.0 版本,支持生成的海报关联Model,支持是否重新生成海报等功能,具体更新请移步 github: laravel-miniprogram-poster 微信小程序官方并未提供分享到 ...
- Browser进程和浏览器内核（Renderer进程）的通信过程
看到这里,首先,应该对浏览器内的进程和线程都有一定理解了,那么接下来,再谈谈浏览器的Browser进程(控制进程)是如何和内核通信的, 这点也理解后,就可以将这部分的知识串联起来,从头到尾有一个完整的 ...
- 用python管理Cisco路由器
目前DevOps是整个运维发展的方向,Network的运维也一样.使用程序控制底层的路由器是最基本的要求之一. 本文简单解释如何用Python控制路由器,对网络设备进行配置. Python和网络设备连 ...
- [转]简单优化：Zipalign
转自:http://www.cnblogs.com/xirihanlin/archive/2010/04/12/1710164.html Android SDK中包含一个“zipalign”的工具,它 ...
- 2018.10.31 Mac下的Mysql修改字符编码修改的问题总结
今天在弄数据库的时候发现存入中文汉字变成了问号,Mac跟windows处理方式不一样. show variables like '%char%'; 查看当前mysql的编码格式 也就是默认编码格式 + ...
- 一组div跟随鼠标移动，反应鼠标轨迹
<!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...