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 全角转换实现代码
Jul 17 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
js代码实现轮播图
May 04 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
深入浅析vue组件间事件传递
2017/12/29 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python实现简单字典树的方法
2016/04/29 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python tornado上传文件的功能
2020/03/26 Python
python3排序的实例方法
2020/10/20 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
简述数据库的设计过程
2015/06/22 面试题
药剂专业学生求职信范文
2013/12/28 职场文书
幼儿教师工作感言
2014/02/14 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
Python基础详解之邮件处理
2021/04/28 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
win10更新失败无限重启解决方法
2022/04/19 数码科技