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>