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 事件的基 ...
随机推荐
- scale 和 zoom，以及zoom的一些变态用法
zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别: 1.scale的缩小是以图片的中心,zoom的缩小是以图片的左上角. 2.zoom的缩放改变了元素占据的空间大小:而scale ...
- 《ArcGIS Runtime SDK for Android开发笔记》——问题集：Error:Error: File path too long on Windows, keep below 240 characters
1.前言 在使用Android Studio开发环境时,经常会爆出以下错误,虽然具体细节内容各有不同,但是说明的都是同一个问题,在windows中使用过长的路径,超过240字符. Error:Erro ...
- IOS Google语音识别更新啦！！！
旧版本的API: —Google提供了一个在线语音识别的API接口,通过该API可以进行中文.英文等语言的识别. API地址:http://www.google.com/speech-api ...
- Oracle VM virtualBox -Centos6.4 安装后没有网解决方法
1.先修改Oracle VM virtualBox 的网络配置 2.然后启动centos输入: dhclient eth0 3.然后如果没报错的话 输入: ifconfig 就可以查看到ip地址 ...
- phpunit 单元测试之代码覆盖率
最近团队在不断完善项目中的单元测试用例,会用到代码覆盖率分析,本来以为 homestead 应该默认安装了 xdebug ,所以使用 phpunit --coverage-html ./tests/c ...
- 【Leetcode】【Easy】Pascal's Triangle
Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...
- March 13 2017 Week 11 Monday
A warm smile is the universal language of kindness. 温暖的笑容是善意的通用语. Face comes from the heart. Just sm ...
- Android（java）学习笔记41：Map集合功能概述
1. 下面通过代码引入Map集合: 如下 package cn.itcast_01; import java.util.HashMap; import java.util.Map; /* * 作为学生 ...
- 【转】Dalvik虚拟机的启动过程分析
在Android系统中,应用程序进程都是由Zygote进程孵化出来的,而Zygote进程是由Init进程启动的.Zygote进程在启动时会创建一个Dalvik虚拟机实例,每当它孵化一个新的应用程序进程 ...
- 使用paramiko的问题记录
用paramiko时遇到问题,异常如下: 解决方法记录如下: 更新gmp版本: wget https://ftp.gnu.org/gnu/gmp/gmp-6.0.0a.tar.bz2 tar -xvj ...