地狱的镰刀

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()的区别 和 三种方式写光棒事件 动画的更多相关文章

  1. JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...

  2. jquery中bind,live,delegate,on的区别

    这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href=" ...

  3. 【转】jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  4. jQuery中.bind() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  5. jQuery中bind() live() delegate() on() 的区别

    实例 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){aler ...

  6. jQuery中.bind() .live() .delegate() .on()区别

    $(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1 ...

  7. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

  8. 谈 jquery中.band() .live() .delegate() .on()的区别

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...

  9. 监视EntityFramework中的sql流转你需要知道的三种方式Log,SqlServerProfile, EFProfile

    大家在学习entityframework的时候,都知道那linq写的叫一个爽,再也不用区分不同RDMS的sql版本差异了,但是呢,高效率带来了差灵活性,我们 无法控制sql的生成策略,所以必须不要让自 ...

随机推荐

  1. jstree使用小结(一)

    项目中用到tree结构,使用了jstree做个笔记如下: 1. 官网: http://www.jstree.com/    有时候打不开,那就只能等打得开的时候再看了...O(∩_∩)O [PS: 一 ...

  2. UVa 11242 - Tour de France

    题目大意:竞赛用自行车前轮有f个齿轮,后轮有r个齿轮,根据比率计算一个spread(传播率?). 很直接的题,排序然后找商的最大值就好了,uhunt上标明level 4,我都不敢相信会这么简单,还一直 ...

  3. Android studio的那些bug

    R文件无法编译: 1.Activity继承类AppCompatActivity有时候会报错 2.R文件找不到一般是layout文件夹下出错 3.sdk包问题 4.Gradle DSL method n ...

  4. OC--初始化UINavigationController

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  5. 使用YUIDoc生成JS文档

    其实YUIDoc主页已经写的比较清晰了,但有一些概念和细节再点出一些注意的地方. 目前最新的YUIDoc使用nodejs进行开发安装和使用都非常的方便. 我们只需要将我们的代码加上必要的注释,便可以很 ...

  6. ora-04031

    诊断并解决ORA-04031 错误 当我们在共享池中试图分配大片的连续内存失败的时候,Oracle首先清除池中当前没使用的所有对象,使空闲内存块合并.如果仍然没有足够大单个的大块内存满足请求,就会产生 ...

  7. JAVA轻量级文件监控

    原文地址:http://blog.csdn.net/three_man/article/details/31012903?utm_source=tuicool 介绍 本文主要介绍一种轻量级的文件监控方 ...

  8. 固定表头带滚动条的HTML表格

    http://blog.csdn.net/daryl715/article/details/1883677 <html> <head> </head> <BO ...

  9. php之 人员的权限管理(RBAC)

    1.想好权限管理的作用? 2.有什么权限内容? 3.既然有权限管理那么就会有管理员? 4.登录后每个人员的界面会是不一样的? 一.想好这个权限是什么? 就做一个就像是vip的功能,普通用户和vip用户 ...

  10. IEcss样式,行高的问题

    input的文本内容显示一定要用line-height,不然会出现内容错位的问题