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 ...
随机推荐
- 解决centos7 开机/etc/rc.local 不执行的问题
最近发现centos7 的/etc/rc.local不会开机执行,于是认真看了下/etc/rc.local文件内容的就发现了问题的原因了 ? 1 2 3 4 5 6 7 8 9 10 11 #!/bi ...
- CentOS 7使用systemctl如何补全服务名称
CentOS 7使用systemctl如何补全服务名称 因为CentOS7的默认安装类型是最小安装,所以默认没有自动补全的功能.要启用这个功能,你需要安装一个bash-completion包,然后退出 ...
- 数论 + 容斥 - HDU 4059 The Boss on Mars
The Boss on Mars Problem's Link Mean: 给定一个整数n,求1~n中所有与n互质的数的四次方的和.(1<=n<=1e8) analyse: 看似简单,倘若 ...
- cssText方式写入css
<div class="a" id="a">hello world</div> <script> //通过JS来覆写对象的样 ...
- Latex之希腊字母表 花体字母 实数集
花体字母 \mathcal{x} 实数集字母 \mathbb{R} 转自:http://blog.csdn.net/lanchunhui/article/details/49819445 拉丁字母是2 ...
- 异常之*** buffer overflow detected ***
*** buffer overflow detected *** 是sprintf()超出buff大小
- 【BZOJ】1611: [Usaco2008 Feb]Meteor Shower流星雨（bfs）
http://www.lydsy.com/JudgeOnline/problem.php?id=1611 一眼题,bfs. #include <cstdio> #include <c ...
- 收藏几个支持中文的PHP字符串截取函数
字符串截取是一个非常常见的编程任务,而往往带中文的字符串截取会经常用到.虽然不难,但是自己写函数实现又耗费时间,这里介绍一个比较好用的字符串截取函数,能够胜任基本的需求了. <?php func ...
- hdu 2612:Find a way（经典BFS广搜题）
Find a way Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- C++之异常处理
C++ Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...