jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)

change([[data],fn])

概述

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生

参数

fn 在每一个匹配元素的change事件中绑定的处理函数

[data],fn data:change([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的change事件中绑定的处理函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("input").change(function() {
                    var reg = /^[a-zA-Z]+$/;
                    var textValue = $(this).val();
                    if(!reg.test(textValue)) {
                        $("#error").html("<h5 style='color:red'>只能输入字母！<h5>");
                    }
                });

                $("#select").change(function() {
                    $("#error").html($("#select option:selected").text());
                });
            })
        </script>
    </head>

    <body>
        <div>
            <span>字母：</span> <input id="input" type="text" style="width: 150px;" />
            <br />
            <span>语言：</span>
            <select id="select" style="width: 150px;">
                <option>Java</option>
                <option>C#</option>
            </select>
        </div>
        <div id="error"></div>
    </body>

</html>

on(events,[selector],[data],fn)

概述

在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素

参数

events,[selector],[data],fn

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin"；
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发；
data:当一个事件被触发时要传递event.data给事件处理函数；
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false

<!DOCTYPE html>
<html>

    <head>
        <meta charset=" utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 60px;
                height: 60px;
                border: 1px solid green;
                font-size: 12px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var newtext = "这是新文本"
                $("div").on("click", {
                    "mytext": newtext
                }, function(e) {
                    $(this).text(e.data.mytext);
                })
            })
        </script>
    </head>

    <body>
        <div>原来内容</div>
    </body>

</html>

events-map,[selector],[data]

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数；
selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发；
data:当一个事件被触发时要传递event.data给事件处理函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset=" utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 160px;
                height: 160px;
                border: 1px solid green;
                font-size: 12px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var newtext = "这是新文本"
                $("div").on({
                    click: function(e) {
                        $(this).text(e.data.mytext);
                    }
                }, {
                    "mytext": newtext
                })
            })
        </script>
    </head>

    <body>
        <div>原来内容</div>
    </body>

</html>

hover([over,]out)

概述

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数

参数

over,out over:鼠标移到元素上要触发的函数；out:鼠标移出元素要触发的函数

out 当鼠标移到元素上或移出元素时触发执行的事件函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#button").hover(function() {
                    $("div").css("background", "red");
                }, function() {
                    $("div").css("background", "green");
                })
            })
        </script>
    </head>

    <body>
        <div style="background-color: red;width: 120px;height: 120px;">
            <button id='button'>点我测试</button>
        </div>
    </body>

</html>