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)的更多相关文章

  1. on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

    on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数.大理石平台精度等级 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素 ...

  2. python 之 前端开发( jQuery事件、动画效果、.each()、 .data())

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  3. 【Python全栈-JavaScript】jQuery事件

    jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...

  4. jQuery事件操作

    bind绑定事件 bind(type,data,fn) [参数描述] type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的 ...

  5. javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  6. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  7. 解密jQuery事件核心 - 绑定设计(一)

    说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...

  8. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  9. 关于jQuery事件绑定

    转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn( ...

随机推荐

  1. Java之旅_面向对象_抽象类

    参考并摘自:http://www.runoob.com/java/java-abstraction.html Java抽象类: 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有 ...

  2. MovieLens电影数据分析

    下载数据包 链接:https://grouplens.org/datasets/movielens/1m/ 解压: 四个文件分别是数据介绍,电影数据表,电影评分表,用户表 进行电影数据分析 进入ipy ...

  3. kvo观察实例变量

    // 手动设定KVO - (void)setAge:(NSString *)age { [self willChangeValueForKey:@"age"]; _age = ag ...

  4. 【JMeter】【微信好文收藏】Jmeter接口测试实战-有趣的cookie

    场景: 接口测试时常都需要登录,请求方式(post), 登录常用的方法有通过获取token, 获取session, 获取cookie, 等等. 这几种都有一个共同的特点, 有效期(expires). ...

  5. discuz config_global.php文件设置说明

    <?php $_config = array(); // ---------------------------- CONFIG DB ----------------------------- ...

  6. dedecms标签(tags)页面伪静态设置

    我们在创建文章的时候经常会设置一些tags,如果发表文章时关键词没添加的话tags也会自动成为文章的关键词,tags是一个不错的功能,通过关键词链接可以快速寻找到相关内容,但是标签页面的url经常会带 ...

  7. 004-linux命令-搜索命令find、locate、whereis、which、type

    一.概述 使用linux系统难免会忘记文件所在的位置,可以使用以下命令对系统中的文件进行搜索. 1.1.find 语法:find <指定目录> <指定条件> <指定动作& ...

  8. 实例讲解TP5中关联模型

    https://blog.csdn.net/github_37512301/article/details/75675054 一.关联模型在关系型数据库中,表之间有一对一.一对多.多对多的关系.在 T ...

  9. Python开发【项目】:选课系统-改良版

    程序名称: 选课系统 角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. ...

  10. js动态规划---背包问题

    //每种物品仅有一件,可以选择放或不放 //即f[i][w]表示前i件物品恰放入一个容量为w的背包可以获得的最大价值. //则其状态转移方程便是:f[i][w]=max{f[i-1][w],f[i-1 ...