jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能、定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下：
此方法可以在匹配元素上绑定一个或者多个事件处理函数。
使用off()方法可以删除on()方法绑定的事件。
语法结构一:
$(selector).on(events,[selector],[data],fn)
参数列表:
| 参数 | 描述 |
| events | 一个或多个用空格分隔的事件类型和可选的命名空间。 |
| selector | 可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略，当它到达选定的元素，事件总是触发。 |
| data | 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。 |
| fn | 该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回false。 |
实例代码:
实例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
width:60px;
height:60px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").on("click",function(){
$(this).text("脚本之家欢迎您");
})
})
</script>
</head>
<body>
<div>原来内容</div>
</body>
</html>
以上代码为div绑定一个click事件，点击div时候能够为div设置新的文本内容。
实例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
width:60px;
height:60px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").on("click mousemove",function(){
$(this).text("脚本之家欢迎您");
})
})
</script>
</head>
<body>
<div>原来内容</div>
</body>
</html>
以上代码为div绑定了两个事件，无论是点击div还是在div中移动鼠标都会为div设置新的文本内容。
实例三:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
width:60px;
height:60px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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>
以上代码利用data参数为绑定的事件处理函数传递数据。
实例四:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.parent{
width:160px;
height:160px;
border:1px solid green;
font-size:12px;
}
.children{
width:100px;
height:100px;
border:1px solid red;
}
span{background-color:green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newtext="这是新文本"
$(".parent").on("click",".children",{"mytext":newtext},function(e){
$(this).text(e.data.mytext);
})
})
</script>
</head>
<body>
<div class="parent">
<div class="children"><span>原来内容</span></div>
</div>
<span>大家好</span>
</body>
</html>
以上代码通过通过选择器字符串来过滤匹配元素的子元素中哪些可以响应绑定的事件。上面的代码中，类名为children的元素和它的子元素可以调用绑定的事件。
语法结构二:
$(selector).on(object,[selector],[data])
参数列表:
| 参数 | 描述 |
| object | 一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。 |
| selector | 可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略，当它到达选定的元素，事件总是触发。 |
| data | 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。 |
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
width:160px;
height:160px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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>
以上代码中，事件类型和事件处理函数以对象的形式绑定的。
希望本文所述对大家的jQuery程序设计有所帮助。
Bootstrap的Modal.js里的'click.bs.modal.data-api'在哪里触发？
最近在看Boostrap的Modal.js的源码，不只是Modal，其他的组件，比如button都用到了DATA-API，不是很清楚他的data api是怎么触发的，能否告知一下。
// MODAL DATA-API
// ==============
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
// some code
}) // BUTTON DATA-API
// =============== $(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
// some code
})
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
// some code
})
这是一个Jquery的概念，只要出发了click事件，就会触发click.xxx,而在取消绑定的时候，off(click.xxx)不会影响到其他事件参考jquery文档：
Event names and namespaces（事件名称和命名空间） 任何事件的名称，可以作为events
参数。jQuery将通过所有浏览器的标准JavaScript事件类型，当用户操作事件，如click，浏览器会调用handler参数的函数。此外，.trigger()方法可以触发标准的浏览器事件
和 自定义事件名绑定的处理程序。 事件名称可以添加指定的event namespaces（命名空间）
来简化删除或触发事件。例如，"click.myPlugin.simple"为 click 事件同时定义了两个命名空间 myPlugin 和
simple。通过上述方法绑定的 click 事件处理，可以用.off("click.myPlugin") 或
.off("click.simple")删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）”
事件。命名空间类似CSS类，因为它们是不分层次的;只需要有一个名字相匹配即可。以下划线开头的名字空间是供 jQuery 使用的。
jQuery中on()方法用法实例的更多相关文章
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- jQuery中attr()方法用法实例
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中index()方法用法实例
本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值 ...
- jQuery中data()方法用法实例
语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...
- 解析jQuery中extend方法--用法《一》
extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...
- 解析jQuery中extend方法--源码解析以及递归的过程《二》
源码解析 在解析代码之前,首先要了解extend函数要解决什么问题,以及传入不同的参数,会达到怎样的效果.extend函数内部处理传入的不同参数,返回处理后的对象. extend函数用来扩展对象,增加 ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
随机推荐
- Linux开机启动文件rc.local无法执行怎么办？
rc.local是Linux系统中的一个重要的开机启动文件,每次开机都要执行这个文件.但是有一些用户的Linux系统无法执行这个文件,并导致了一系列的问题.遇到这个问题我们应该怎么办呢? 在Linux ...
- Android基础总结（二）布局，存储
常见布局 相对布局 RelativeLayout 组件默认左对齐.顶部对齐 设置组件在指定组件的右边 android:layout_toRightOf="@id/tv1" 设置在指 ...
- [HTML5] 手机摇一摇实现
目录结构 引入jQuery:jquery-1.11.1.min.js html代码 <!DOCTYPE html> <html lang="en"> < ...
- Differential Geometry之第六章平面曲线的整体性质
第六章.平面曲线的整体性质 1.平面的闭曲线 1.1.切线的旋转指数定理 1.2.等周不等式与圆的几何特性 ,其中 2.平面的凸曲线 支撑函数: 2.1.Minkowski问题 2.2.四顶点定理
- 从上面的集合框架图可以看到，Java 集合框架主要包括两种类型的容器，一种是集合（Collection），存储一个元素集合，另一种是图（Map），存储键/值对映射
从上面的集合框架图可以看到,Java 集合框架主要包括两种类型的容器,一种是集合(Collection),存储一个元素集合,另一种是图(Map),存储键/值对映射.Collection 接口又有 3 ...
- WPF 在TextBox失去焦点时检测数据，出错重新获得焦点解决办法
WPF 在TextBox失去焦点时检测数据,出错重新获得焦点解决办法 在WPF的TextBox的LostFocus事件中直接使用Focus()方法会出现死循环的问题 正确的使用方式有2中方法: 方法一 ...
- ArcGIS -- ArcSDE Lock request conflicts with an established lock
1.查询下列表是否有数据 select * from sde.state_locks; select * from sde.object_locks; select * from sde.layer_ ...
- mysql5.5的安装配置
1.wget http://120.52.72.23/cdn.mysql.com/c3pr90ntc0td//Downloads/MySQL-5.5/mysql-5.5.50-linux2.6-x86 ...
- jsp导出到Excel
jsp模板文件 <%@ page isELIgnored="false" contentType="application/x-msdownload; charse ...
- JS-实时修改在textarea里面的span(实际输入的文字)
解决办法: 在开发中,多少会遇到一些界面,输入限制字数. 例如: //页面加载完毕 $(function() { //descrip是textarea的id $("#descrip" ...