jQuery基础：模仿用户操作及实例

2019-02-15 10:33:33

一、模仿单击事件有时候，即使某个事件没有真正发生，但如果能执行绑定到该事件的代码将会很方便。
通过.trigger()方法就可以完成模拟事件的操作，如：

$(document).ready(function () {
    $('#switcher').trigger('click');
});

这样页面加载完成时，就好像是执行了一次单击操作。 .trigger()方法提供了一组与.on()方法相同的简写方法。当使用这些方法而不带参数时，结果将是触发操作而不是绑定行为，如：

$(document).ready(function() {     
    $('#switcher').click(); 
});

二、响应键盘事件

键盘事件可以分为两类：直接对键盘按键给出响应的事件（keyup和keydown）和对文本输入给出响应的事件（keypress）。
输入一个字母的事件可能会对应着几个按键，例如输入大写的X要同时按Shift和X键。
虽然各种浏览器的具体实现有所不同（毫不奇怪），但有一条实践经验还是比较可靠的：如果想知道用户按了哪个键，应该侦听keyup或keydown事件；如果想知道用户输入的是什么字符，应该侦听keypress事件。

下面的例子还使用了.trigger()模拟单击，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Font Size Switcher</title>
    <style>
        .switcher {
            float: right;
            background-color: #ddd;
            border: 1px solid #000;
            margin: 10px;
            padding: 10px;
            font-size: .9em;
        }

            .switcher h3 {
                margin: .5em 0;
            }


        .small {
            font-size: .5em;
        }

        .normal {
            font-size: 1em;
        }

        .large {
            font-size: 1.5em;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#switcher-normal').addClass('selected');
            $('#switcher').click(function (event) {
                if (!$(event.target).is('button')) {
                    $('#switcher button').toggleClass('hidden');
                }
            });
            $('#switcher').on('click', 'button', function (event) {
                var bodyClass = event.target.id.split('-')[1];
                $('body').removeClass().addClass(bodyClass);
                $('#switcher button').removeClass('selected');
                $(this).addClass('selected');
            });
            var triggers = {
                S: 'small',
                N: 'normal',
                L: 'large'
            };
            $(document).keyup(function (event) {
                var key = String.fromCharCode(event.which);
                if (key in triggers) {
                    $('#switcher-' + triggers[key]).click();
                }
            });

        });

    </script>

</head>
<body>
    <div id="switcher" class="switcher">
        <h3>Font Size</h3>
        <button id="switcher-normal">
            Normal
        </button>
        <button id="switcher-small">
            Small
        </button>
        <button id="switcher-large">
            Large
        </button>
    </div>
    <div id="container">
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
        <p>This is a paragraph。</p>
    </div>
</body>
</html>