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('触发事件：')
}
})
jQuery_事件学习的更多相关文章
- Mysql事件学习
出自:http://blog.chinaunix.net/uid-20639775-id-3323098.html Mysql事件学习 在系统管理或者数据库管理中,经常要周期性的执行某一个命令或者SQ ...
- C#委托与事件学习笔记
委托事件学习笔记 本文是学习委托和事件的笔记,水平有限,如有错漏之处,还望大神不吝赐教. 什么是委托?从字面意思来解释,就是把一个动作交给别人去执行.在实际开发中最常用的就是使一个方法可以当做一个参数 ...
- C# event 事件学习
C# event 事件学习 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-26 章节: 简单事件编写 模拟 WPF 控件传递 ...
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
- JS 点击事件学习总结
废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...
- android touchEvent事件学习
学习网址:http://www.apkbus.com/forum.php?mod=viewthread&tid=44296 1:Android Touch事件传递机制解析 android系统中 ...
- jQuery事件学习
1.JS事件的基本知识 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- jQuery Mobile的学习时间bottonbutton的事件学习
程序猿都非常懒.你懂的! 生命的绝唱来机仅仅争朝夕,如诗的年华更需惜时如金. 不要让今天的懈怠成为一生的痛. 每天都在进步. 近期在学习jquery mobile开发.使用的button,绑定事件,和 ...
- Java的事件自定义事件学习
课程设计要做一个游戏,由于对C++不是很熟悉,老师也准许使用java 或者其他的语言,在.net我学过事件,一种委托回调,但是在java 我不是很了解,应该原理都相同吧! 游戏大致是这样的,现在这在写 ...
随机推荐
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- php中常用的字符串比较函数strcmp()实例解释
int strcmp ( string $str1 , string $str2 ) 以二进制方式进行比较以该函数比较时区分大小写返回值,如果str1小于str2返回<0,如果str1大于str ...
- JavaWeb（四）EL表达式
前言 前面详细的说明了什么是JSP和它的一些元素,这篇给大家介绍一下的是EL表达式. 用EL表达式,能更好的使用JSP中的各种内置对象和作用域. 楼主作为大四狗马上要出去面试了,内心很紧张!!! 一. ...
- 关于修改extmail附件大小限制的位置
一.修改extmail的webmail.cf文件, SYS_MESSAGE_SIZE_LIMIT = 5242880 注意:以位为单位为5M字节. SYS_MESSAGE_SIZE_LIMIT = x ...
- zoj 1526 Big Number 数学
Big Number Time Limit: 10 Seconds Memory Limit: 32768 KB In many applications very large intege ...
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
using System; using System.Collections.Generic; using System.ComponentModel; using System.ComponentM ...
- DevOps教程
唠叨话 关于德语关我屁事与靠计算逼哥数据,知识点的教学教程. 先简要搭建知识点框架:后逐步完善知识点内容.(暂时提供知识点,大部分未完善,持续更新中.) 注:第一版本,结束于2017年10月18日.其 ...
- win10 uwp 读写XML
UWP 对 读写 XML做了一些修改,但和之前 WPF 的方法没有大的区别. 我们先来说下什么是 XML , XML 其实是 树结构,可以表达复杂的结构,所以在定制要求高的.或其他方面如json 做不 ...
- win10 uwp 兴趣线
本文讲的是如何去做一个时间轴样子的东西但我们放的不一定是时间,可能是我们的时间.我把它放在我的CSDN阅读,我的界面做出来很差,但是应该读者能做出很漂亮的. 行间距 我们在ViewModel写一个Ob ...
- 上传代码 CodePlex
博客园作为博客备份,博客会更新一份在博客园 CodePlex是微软开源项目网站,有很多人都在上面传代码,我们也可以上传自己的代码 注册 我们可以用微软账号注册,填写用户名.密码,很快就好. 新建项目 ...