jQuery_事件学习

一、click事件

click事件----鼠标单击事件

$('.bt').click(function() { alert("本身的事件");})

当class为bt的div被但单击时执行函数体的内容部分

 $('.bt').click(function() {$('.bt2').click();})当class为bt的div被但单击时执行class为bt2的div的click（）事件

栗子：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>.bt{background:#F00;}.bt2{background:#f0f;display:none;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><div class="bt">click（）鼠标单击事件</div><div class="bt2">间接响应</div><script type="text/javascript">$('.bt').click(function() {alert("本身的事件");$('.bt2').click();})$('.bt2').click(function() {alert("调用其他对象绑定的事件");})
</script></body></html>

二、mousemove（）和mousemout（）

鼠标移入（当鼠标移入到该元素的内部时触发）和移出事件（当鼠标移出元素的内部时触发）

栗子：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style></style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<style>.test{height:100px;width:100px;background:#F00;}</style>
<body><h2>.mousemove()方法</h2><div class="test"></div><script type="text/javascript"> //鼠标移入事件$(".test").mousemove(function(){$(".test").css({"background":"blue","width":"100px","height":"100px"});});//鼠标移出事件$(".test").mouseout(function(){$(".test").css({"background":"yellow","width":"50px","height":"50px"});});</script>
</body></html>

三、hover事件

hover()方法是同时绑定 mouseenter和 mouseleave事件。

使用：hover(function(){

　　鼠标移入元素时触发的内容

　　},function(){

　　鼠标移出元素时触发的内容

})

栗子：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>.test{width:100px;height:100px;background:#000;color:#FFF;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><div class="test">hover()事件</div><script type="text/javascript">$(".test").hover(function(){$(".test").css("background","red");},function(){$(".test").css("background","blue");});</script>
</body></html>

四、focusin（）聚焦事件和focusout（）失焦事件

聚焦事件--当该元素获得聚焦时触发

失焦事件---当该元素失去焦点时触发

栗子：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body><p>聚焦事件：<input class="in"/></p><p>失焦事件：<input class="ot"/></p><script type="text/javascript">//input聚焦元素增加一个边框$(".in").focusin(function() {$(this).css('border','2px solid red');});$(".ot").focusout(function(){alert("真的要放弃填写吗?");});</script>
</body></html>

五、change事件

change事件--当元素的内容发生变化时触发：

栗子：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><h2>input、textarea与select</h2><p>请输入输入姓名：<input class="name" type="text" value="请输入姓名" /></p><p>选择性别<select class="sex"><option value="男" selected="selected">男</option><option value="女">女</option></select></p><p>个人简介： </p><textarea class="jianjie" rows="3" cols="20">简介</textarea><div id="info"></div><script type="text/javascript">//监听input值的改变$('.name').change(function(e) {$("#info").text("您的姓名是："+e.target.value)});$(".name").focusin(function(){$(".name").select();});//监听select：$(".sex").change(function(e) {$("#info").text("您的性别是："+e.target.value)})//监听textarea：$(".jianjie").change(function(e) {$("#info").text("个人简介："+e.target.value) })</script>
</body></html>

六、submit事件

表单提交事件：

栗子：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><form id="f1" action="aa.html"><input type="text" value="input" /><input type="submit" value="提交" /></form><form id="f2" action="bb.html"><input type="text" value="input2" /><input type="submit" value="提交" /></form><script type="text/javascript">//提交表单并跳转$('#f1').submit(function(e) {alert('submit事件被触发，页面跳转')});//提交表单阻止页面跳转$('#f2').submit(function() {alert('submit事件被触发，通过return false阻止页面跳转')return false;});</script>
</body></html>

keydown()是在键盘按下就会触发
keyup()是在键盘松手就会触发

on()的多事件绑定

$("#elem").on('click',function(){}) //on方式 $("#elem").on({        mousedown: function(e) {            $(this).text('触发事件：')        },        mouseup: function(e) {            $(this).text('触发事件：')        }    })

转载于:https://www.cnblogs.com/soulsjie/p/7811087.html

jQuery_事件学习相关推荐

IOS中触摸事件学习
IOS中触摸事件学习 1. 事件的声明周期 2. 系统相应阶段 3. APP响应阶段 4. 触摸.事件.响应者 4.1 UITouch(触摸) 4.2 UIEvent(事件真身) 4.3 UIResp ...
jQuery Mobile的学习时间bottonbutton的事件学习
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/27700521 程序猿都非常懒,你懂的! ...
从Facebook的React框架事件学习一下开源协议
前言前一阵子由于Facebook BSD+PATENTS License的原因,Apache项目禁止使用带该license的代码,引人注目的就是Facebook的React前端框架. 后来在知乎上看 ...
C#委托与事件学习笔记
今天跟随视频学习了一下C#中最重要的一些概念之委托与事件.老杨的视频讲的还是挺深入浅出,不过刚接触C#.NET的人还是朦朦胧胧,就像张子阳先生说的"每次见到委托和事件就觉得心里别(biè)得 ...
js 事件学习与总结
一．(1)事件源(事件目标):在哪个组件上发生的事件,也就是发生事件的作用体或与之相关的对象.任何元素,body,html元素等等,都可以作为事件源. (2)事件:事件就是用户或浏览器自身执行的某种动 ...
ESP32 (UART EVENT)-串口事件学习(1)
提示:本博客作为学习笔记,有错误的地方希望指正文章目录一.ESP32串口介绍二.硬件设计三.实现代码四.串口实验演示结果五.ESP32串口函数API 5.1.uart_types.h文件中 ...
程序员委托事件学习随笔
委托的声明 public delegate void MyDelegate(string str); 委托是一种特殊的类型(class),用途是来实现对一种方法的封装.在某种事件发生时,自动调用该方法 ...
Yii2 事件学习笔记
Yii2中事件一般用event表示,只有集成了yii\base\component的对象才能集成类或者对象级别的事件处理过程. 事件的理解和使用要点主要有以下几个要点: 1.事件如何触发? 2.事件处 ...
C#委托、事件学习之（三）——热水器烧水案例
using System;namespace DelegateExample {public class Heater{private int temperature;public string ty ...