欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

分析jQuery中on()函数的作用及用法

程序员文章站 2022-05-07 19:41:20
...
这篇文章主要介绍了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">
p{
  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(){ 
  $("p").on("click",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

以上代码为p绑定一个click事件，点击p时候能够为p设置新的文本内容。

实例二:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  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(){ 
  $("p").on("click mousemove",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

以上代码为p绑定了两个事件，无论是点击p还是在p中移动鼠标都会为p设置新的文本内容。

实例三:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  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="这是新文本" 
  $("p").on("click",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</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>
<p class="parent">
  <p class="children"><span>原来内容</span></p>
</p>
<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"> 
p{ 
  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="这是新文本" 
  $("p").on({click:function(e){ 
    $(this).text(e.data.mytext); 
  }},{"mytext":newtext}) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

以上代码中，事件类型和事件处理函数以对象的形式绑定的。

以上就是分析jQuery中on()函数的作用及用法的详细内容，更多请关注其它相关文章！

相关标签： jQuery 用法 作用 函数 分析

上一篇： 基于css3小船水面游动动画特效_html/css_WEB-ITnose

下一篇： 前端学PHP之变量、数据类型及作用域

推荐阅读