jquery中on方法使用介绍

使用jquery的朋友对其中的on方法并不陌生吧,下面为大家介绍下此方法的具体使用,感兴趣的朋友可以参考下

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<title></title> 
</head> 
<body> 
<input type="button" value="test" id="test"/> 
<script type="text/javascript"> 
$(function(){ 
$("#test").hello({ 
"size":1 
}); 
}); 
</script> 
<script type="text/javascript"> 
;(function($){ 
$.fn.hello = function(options){ 
var defaults = {"size":0}, 
 
opts = $.extend({},defaults,options), 
 
show = { 
play:function(options){ 
var _root = this; 
_root.autoPlay(); 
_root.eventClick(); 
}, 
autoPlay:function(){ 
console.log("auto"); 
}, 
eventClick:function(){ 
//$("#test").on("click",{show:"dd"},function(e){ 
// console.log("click :" + e.data.show); 
//}); 
 
$("#test").on({ 
click:function(){ 
alert("click"); 
}, 
mouseenter:function(){ 
alert("enter"); 
}, 
mouseleave:function(){ 
alert("leave"); 

}); 

}; 
return this.each(function(){ 
show.play(opts); 
}); 
}; 
})(jQuery); 
</script> 
</body> 
</html> 
 

时间: 2024-09-11 03:42:33

jquery中on方法使用介绍的相关文章

浅谈jQuery中replace()方法

  这篇文章主要介绍了jQuery中replace()方法用法,实例分析了replace()方法的功能.定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下 今天在读jquery源码时,发现一个以前自己不曾注意过得问题,就是replece()的第二个参数为函数时的问题,以前只是知道replace()的第二个参数可以为函数,但是不知道该怎么操作,今天看到源码里用到了函数作为replace()的第二个参数时,感觉自己读起来比较吃力,于是准备整理下这个函数... 语法 stringObject.r

jQuery中next方法用法讲解

  jQuery中next方法用法讲解         这篇文章主要介绍了jQuery中next方法用法,实例分析了jQuery中next方法的功能.定义及相关使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中next方法用法.分享给大家供大家参考.具体分析如下: 这里演示jQuery中next的用法,可取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合. 这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素. 可以用一个可选的表达式进行筛选 ? 1 2 3

JQuery中$.ajax()方法参数详解及应用

 JQuery中$.ajax()方法想必大家并不陌生吧,在本文将为大家介绍下其参数及应用示例,感兴趣的朋友不要错过 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址.    type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和    delete也可以使用,但仅部分浏览器支持.    timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的

jquery中one()方法的用法实例

 这篇文章主要介绍了jquery中one()方法的用法,实例分析了one()方法的功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery中one()方法的用法.分享给大家供大家参考.具体分析如下: jQuery中的one()方法:表示只执行一次,代码如下: 代码如下: <html> <head> <title>jquery事件:one()方法的使用</title> <script type="text/

jQuery中unwrap()方法用法实例

 这篇文章主要介绍了jQuery中unwrap()方法用法,实例分析了unwrap()方法的定义.功能及移除匹配元素父元素的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中unwrap()方法用法.分享给大家供大家参考.具体分析如下: 此方法将移除匹配元素的父元素. 从方法的字面意思可以看出是清除wrap()方法的效果. 语法: 代码如下: $(selector).unwrap() 实例代码:     代码如下: <!DOCTYPE html PUBLIC "-//W3

jQuery中wrapAll()方法用法实例

 这篇文章主要介绍了jQuery中wrapAll()方法用法,实例分析了wrapAll()方法的功能.定义及匹配元素的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中wrapAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法将所有匹配的元素用单个元素包裹起来. 此方法与wrap()方法虽然功能类似,但是有着很大区别.wrap()方法会把每一个匹配的元素都匹配一次. 语法一: 用指定的DOM元素去包裹匹配元素. 复制代码 代码如下: $(selector).wra

jQuery中wrapInner()方法用法实例

 这篇文章主要介绍了jQuery中wrapInner()方法用法,实例分析了wrapInner()方法的功能.定义及包裹匹配元素的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中wrapInner()方法用法.分享给大家供大家参考.具体分析如下: 此方法使用指定的HTML内容或元素将匹配的元素内容包裹起来. 语法一: 用指定的DOM元素去包裹匹配元素的内容. 代码如下: $(selector).wrapInner(elem) 参数列表: 参数 描述 elem 用于包裹目标的D

jQuery中replaceAll()方法用法实例

 这篇文章主要介绍了jQuery中replaceAll()方法用法,实例分析了replaceAll()方法的功能.定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下     本文实例讲述了jQuery中replaceAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法用匹配元素去替换指定的内容. replaceAll()方法的作用和replaceWith()方法是完全一样的. 语法结构: 代码如下: $(content).replaceAll(selector)   参数列表:

jQuery中empty()方法用法实例

 这篇文章主要介绍了jQuery中empty()方法用法,以实例形式分析了empty()方法的功能.定义及将匹配元素中的所有内容移除的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中empty()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够将匹配元素中的所有内容移除,包括所有文本和子节点. 语法结构: 代码如下: $(selector).empty()   实例代码:   代码如下: <!DOCTYPE html> <html> <head&