jQuery中on()方法用法实例
2023-09-27 14:21:48 时间
这篇文章主要介绍了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 ajax jsonp跨域调用实例代码
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
- 学习MVC和jQuery相关的书
- jquery中实现全选按钮
- Jquery—Jquery异步功能实例
- Jquery控制点击时一、二级菜单自由隐藏与出现
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
- 跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder)
- jQuery Ajax 实例 全解析
- jQuery.holdReady()方法用法实例
- jQuery的on绑定click和直接绑定click区别
- jQuery文件夹 Treeview 简单实例,树型菜单插件,
- Jquery中post 请求后无数据返回的问题、jquery遍历json
- 基于jQuery图片弹出翻转特效代码
- 一款基于jQuery的图片下滑切换焦点图插件
- 移动端类似IOS的滚动年月控件(需要jQuery和iScroll)
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
- JQuery实战---初识JQuery+入门实例