JQuery(4) 常用事件

最新推荐文章于 2024-10-09 00:58:21 发布

sugarYTian

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量492

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/sugarYTian/article/details/121398355

版权

1.bind

//绑定bind点击事件显示content内容
       $(".content").bind("click",function(){
           $(this).show();
       })

2.鼠标移入移出点击

//添加鼠标移入展示移出隐藏mouseover mouseout
        $("h5").mousemove(function(){
            $(".content").show();
        }).mouseout(function(){
            $(".content").hide();
        });

//添加鼠标移入展示移出隐藏hover
   $("h5").hover(function(){
            $(".content").show();
        },function(){
            $(".content").hide();
        })

//添加点击轮流隐藏和展示toggle
   $("h5").toggle(function(){
            $(".content").show();
        },function(){
            $(".content").hide();
        },function(){
            $(".content").show(2000);
        },function(){
            $(".content").hide(2000);
        })

//添加点击轮流隐藏和展示
   $("h5").click(function(){
            $(this).next().toggle();
        })

3.阻止冒泡行为

// 为span元素绑定click事件
$("span").bind("click",function(){
 $("#msg").append("内部span元素被点击")
 //方法一：阻止冒泡行为
 event.stopPropagation();
 //方法一：阻止冒泡行为
 //return:false;
});
// 为div元素绑定click事件
$("div").bind("click",function(){
 $("#msg").append("外层div元素被点击");
 event.stopPropagation();
});
// 为body元素绑定click事件
 $("body").bind("click",function(){
 $("#msg").append("body元素被点击");
 event.stopPropagation();
});