jQuery中on()方法用法实例

186 阅读 0 评论 123 点赞

我是靠谱客的博主娇气帅哥，最近开发中收集的这篇文章主要介绍jQuery中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.uoften.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="http://www.uoften.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="http://www.uoften.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="http://www.uoften.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="http://www.uoften.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>