jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数。
$("a").bind("click",function(){alert("ok");});
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别:
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理,性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
用三种方式写光棒效果
一:js批量注册this的说法
当通过循环的方式注册事件的时候,在匿名函数的方法体中,必须使用this代表当前对象,不能使用数组名[i](对象名)。
js设置样式的两种方案:
1.this.style.属性名=“属性值”;
如果属性名:
background-color--------->backgroundColor
font-size---------->fontSize
2.this.style.cssText="属性名:属性值;font-size:50px"
eg:
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript">
//用js的光棒效果
/* $(function(){
var hu=document.getElementsByTagName("li");
for(var i=0;i<hu.length;i++){
hu[i].onmouseover=function(){
//js方式设计样式 方式一 this.style.属性名=属性值。
//this.style.background="red";
// this.style.fontSize="40px";
//方式二:this.style.cssText="属性名:属性值"
this.style.cssText="background:pink;font-size:50px;";
}; hu[i].onmouseout=function(){
//方式一:
this.style.background="";
this.style.fontSize="20px";
//方式二:
// this.style.cssText="background:;font-size:20px;";
};
}
用jq的两种方法:
//用jq的光棒效果 1.锁定li元素
$(function(){
var hu=$("li");
hu.mouseover(function(){
$(this).css({"background":"pink","font-size":"50px"});
}).mouseout(function(){
this.style.background="";
this.style.fontSize="20px";
});
});
//hover的光棒效果
ji.hover(
function(){
$(this).css({"background":"pink","font-size":"50px"});
},function(){
this.style.background="";
this.style.fontSize="20px";
});
复杂动画:
//复杂动画
$(function(){
$("img").animate({width:"90%"},5000)
.animate({height:"90%"},{queue:false,duration:5000})
.animate({borderWidth:5},{queue:false,duration:5000});
}); </script>
</head> <body>
<img src="img/1.jpg" style="width:100px; height:100px;display:none;"></img>
</body>
简单动画:
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript">
//简单动画
$(function(){
//$("img").show(5000,playDog);
//$("img").fadeIn(5000,playDog);
$("img").slideDown(5000,playDog);
});
function playDog(){
alert("will is power");
}
</script>
</head> <body>
<img src="img/1.jpg" style="width:100px; height:100px;display:none;"></img>
</body>
jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画的更多相关文章
- JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...
- jquery中bind,live,delegate,on的区别
这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href=" ...
- 【转】jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- jQuery中bind() live() delegate() on() 的区别
实例 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){aler ...
- jQuery中.bind() .live() .delegate() .on()区别
$(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1 ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- 谈 jquery中.band() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- 监视EntityFramework中的sql流转你需要知道的三种方式Log,SqlServerProfile, EFProfile
大家在学习entityframework的时候,都知道那linq写的叫一个爽,再也不用区分不同RDMS的sql版本差异了,但是呢,高效率带来了差灵活性,我们 无法控制sql的生成策略,所以必须不要让自 ...
随机推荐
- PHP大小写问题
PHP对于系统函数.用户自定义函数.类名称等是不区分大小写的如可以用EHCO也可以用echo调用显示函数, 但对于变量名称又是区分大小写的,如$Name和$NAME是2个不同的变量. 而对于文件名又因 ...
- IOS三种归档(NSKeyArchieve)的总结
IOS三种归档(NSKeyArchieve)的总结 归档是一种IOS中常用来存储文件的一种方法,在面向对象的语言中,归档也就实际上可以将一切对象存储在文件中,以下是IOS开发中常见的三种文件归档方式, ...
- p便签,去掉首行缩进
<p>fdsfdsfs</p> 使用P标签是,会自动的加上首行缩进,如果想去掉首行缩进,可以使用text-indent属性 <p style="text-ind ...
- IOC:AutoFac使用demo
使用autofac 实现依赖注入 1.引用 autofac.dll 和 autofac.configuration.dll 2.新增接口 IDAL using System; using System ...
- 【滚动数组】【状压dp】Gym - 100956F - Colored Path
f(i,j,S)表示到(i,j),且经由的路径上的颜色集合为S的价值的最小值,从上方和左方转移过来即可. 要注意,内存不足,需要滚动数组优化,即使用了map,还是需要. 路径输出的时候,可以再跑一遍d ...
- 思迅/泰格/科脉/收银软件/商超软件数据库修复解决断电造成损坏的mdb\dat文件SQL数据库 置疑 修复 恢复
拥有专业管理软件数据库修复技术工程师,专业提供管家婆.美萍.思迅.科脉等管理软件技术服务,电脑维修\重装系统技 术服务.无法登陆打不开等出错问题处理(连接失败,请输入正确的服务器名,SQL Serve ...
- Python3基础 filter与lambda表达式配合 筛选出1-100之间的奇数
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- 虔诚的墓主人(bzoj 1227)
Description 小W 是一片新造公墓的管理人.公墓可以看成一块N×M 的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地.当地的居民都是非常虔诚的基督徒,他们愿意提前为自己 ...
- UVa 103 - Stacking Boxes
题目大意:矩阵嵌套,不过维数是多维的.有两个个k维的盒子A(a1, a1...ak), B(b1, b2...bk),若能找到(a1...ak)的一个排列使得ai < bi,则盒子A可嵌套在盒子 ...
- HUD-5124-lines
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5124 这题题目做的好悲催,比赛时题目意思不理解,也没有深究了,赛后又看了很久没有看懂,问了很多才搞懂, ...