JQuery基础教程：事件（上）

时间：2022-05-24 02:59:21

在页面加载后执行任务

     之前我们已经知道了$(document).ready()是jQuery基于页面加载执行任务的一种主要方式，但是要知道原生的window.onload事件也可以实现相同的效果，虽然这两个方法具有类似的效果，但是，它们在触发操作的时间上存在着微妙的差异，这种差异只有在加载的资源多到一定程度时才会体现出来

当文档完全下载到浏览器中时，会触发window.onload事件，而$(document).ready()则会在DOM完全就绪并可以使用时调用，虽然这也意味着所有元素对脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。换句话说，当HTML下载完成并解析为DOM树之后，代码就可以运行

举个例子，假设一个页面中有许多大型图像，我们可以通过jQuery隐藏、显示、移动或以其他方式操纵这些图像。如果我们通过onload事件设置界面，那么用户在能够使用这个页面之前，必须要等到每一幅图像都下载完成。更糟糕的是，如果行为尚未添加给那些具有默认行为的元素（例如链接），那么用户的交互可能会导致意想不到的结果。然而，当我们使用$(document).ready()进行设置时，这个界面就会更早地准备好可用的正确行为

注：一般来说，使用$(document).ready()要优于使用onload事件处理程序，但必须要明确的一点是，因为支持文件可能还没有加载完成，所以类似图像的高度和宽度这样的属性此时则不一定会有效。如果需要访问这些属性，可能就得选择实现一个onload事件处理程序（或者是使用jQuery为load事件设置处理程序）。这两种机制能够和平共存

基于一个页面执行多个脚本

     通过JavaScript（而不是指直接在HTML中添加处理程序属性）注册事件处理程序的传统机制是，把一个函数指定给DOM元素的对应属性，例如下面的函数function doStuff() { //执行某种任务……}那么，我们既可以在HTML标记中指定该函数：<body onload="doStuff();"> 也可以在JavaScript代码中指定该函数：window.onload = doStuff;

注：这里将函数指定为处理程序，省略了后面的圆括号，只使用了函数名。如果带着圆括号，函数会被立即调用；没有圆括号，函数名就只是函数的标识符或函数引用，可以用于在将来再调用函数

假设我们又定义了一个函数doOtherStuff{...}，window.onload=doOtherStuff;也可以将它指定为基于页面的加载来运行，但是这样会取代之前的那个函数,onload属性一次只能保存一个函数的引用。通过$(document).ready()机制能够很好地解决这个问题。每次调用这个方法都会向内部的行为队列中添加一个新函数，当页面加载完成后，所有函数都会被执行。而且，这些函数会按照注册它们的顺序依次执行

处理简单的事件

假如一个页面上有三个按钮允许用户通过单击按钮来切换视图，包括正常视图、将文本限制在窄列中的视图和适合打印的大字内容区视图。要实现“大字视图”按钮的功能，需要CSS代码:body.large  { font-size: 1.5em; }，接着为body添加large类，$('body').addClass('large');如果要单击按钮实现效果，需要用.ON()方法，这个方法可以指定任何事件并为该事件添加一种行为。具体实现代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        body.large {

            font-size: 1.5em;

        }

        body.narrow  {

            width: 250px;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script>

        $(document).ready(function () {

            $('#switcher-default').on('click', function () {

                $('body').removeClass('narrow');

                $('body').removeClass('large');

            });

            $('#switcher-narrow').on('click', function () {

                $('body').addClass('narrow');

                $('body').removeClass('large');

            });

            $('#switcher-large').on('click', function () {

                $('body').removeClass('narrow');

                $('body').addClass('large');

            });

        });

    </script>

</head>

<body>

    <div id="switcher" class="switcher">

        <h3>样式转换器</h3>

        <button id="switcher-default">

            默认视图

        </button>

        <button id="switcher-narrow">

            窄列视图

        </button>

        <button id="switcher-large">

           大字视图

        </button>

    </div>

    <h2>Shakespeare's Plays</h2>

    <table>

        <tr>

            <td>As You Like It</td>

            <td>Comedy</td>

            <td></td>

        </tr>

        <tr>

            <td>All's Well that Ends Well</td>

            <td>Comedy</td>

            <td>1601</td>

        </tr>

        <tr>

            <td>Hamlet</td>

            <td>Tragedy</td>

            <td>1604</td>

        </tr>

        <tr>

            <td>Macbeth</td>

            <td>Tragedy</td>

            <td>1606</td>

        </tr>

        <tr>

            <td>Romeo and Juliet</td>

            <td>Tragedy</td>

            <td>1595</td>

        </tr>

        <tr>

            <td>Henry IV, Part I</td>

            <td>History</td>

            <td>1596</td>

        </tr>

        <tr>

            <td>Henry V</td>

            <td>History</td>

            <td>1599</td>

        </tr>

    </table>

    <h2>Shakespeare's Sonnets</h2>

    <table>

        <tr>

            <td>The Fair Youth</td>

            <td>1–126</td>

        </tr>

        <tr>

            <td>The Dark Lady</td>

            <td>127–152</td>

        </tr>

        <tr>

            <td>The Rival Poet</td>

            <td>78–86</td>

        </tr>

    </table>

</body>

</html>

代码

JQuery基础教程：事件（上）

     注：多次调用.ON()也没问题，可以为同一个事件追加更多行为

利用事件处理程序的上下文

       如果需要就哪个按钮处于当前使用状态对用户给出反馈，可以在按钮被单击时为它应用selected类，同时从其他按钮上移除这个类。selected类只是为按钮文本添加了粗体样式：selected { font-weight: bold; }。当触发任何事件处理程序时，关键字this引用的都是携带相应行为的DOM元素

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        body.large {

            font-size: 1.5em;

        }

        body.narrow  {

            width: 250px;

        }

        .selected {

            font-weight: bold;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script>

        $(document).ready(function() {

            $('#switcher-default')

            .addClass('selected')

            .on('click', function() {

                $('body').removeClass('narrow');

                $('body').removeClass('large');

                $('#switcher button').removeClass('selected');

                $(this).addClass('selected');

            });

            $('#switcher-narrow').on('click', function() {

                $('body').addClass('narrow');

                $('body').removeClass('large');

                $('#switcher button').removeClass('selected');

                $(this).addClass('selected');

            });

            $('#switcher-large').on('click', function () {

                $('body').removeClass('narrow');

                $('body').addClass('large');

                $('#switcher button').removeClass('selected');

                $(this).addClass('selected');

            });

        });

    </script>

</head>

<body>

    <div id="switcher" class="switcher">

        <h3>样式转换器</h3>

        <button id="switcher-default">

            默认视图

        </button>

        <button id="switcher-narrow">

            窄列视图

        </button>

        <button id="switcher-large">

           大字视图

        </button>

    </div>

    <h2>Shakespeare's Plays</h2>

    <table>

        <tr>

            <td>As You Like It</td>

            <td>Comedy</td>

            <td></td>

        </tr>

        <tr>

            <td>All's Well that Ends Well</td>

            <td>Comedy</td>

            <td>1601</td>

        </tr>

        <tr>

            <td>Hamlet</td>

            <td>Tragedy</td>

            <td>1604</td>

        </tr>

        <tr>

            <td>Macbeth</td>

            <td>Tragedy</td>

            <td>1606</td>

        </tr>

        <tr>

            <td>Romeo and Juliet</td>

            <td>Tragedy</td>

            <td>1595</td>

        </tr>

        <tr>

            <td>Henry IV, Part I</td>

            <td>History</td>

            <td>1596</td>

        </tr>

        <tr>

            <td>Henry V</td>

            <td>History</td>

            <td>1599</td>

        </tr>

    </table>

    <h2>Shakespeare's Sonnets</h2>

    <table>

        <tr>

            <td>The Fair Youth</td>

            <td>1–126</td>

        </tr>

        <tr>

            <td>The Dark Lady</td>

            <td>127–152</td>

        </tr>

        <tr>

            <td>The Rival Poet</td>

            <td>78–86</td>

        </tr>

    </table>

</body>

</html>

代码

JQuery基础教程：事件（上）

这样，样式转换器就会对用户给出适当的反馈了，利用处理程序的上下文将语句通用化，可以使代码更高效。我们可以把负责突出显示的代码提取到一个单独的处理程序中，因为针对3个按钮的突出显示代码都一样

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        body.large {

            font-size: 1.5em;

        }

        body.narrow  {

            width: 250px;

        }

        .selected {

            font-weight: bold;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script>

        //$(document).ready(function() {

        //    $('#switcher-default')

        //    .addClass('selected')

        //    .on('click', function() {

        //        $('body').removeClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-narrow').on('click', function() {

        //        $('body').addClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass('narrow');

        //        $('body').addClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        $(document).ready(function () {

            $('#switcher-default')

            .addClass('selected')

            .on('click', function () {

                $('body').removeClass('narrow').removeClass('large');

            });

            $('#switcher-narrow').on('click', function () {

                $('body').addClass('narrow').removeClass('large');

            });

            $('#switcher-large').on('click', function () {

                $('body').removeClass('narrow').addClass('large');

            });

            $('#switcher button').on('click', function () {

                $('#switcher button').removeClass('selected');

                $(this).addClass('selected');

            });

        });

    </script>

</head>

<body>

    <div id="switcher" class="switcher">

        <h3>样式转换器</h3>

        <button id="switcher-default">

            默认视图

        </button>

        <button id="switcher-narrow">

            窄列视图

        </button>

        <button id="switcher-large">

           大字视图

        </button>

    </div>

    <h2>Shakespeare's Plays</h2>

    <table>

        <tr>

            <td>As You Like It</td>

            <td>Comedy</td>

            <td></td>

        </tr>

        <tr>

            <td>All's Well that Ends Well</td>

            <td>Comedy</td>

            <td>1601</td>

        </tr>

        <tr>

            <td>Hamlet</td>

            <td>Tragedy</td>

            <td>1604</td>

        </tr>

        <tr>

            <td>Macbeth</td>

            <td>Tragedy</td>

            <td>1606</td>

        </tr>

        <tr>

            <td>Romeo and Juliet</td>

            <td>Tragedy</td>

            <td>1595</td>

        </tr>

        <tr>

            <td>Henry IV, Part I</td>

            <td>History</td>

            <td>1596</td>

        </tr>

        <tr>

            <td>Henry V</td>

            <td>History</td>

            <td>1599</td>

        </tr>

    </table>

    <h2>Shakespeare's Sonnets</h2>

    <table>

        <tr>

            <td>The Fair Youth</td>

            <td>1–126</td>

        </tr>

        <tr>

            <td>The Dark Lady</td>

            <td>127–152</td>

        </tr>

        <tr>

            <td>The Rival Poet</td>

            <td>78–86</td>

        </tr>

    </table>

</body>

</html>

代码

上面代码中.removeClass()方法的参数是可选的，即当省略参数时，该方法会移除元素中所有的类。利用这一点，可以把代码再改进得更简单一些

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        body.large {

            font-size: 1.5em;

        }

        body.narrow  {

            width: 250px;

        }

        .selected {

            font-weight: bold;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script>

        //$(document).ready(function() {

        //    $('#switcher-default')

        //    .addClass('selected')

        //    .on('click', function() {

        //        $('body').removeClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-narrow').on('click', function() {

        //        $('body').addClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass('narrow');

        //        $('body').addClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        //$(document).ready(function () {

        //    $('#switcher-default')

        //    .addClass('selected')

        //    .on('click', function () {

        //        $('body').removeClass('narrow').removeClass('large');

        //    });

        //    $('#switcher-narrow').on('click', function () {

        //        $('body').addClass('narrow').removeClass('large');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass('narrow').addClass('large');

        //    });

        //    $('#switcher button').on('click', function () {

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        //改善代码

        $(document).ready(function() {

            $('#switcher-default').addClass('selected').on('click', function () {

            $('body').removeClass();

            });

            $('#switcher-narrow').on('click', function () {

                $('body').removeClass().addClass('narrow');

            });

            $('#switcher-large').on('click', function () {

                $('body').removeClass().addClass('large');

            });

            $('#switcher button').on('click', function () {

                $('#switcher button').removeClass('selected');

                $(this).addClass('selected');

            });

        });

    </script>

</head>

<body>

    <div id="switcher" class="switcher">

        <h3>样式转换器</h3>

        <button id="switcher-default">

            默认视图

        </button>

        <button id="switcher-narrow">

            窄列视图

        </button>

        <button id="switcher-large">

           大字视图

        </button>

    </div>

    <h2>Shakespeare's Plays</h2>

    <table>

        <tr>

            <td>As You Like It</td>

            <td>Comedy</td>

            <td></td>

        </tr>

        <tr>

            <td>All's Well that Ends Well</td>

            <td>Comedy</td>

            <td>1601</td>

        </tr>

        <tr>

            <td>Hamlet</td>

            <td>Tragedy</td>

            <td>1604</td>

        </tr>

        <tr>

            <td>Macbeth</td>

            <td>Tragedy</td>

            <td>1606</td>

        </tr>

        <tr>

            <td>Romeo and Juliet</td>

            <td>Tragedy</td>

            <td>1595</td>

        </tr>

        <tr>

            <td>Henry IV, Part I</td>

            <td>History</td>

            <td>1596</td>

        </tr>

        <tr>

            <td>Henry V</td>

            <td>History</td>

            <td>1599</td>

        </tr>

    </table>

    <h2>Shakespeare's Sonnets</h2>

    <table>

        <tr>

            <td>The Fair Youth</td>

            <td>1–126</td>

        </tr>

        <tr>

            <td>The Dark Lady</td>

            <td>127–152</td>

        </tr>

        <tr>

            <td>The Rival Poet</td>

            <td>78–86</td>

        </tr>

    </table>

</body>

</html>

代码

注：为了适应更通用的移除类的操作—先执行.removeClass()，以便它不会撤销几乎同时执行的.addClass()

此时，在每个按钮的处理程序中仍然会执行某些相同的代码。这些代码也可以轻而易举地提取到通用的按钮单击处理程序中

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        body.large {

            font-size: 1.5em;

        }

        body.narrow  {

            width: 250px;

        }

        .selected {

            font-weight: bold;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script>

        //$(document).ready(function() {

        //    $('#switcher-default')

        //    .addClass('selected')

        //    .on('click', function() {

        //        $('body').removeClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-narrow').on('click', function() {

        //        $('body').addClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass('narrow');

        //        $('body').addClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        //$(document).ready(function () {

        //    $('#switcher-default')

        //    .addClass('selected')

        //    .on('click', function () {

        //        $('body').removeClass('narrow').removeClass('large');

        //    });

        //    $('#switcher-narrow').on('click', function () {

        //        $('body').addClass('narrow').removeClass('large');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass('narrow').addClass('large');

        //    });

        //    $('#switcher button').on('click', function () {

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        //改善代码

        //$(document).ready(function() {

        //    $('#switcher-default').addClass('selected').on('click', function () {

        //    $('body').removeClass();

        //    });

        //    $('#switcher-narrow').on('click', function () {

        //        $('body').removeClass().addClass('narrow');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass().addClass('large');

        //    });

        //    $('#switcher button').on('click', function () {

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        $(document).ready(function () {

            $('#switcher-default').addClass('selected');

            $('#switcher button').on('click', function () {

                $('body').removeClass();

                $('#switcher button').removeClass('selected');

                $(this).addClass('selected');

            });

            $('#switcher-narrow').on('click', function () {

                $('body').addClass('narrow');

            });

            $('#switcher-large').on('click', function () {

                $('body').addClass('large');

            });

        });

    </script>

</head>

<body>

    <div id="switcher" class="switcher">

        <h3>样式转换器</h3>

        <button id="switcher-default">

            默认视图

        </button>

        <button id="switcher-narrow">

            窄列视图

        </button>

        <button id="switcher-large">

           大字视图

        </button>

    </div>

    <h2>Shakespeare's Plays</h2>

    <table>

        <tr>

            <td>As You Like It</td>

            <td>Comedy</td>

            <td></td>

        </tr>

        <tr>

            <td>All's Well that Ends Well</td>

            <td>Comedy</td>

            <td>1601</td>

        </tr>

        <tr>

            <td>Hamlet</td>

            <td>Tragedy</td>

            <td>1604</td>

        </tr>

        <tr>

            <td>Macbeth</td>

            <td>Tragedy</td>

            <td>1606</td>

        </tr>

        <tr>

            <td>Romeo and Juliet</td>

            <td>Tragedy</td>

            <td>1595</td>

        </tr>

        <tr>

            <td>Henry IV, Part I</td>

            <td>History</td>

            <td>1596</td>

        </tr>

        <tr>

            <td>Henry V</td>

            <td>History</td>

            <td>1599</td>

        </tr>

    </table>

    <h2>Shakespeare's Sonnets</h2>

    <table>

        <tr>

            <td>The Fair Youth</td>

            <td>1–126</td>

        </tr>

        <tr>

            <td>The Dark Lady</td>

            <td>127–152</td>

        </tr>

        <tr>

            <td>The Rival Poet</td>

            <td>78–86</td>

        </tr>

    </table>

</body>

</html>

代码

注：必须把通用的处理程序转移到特殊的处理程序上方，因为.removeClass()需要先于.addClass()执行。而之所以能够做到这一点，是因为jQuery总是按照我们注册的顺序

来触发事件处理程序 

最后，可以通过再次利用事件的执行上下文来完全消除特殊的处理程序。因为上下文关键字this引用的是DOM元素，而不是jQuery对象，所以可以使用原生的DOM属性来确定被单击元素的ID。因而，就可以对所有按钮都绑定相同的处理程序，然后在这个处理程序内部针对按钮执行不同的操作

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        body.large {

            font-size: 1.5em;

        }

        body.narrow  {

            width: 250px;

        }

        .selected {

            font-weight: bold;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script>

        //$(document).ready(function() {

        //    $('#switcher-default')

        //    .addClass('selected')

        //    .on('click', function() {

        //        $('body').removeClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-narrow').on('click', function() {

        //        $('body').addClass('narrow');

        //        $('body').removeClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass('narrow');

        //        $('body').addClass('large');

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        //$(document).ready(function () {

        //    $('#switcher-default')

        //    .addClass('selected')

        //    .on('click', function () {

        //        $('body').removeClass('narrow').removeClass('large');

        //    });

        //    $('#switcher-narrow').on('click', function () {

        //        $('body').addClass('narrow').removeClass('large');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass('narrow').addClass('large');

        //    });

        //    $('#switcher button').on('click', function () {

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        //改善代码

        //$(document).ready(function() {

        //    $('#switcher-default').addClass('selected').on('click', function () {

        //    $('body').removeClass();

        //    });

        //    $('#switcher-narrow').on('click', function () {

        //        $('body').removeClass().addClass('narrow');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').removeClass().addClass('large');

        //    });

        //    $('#switcher button').on('click', function () {

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //});

        //$(document).ready(function () {

        //    $('#switcher-default').addClass('selected');

        //    $('#switcher button').on('click', function () {

        //        $('body').removeClass();

        //        $('#switcher button').removeClass('selected');

        //        $(this).addClass('selected');

        //    });

        //    $('#switcher-narrow').on('click', function () {

        //        $('body').addClass('narrow');

        //    });

        //    $('#switcher-large').on('click', function () {

        //        $('body').addClass('large');

        //    });

        //});

        $(document).ready(function () {

            $('#switcher-default').addClass('selected');

            $('#switcher button').on('click', function () {

                var bodyClass = this.id.split('-')[1];

                $('body').removeClass().addClass(bodyClass);

                $('#switcher button').removeClass('selected');

                $(this).addClass('selected');

            });

        });

    </script>

</head>

<body>

    <div id="switcher" class="switcher">

        <h3>样式转换器</h3>

        <button id="switcher-default">

            默认视图

        </button>

        <button id="switcher-narrow">

            窄列视图

        </button>

        <button id="switcher-large">

           大字视图

        </button>

    </div>

    <h2>Shakespeare's Plays</h2>

    <table>

        <tr>

            <td>As You Like It</td>

            <td>Comedy</td>

            <td></td>

        </tr>

        <tr>

            <td>All's Well that Ends Well</td>

            <td>Comedy</td>

            <td>1601</td>

        </tr>

        <tr>

            <td>Hamlet</td>

            <td>Tragedy</td>

            <td>1604</td>

        </tr>

        <tr>

            <td>Macbeth</td>

            <td>Tragedy</td>

            <td>1606</td>

        </tr>

        <tr>

            <td>Romeo and Juliet</td>

            <td>Tragedy</td>

            <td>1595</td>

        </tr>

        <tr>

            <td>Henry IV, Part I</td>

            <td>History</td>

            <td>1596</td>

        </tr>

        <tr>

            <td>Henry V</td>

            <td>History</td>

            <td>1599</td>

        </tr>

    </table>

    <h2>Shakespeare's Sonnets</h2>

    <table>

        <tr>

            <td>The Fair Youth</td>

            <td>1–126</td>

        </tr>

        <tr>

            <td>The Dark Lady</td>

            <td>127–152</td>

        </tr>

        <tr>

            <td>The Rival Poet</td>

            <td>78–86</td>

        </tr>

    </table>

</body>

</html>

代码

注：根据单击的按钮不同，bodyClass变量的值可能是default、narrow或large。这里与前面做法的不同之处在于，我们会在用户单击<button id="switcher-default">时给<body>添加default类。虽然在这儿添加这个类也用不着，但与因此降低的复杂性相比，仅仅添加一个用不上的类名还是很划算的

  简写的事件

        不使用.on()而使用.click()可以将前面的样式转换器程序重写，其他blur、keydown和scroll等标准的DOM事件，也存在类似前面这样的简写事件。这些简写的事件方法能够把一个事件处理程序绑定到同名事件上面

$(document).ready(function() {

$('#switcher-default').addClass('selected');

$('#switcher button').click(function() {

var bodyClass = this.id.split('-')[1];

$('body').removeClass().addClass(bodyClass);

$('#switcher button').removeClass('selected');

$(this).addClass('selected');

});

});

代码

显示和隐藏高级特性

         这里是一个小插曲，有兴趣看看toggleClas()的API。如果我们需要点击隐藏按钮，再次点击恢复按钮，可以用下面的伪代码实现

<style>

.hidden {

display: none;

}

</style>

<script>

$(document).ready(function() {

$('#switcher h3').click(function() {

$('#switcher button').toggleClass('hidden');

});

});

</script>

代码

这里我们再次看到了jQuery强大的隐式迭代能力，即一次就能隐藏所有按钮

相关文章