锋利的jQuery学习笔记-write less do more -合成事件 hover()悬停 toggle()替换

最新推荐文章于 2022-04-13 19:04:56 发布

FightingITPanda

最新推荐文章于 2022-04-13 19:04:56 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/FightingITPanda/article/details/80405209

版权

页面html

<head>
    <style>
                .highlight{
                    background :#ADFF2F;
                }
    </style>
</head>
<body >
    <div id = panda>
        <h5 class = panda2>jquery的绑定事件</h5>
        <div class = content style = "display :none">
        //绑定事件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.简写绑定事件 简写就是可以不写
        //5.合成事件 hover() toggle()
        </div>
    </div>
</body>

1.hover()
模拟光标悬停事件移入元素触发一个事件，移除元素触发一个事件相当于mouseenter+mouseleave

<script>
$(function(){
    $("#panda h5.panda2").hover(function(){
        $(this).next().show();//移入的时候显示
    },function(){//注意这里是逗号，相当于给hover绑定了两个function
        $(this).next().hide();//移除的时候隐藏
    });
});
</script>

2.toggle
模拟鼠标连续单击事件，其实就是绑定两个函数，交替触发

分3步：
1.等待dom加载完
2.找到元素，添加toggle方法
3.显示函数里，给标题添加样式，高亮显示
4.隐藏函数里，移除标题样式，去掉高亮显示

<script>
$(function(){
    $("#panda h5.panda2").toggle(function(){
        $(this).removeClass("highlight")//移除样式
        $(this).next().hide();//隐藏文本
    },function(){//注意这里是逗号，这两个函数交替执行
        $(this).addClass("highlight");//添加样式
        $(this).next().show();//显示文本
    });
});
</script>