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 迁移目录
Dec 18 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
jquery 插件学习(五)
Aug 06 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php获取错误信息的方法
2015/07/17 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
js写的评论分页(还不错)
2013/12/23 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python实现手机销售管理系统
2019/03/19 Python
python批量下载抖音视频
2019/06/17 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
python实现IOU计算案例
2020/04/12 Python
python 弧度与角度互转实例
2020/04/15 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
八年级美术教学反思
2014/02/02 职场文书
酒店节能减排方案
2014/05/26 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
向女朋友道歉的话
2015/01/20 职场文书
单身申明具结书
2015/02/26 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
python实现语音常用度量方法的代码详解
2021/05/25 Python