关于jq事件委托和jq动画近来的一些总结(一)

来源:互联网 发布:ehviewer一样的软件 编辑:程序博客网 时间:2024/06/01 07:56
先上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,哈哈哈哈~,但是不能逐个。。。。



原创粉丝点击