jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)
change([[data],fn])
概述
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生
参数
fn 在每一个匹配元素的change事件中绑定的处理函数
[data],fn data:change([Data], fn) 可传入data供函数fn处理;fn:在每一个匹配元素的change事件中绑定的处理函数
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").change(function() {
var reg = /^[a-zA-Z]+$/;
var textValue = $(this).val();
if(!reg.test(textValue)) {
$("#error").html("<h5 style='color:red'>只能输入字母!<h5>");
}
}); $("#select").change(function() {
$("#error").html($("#select option:selected").text());
});
})
</script>
</head> <body>
<div>
<span>字母:</span> <input id="input" type="text" style="width: 150px;" />
<br />
<span>语言:</span>
<select id="select" style="width: 150px;">
<option>Java</option>
<option>C#</option>
</select>
</div>
<div id="error"></div>
</body> </html>
on(events,[selector],[data],fn)
概述
在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素
参数
events,[selector],[data],fn
- events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin";
- selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发;
- data:当一个事件被触发时要传递event.data给事件处理函数;
- fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false
<!DOCTYPE html>
<html> <head>
<meta charset=" utf-8">
<title></title>
<style type="text/css">
div {
width: 60px;
height: 60px;
border: 1px solid green;
font-size: 12px;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var newtext = "这是新文本"
$("div").on("click", {
"mytext": newtext
}, function(e) {
$(this).text(e.data.mytext);
})
})
</script>
</head> <body>
<div>原来内容</div>
</body> </html>
events-map,[selector],[data]
- events-map:个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示事件绑定的处理函数;
- selector:一个选择器字符串过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发;
- data:当一个事件被触发时要传递event.data给事件处理函数
<!DOCTYPE html>
<html> <head>
<meta charset=" utf-8">
<title></title>
<style type="text/css">
div {
width: 160px;
height: 160px;
border: 1px solid green;
font-size: 12px;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var newtext = "这是新文本"
$("div").on({
click: function(e) {
$(this).text(e.data.mytext);
}
}, {
"mytext": newtext
})
})
</script>
</head> <body>
<div>原来内容</div>
</body> </html>
hover([over,]out)
概述
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数
参数
over,out over:鼠标移到元素上要触发的函数;out:鼠标移出元素要触发的函数
out 当鼠标移到元素上或移出元素时触发执行的事件函数
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button").hover(function() {
$("div").css("background", "red");
}, function() {
$("div").css("background", "green");
})
})
</script>
</head> <body>
<div style="background-color: red;width: 120px;height: 120px;">
<button id='button'>点我测试</button>
</div>
</body> </html>
jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)的更多相关文章
- on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数.大理石平台精度等级 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素 ...
- python 之 前端开发( jQuery事件、动画效果、.each()、 .data())
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- 【Python全栈-JavaScript】jQuery事件
jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...
- jQuery事件操作
bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...
- javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
- 解密jQuery事件核心 - 绑定设计(一)
说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- 关于jQuery事件绑定
转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn( ...
随机推荐
- win10 下JDK10的下载安装与环境变量配置
一.下载 首先,要在win10 操作系统上安装jdk,就要去oracle官网下载合适的jdk版本,在这里以jdk10进行安装 下载链接:http://www.oracle.com/technetwor ...
- java装配bean
java装配bean,可以自动装配,也可以显式装配: 1.通过组件扫描自动装配bean 因为使用了Configuration注解,表明这个类是一个配置类,该类应该包含在spring应用上下文如何创建b ...
- Scala常用变量生命周期
val words = *** //在words被定义时取值 lazy val words = *** //在words被首次使用时取值 def words = *** //在每一次words被使用时 ...
- SQL 的约束
说明:文章所有内容均截选自用户"实验楼包工头"发布在实验楼上的教程[MySQL 基础课程],想要详细的学习SQL,点击教程即可免费学习了:未经允许,禁止转载: 约束是一种限制,它通 ...
- mac-禅道环境
开机不能访问,换成IP地址就好了
- pandas.query()
1. 查询 已知data: 查询概率等于0.4的所有行 问题所在:query后面只支持string形式的值,而"probability"==0.4返回的是一个bool类型,结果不是 ...
- H5页面分享微信自定义分享title和img
前端开发H5 需分享到朋友圈和发给好友,想自定义分享的title和图表还有简短一句话,还需调用微信的api 首先需获取到微信的appId,timestamp,nonceStr,signature 微信 ...
- Redis:C#使用Redis(1)
一.安装 1.下载安装包: 官方网站:redis.io 官方推荐windows版本:https://github.com/MSOpenTech/redis 2:下载压缩包,解压后如下 redis-se ...
- 关于原始input的一些事情
1.关于input type为number时 maxlength失效 <input class="myfrom-input" type="text" id ...
- Cocos Creator scrollview添加事件的两种方法
scrollview添加事件 方法一这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,通过代码添加, 你需要首先构造一个 cc.Component.EventHandler 对象,然后设置好对 ...