jQuery常会用到的切换事件和悬停事件

最新推荐文章于 2022-09-21 19:08:34 发布

前端筱园

最新推荐文章于 2022-09-21 19:08:34 发布

阅读量1.7k

点赞数 1

分类专栏： jQuery事件文章标签： jQuery事件切换事件悬停事件

dengzhanyong

本文链接：https://blog.csdn.net/DengZY926/article/details/81901308

版权

jQuery事件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

切换事件

jQuery定义了两个事件的切换方法：hover()和toggle()。事件切换在Web开发中经常会用到，如样式交互、行为交互等。

jQuery定义了一个toggleClass()方法，他能够显示/隐藏指定的样式类，实现样式的动态切换，而hover()和toggle()方法能够实现行为交互，toggle()方法用于绑定两个或多个事件处理器函数，以相应被选元素的轮流的click事件。

从jQuery 1.9版本开始，jQuery 删除了toggle(function, function, ..)用法，仅作为元素显隐切换的交互事件。如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。toggle([speed], [easing], [fn])默认是0毫秒，可选值如"slow”、参数speed为可选参数，表示隐藏/显示效果的速度，可用参数"normal"、"fast"。参数easing也是可选参数，用来指定切换效果，默认是"swing大"linear"。参数fn也是可选参数，定义在动面完成时执行的函数，每个元素执行一次。

在下面代码中，使用按钮动态控制列表框的显示或隐藏。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ 
    $("button").click(function(){
        $("ul#list").toggle("slow");
    });
})
</script>
<style type="text/css">
</style>
</head>
<body>
<button>控制按钮</button>
<ul id="list">
    <li>空山新雨后，天气晚来秋。</li>
    <li>明月松间照，清泉石上流。</li>
    <li>竹喧归浣女，莲动下渔舟。</li>
    <li>随意春芳歇，王孙自可留。</li>   
</ul>
</body>
</html>

也可以直接为toggle()方法传递true或false参数，用于确定显示或隐藏元素。如下面的代码，当单机阿牛时，将段落文本隐藏，而不是切换效果。

$(function(){ 
    $("button").click(function(){
        $("ul#list").toggle(false);
    });
})

悬停事件

hover()方法可以模仿悬停事件，其用法也非常的简单，它包含两个参数，第一个参数表示鼠标移动到元素上时所触发的函数，第二个参数表示鼠标指针移除元素后要触发的函数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").hover(
    function(){
        this.text("鼠标经过");
    },
    function(){
        this.text("鼠标已移出");
    })
})
</script>
</head>
<body>
<div style="width:100px;height:100px;border:1px solid red;"></div>
</body>
</html>