首页 > 代码库 > jQuery--bind()、hover()、toggle()

jQuery--bind()、hover()、toggle()

2024-09-23 04:02:12   215人阅读

1、事件绑定

bind()方法调用格式：bind(type,[data],fn)

第一个参数：事件类型，例如：click，blur，focus，mouseover，mouseout等

第二个参数：可选参数，作为event.data属性值传递给事件对象的额外数据对象

第三个参数：绑定处理函数

bind()实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #panel1{
            width: 400px;
            background: #CBC9C9;
            border:1px solid black;
        }
        .content{
            display: none;
        }
        .head{
            margin: 0px;
            height: 30px;
            line-height: 30px;
        }
    </style>
    <script type="text/javascript" src=‘jquery-3.2.1.min.js‘></script>
    <script type="text/javascript">
        $(function(){
            $(‘#panel1 h5.head‘).bind(‘click‘,function(){
                if($(this).next(‘div.content‘).is(‘:visible‘)){
                    $(this).css(‘background‘,‘none‘).next(‘div.content‘).hide();
                }else{
                    $(this).css(‘background‘,‘yellow‘).next(‘div.content‘).show();
                }
            });
        });
    </script>
</head>
<body>
    <div id="panel1">
        <h5 class="head">什么是jQuery？</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由JohnResig创建于2006年1月的开源项目。jQuery凭借见解的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式
        </div>
    </div>
</body>
</html>

2、合成事件

　　1）、hover()--hover(enter,leave)方法用于模拟光标悬停事件,当光标移动到元素时，会触发指定的第一个函数（enter）；当光标移出这个元素的时候，会触发指定的第2个函数(leave)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #panel1{
            width: 400px;
            background: #CBC9C9;
            border:1px solid black;
        }
        .content{
            display: none;
        }
        .head{
            margin: 0px;
            height: 30px;
            line-height: 30px;
        }
    </style>
    <script type="text/javascript" src=‘jquery-3.2.1.min.js‘></script>
    <script type="text/javascript">
        $(function(){
            $(‘#panel1 h5.head‘).hover(function(){
                $(this).css(‘background‘,‘yellow‘).next(‘div.content‘).show();
            },function(){
                $(this).css(‘background‘,‘none‘).next(‘div.content‘).hide();
            });
        });
    </script>
</head>
<body>
    <div id="panel1">
        <h5 class="head">什么是jQuery？</h5>
        <div class="content">
            jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由JohnResig创建于2006年1月的开源项目。jQuery凭借见解的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式
        </div>
    </div>
</body>
</html>

　　2）、toggle()--toggle(fn1,fn2....fnN)该方法用于模拟鼠标连续点击事件,第1次单击元素，触发指定的第1个函数（fn1）；当再次单击同一个元素时，则触发指定的第2个函数（fn2）；如果有更多的函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

 

jQuery--bind()、hover()、toggle()


联系
我们