先上html
<form action="123.html">
<div id="box">
<input type="submit" class="button" value="按钮" />
</div>
</form>
一、被废弃的事件委托
$(function(){
普通绑定 .bind/.unbind
事件委托 .live .delegate
解除委托 .die .undelegate
});
二、jq1.7以上事件绑定 .on/.off (推荐)
$('button').on('click',function(){
alert("代替bind");
});
// .on可同时绑定 委托多个事件
$('button').on('mouseover mouseout',function(){
alert("同时监听移入移出");
});
//还可以通过此方法阻止form提交的冒泡事件
$('form').on('submit',function(){
return false;
});
或者
$('form').on('submit',false);
//替代.live .deletage
$('form').on('click','.button',function(){
$(this).clone().appendTo('#box');//通过点击button执行click事件，复制button和事件
});
//移除事件委托
$('form').off('click','.button');//.button是事件委托的子元素
注：.on的事件绑定和委托可执行多次
三、只绑定和委托一次的.one
.one绑定后只触发一次，触发后自己销毁
列队动画，递归调用
先上html
<style>
.test{
float: left;
padding: 3px 6px;
background-color: #00a8e1;
margin-right: 5px;
display: none;
}
</style>
<body>
<div class="test" >你</div>
<div class="test" >好</div>
<div class="test" >吗</div>
<div class="test" >？</div>
<input type="button" class="show" value="显示">
<input type="button" class="hide" value="隐藏">
</body>
目的：逐个显示每个字符，逐个隐藏
一、不完善写法
<script>
$(
$('.hide').click(function () {
$('.test').last().hide('fast',function () {
$(this).prev().hide('fast');
})
}),
$('.show').click(function () {
$('.test').first().show('fast',function () {
$(this).next().show('fast');
})
})
);
</script>
注：这样写你会发现，显示只能逐个显示两个，而隐藏却一起隐藏了(last???!after)。现在要做到逐个显示每个字符，逐个隐藏，
就要用到递归自调用
完善后：
<script>
$(
$('.hide').click(function () {
$('.test').last().hide('fast',function a() {
$(this).prev().hide('fast',a); //给执行函数命名，除第一个外都调用一次自己。
})
}),
$('.show').click(function () {
$('.test').first().show('fast',function b() {
$(this).next().show('fast',b);
})
})
);
</script>
注：fast 控制动画速度。快。其实有个更好的方法toggle，哈哈哈哈~，但是不能逐个。。。。