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 事件的基 ...
随机推荐
- Web服务器父与子 Apache和Tomcat
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.在Apache基金会里面Apache S ...
- java中加密的方式概述
加密是用一种特殊的算法改变原有的数据,使未经授权的用户即使获得了已经加密的信息,但不知其解密的方法,仍然无法了解信息的内容. 大体上分为单向加密和双向加密,双向加密又可分为对称加密和非对称加密 ...
- Windows快捷操作技巧
隐藏技能 在当前路径打开命令行 shift + 右键点击文件夹内的空白处,你会看到右键弹出菜单多了个选项 "在此处打开命令窗口",省去了打开命令行再cd到当前路径的麻烦. 快捷键 ...
- 获取v$latch数据源实验
实验环境:Oracle Rac 11.2.0.3 首先获取v$latch的定义:通过PL/SQL或者get ddl等常规途径只能获取到v_$latch相关的视图信息.需要通过特殊方法获取v$latch ...
- NO.006-2018.02.11《卜算子·我住长江头》宋代：李之仪
卜算子·我住长江头_古诗文网(bǔ) 卜算子·我住长江头 宋代:李之仪 我住长江头,君住长江尾.日日思君不见君,共饮长江水. 我居住在长江上游,你居住在长江下游. 天天想念你却见不到你,共同喝着长江的 ...
- Android（java）学习笔记29：泛型类的概述和使用
1. 泛型类的概述和使用 泛型类用法一: 下面我们首先定义泛型类: package cn.itcast_04; /* * 泛型类:把泛型定义在类上 */ public class ObjectTool ...
- 【Unity3D】【NGUI】UIRect的Anchor的使用
NGUI版本号:3.6.5 以以下的图,解释下主要的Anchors的使用(能够通过官方的Anchor和Chat样例进行深入学习) Target不是一定要是Sprite.能够是随意的UIRect(UIS ...
- LA 2038 最少点覆盖
题目链接:https://vjudge.net/problem/UVALive-2038 题意:我看了原题,lrj的书上题意写错了,应该是最少点覆盖,当然可以用最大匹配去做,由于是树形的: 可以树形D ...
- Reverse Polish notation
Reverse Polish notation is a notation where every operator follows all of its operands. For example, ...
- Hashtable详细介绍(源码解析)和使用示例
第1部分 Hashtable介绍 Hashtable 简介 和HashMap一样,Hashtable 也是一个散列表,它存储的内容是键值对(key-value)映射. Hashtable 继承于Dic ...