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版本整合了之前的三种方式的新事件绑定机制
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
一.用三种方式写光棒效果
(1)：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;";
};
}
(2)用jq的两种方法：
<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;";
};
}
二： 动画
1.
(1)show()将元素display样式设置为先前的显示状态(block,inline);hide()将display样式设置为none,导致隐藏。
可以加参数fast,slow,normal,时间整数(毫秒)。
(2)fadeOut()改到透明度到消失，fadeIn()相反。
(3)slideDown()向下显示，slideUp()向上隐藏。
(4)animate(params,speed,callback)自定义动画，params为样式如{property1:"value1",property2:"value2"}
speed速度，可选；callback动画执行完执行的函数，可选。
eg：
$('input').bind('click', function () { if ($(this).is(':visible')) {//如果内容为显示 $(this).hide(); } else { $(this).show(); } })
2.切换元素可见状态（toggle()）
#panel
{
position:relative;
width:100px;
height:300px;
border:1px solid #0050D0;
background:#96e555;
cursor:pointer;
}
html代码：
<div id="panel"></div>
jQuery代码：
$("#panel").click(function () {
$(this).animate({ left: "+=500px" }, 3000) //累计从左移动，先执行
.animate({ height: "-=100px" }, 2000) //累计减少高度，后执行
.animate({ opacity: "0.5" }, 3000)//透明度降低到0.5
.fadeOut("slow", function () { //动画都可以带有回调函数
$(this).css("display", "block"); //显示,css方法不加入到动画队列，因此在callback中
$(this).animate({ opacity: "1" }, 3000); //改变透明度
});
});
(1)+=和-=可以累计改变属性的值，如果直接写数字则改变一次。
(2)animate中的left是从左，top是从上；
(3)css()方法不会加入到动画队列，而是立即执行。
(4)将多个属性放到animate中会同时执行这些动画。
3,停止动画和判断是否正在动画
(1)stop[clearQueue][gotoEnd]);可选参数,true或false;clearQueue是否要清空未执行的动画队列；gotoEnd代表
是否直接跳转到 当前动画 的末状态。 如果直接使用stop()就停止当前正在进行的动画，后面的动画继续。
(2)hover(enter,leave)是鼠标悬停事件,进入执行enter，出来执行leave;下面的例子防止动画效果与鼠标不一致：
如果有多个动画，想在enter时停止，可以将参数clearQueue设为true ,像这样stop(true)
stop(false,true)让当前动画直接到末状态。
stop(true,true)让当前动画直接到末状态，并清空动画队列。
(3)判断是否处于动画状态
(4)延迟动画 delay(1000) 延迟1秒。
简单动画：
<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>
