锋利的jQuery学习笔记-write less do more-绑定事件bind

1.事件绑定
文档装在完成之后，为元素绑定事件完成某些操作
bind(type [.data],fn)
type:绑定事件的类型
blur focus load resize scroll unload click dbclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error
[.data] 可选参数
fn：响应函数
eg:单击标题显示内容

<body>
    <div id = panda>
            <h5 class = panda2>jquery的绑定事件</h5>
            <div class = content style = "display :none">
            //1.绑定事件bind()
            bind(type [.data],fn)
            type：blur focus load resize scroll unload click dbclick mousedown mouseup mousemove 
                  mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error
            [.data] :可选参数，event.data
            fn:绑定的处理函数
            //2.加强效果
            实现多次单击、不同效果，隐藏的情况下单击-》显示，显示的情况下单击-》隐藏
            //3.绑定mouseover鼠标滑入-》显示  mouseout鼠标滑出-》隐藏
            //4.简写绑定事件 简写就是可以不写
            </div>
        </div>
</body>
<script>
/*分三步：
1.等待dom装载完毕
2.找到元素，绑定单击事件
3.找到内容，将内容显示或隐藏*/
    $(document).ready(function(){
        $("#panda h5.panda2").bind('click',function(){
            var $next = $(this).next();//多次调用 定义为一个局部变量
            if($next.is(":visible")){//判断div内容如果是显示的话
                $next.hide();//隐藏
            }else{
                $next.show();//反之显示
            }
        });
    });
</script>

2.绑定mouseover鼠标滑入-》显示 mouseout鼠标滑出-》隐藏

$(function(){//加载简写
    $("#panda h5.panda2").bind('mouseover',function(){//绑定滑入方法
            $(this).next().show();//显示
    }).bind('mouseout',function(){//bind可以多次使用  绑定滑出方法
            $(this).next().hide();//隐藏
    });
});

3，简写绑定事件
简写就是可以不用写bind

//简写上面函数
$(function(){
    $("#panda h5.panda2").mouseover(function(){
        $(this).next().show();
    }).mouseout(function(){
        $(this).next().hide();
    });
});

锋利的jQuery学习笔记-write less do more-绑定事件bind

猜你喜欢