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 ...
随机推荐
- Servlet和JSP规范及版本对应关系
JSR 53: JavaTM Servlet 2.3 and JavaServer PagesTM 1.2 JSR 154: JavaTM Servlet 2.4 JSR 154: JavaTM Se ...
- Spring Cloud体系介绍
上图只是Spring Cloud体系的一部分,Spring Cloud共集成了19个子项目,里面都包含一个或者多个第三方的组件或者框架! Spring Cloud 工具框架 1.Spring Clou ...
- javax.Servlet的包中，属于类的是。(选择1项)
javax.Servlet的包中,属于类的是.(选择1项) A.Servlet B.GenericServlet C.ServletRequest D.ServletContext 解答:B Serv ...
- 【BZOJ】2555: SubString（后缀自动机）
http://www.lydsy.com/JudgeOnline/problem.php?id=2555 学到了如何快速维护right值orz (不过这仍然是暴力维护,可以卡到O(n) 首先我们在加一 ...
- iOS开发 - CALayer图层
CALayer的基本使用 在iOS中.你能看得见摸得着的东西基本上都是UIView.比方一个button.一个文本标签.一个文本输入框.一个图标等等.这些都是UIView 事实上UIView之所以能显 ...
- mysql的优化基础知识
1.查看各种SQL执行的频率 mysql> show status like 'Com_select';--Com_insert,Com_delete,connections(试图连接mysql ...
- ThinkPHP项目笔记之RBAC(权限)补充篇
这里,主要补充的是配置以及相关代码问题. <?php return array( //'配置项'=>'配置值' 'RBAC_SUPERADMIN' => 'admin',//超级管理 ...
- go * 和 &的区别
类型 *T 是指向 T 类型值的指针.其零值为 nil . var p *int & 操作符会生成一个指向其操作数的指针. i := 42 p = &i * 操作符表示指针指向的底层值 ...
- MathType中怎么设置字体默认颜色
MathType功能非常强大,在编辑公式时使用非常方便.利用MathType破解版不仅可以改变公式的字体和字号,也可以改变公式字体颜色.有时在编辑完成后需要对MathType公式格式全部进行修改,这时 ...
- K-mean聚类算法汇聚有用信息——学习笔记
无监督-无标签 聚类,难点在于评估和调参. k-means最简单实用 基本概念 K值:数据聚成多少类. 质心:各个维度算平均数.Centroid 相似度量:距离来算(欧式距离——直线距离,余弦距离) ...