jQuery中on()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了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="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" />

<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="https://3water.com/" /> 

<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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
小程序实现搜索框
Jun 19 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 #Javascript
jQuery学习笔记之2个小技巧
Jan 19 #Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 #Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 #Javascript
jQuery创建DOM元素实例解析
Jan 19 #Javascript
jQuery使用之处理页面元素用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery中的$
Jan 19 #Javascript
You might like
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jQuery基础知识小结
2014/12/22 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
Python实现自动发送邮件功能
2021/03/02 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
幼儿园元旦亲子活动方案
2014/02/17 职场文书
《长征》教学反思
2014/04/27 职场文书
2014年实验室工作总结
2014/12/03 职场文书
大学军训决心书
2015/02/05 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
小学思品教学反思
2016/02/20 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers