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

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

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()