在页面加载后执行任务

     之前我们已经知道了$(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>

代码

     注：多次调用.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>

代码

这样，样式转换器就会对用户给出适当的反馈了，利用处理程序的上下文将语句通用化，可以使代码更高效。我们可以把负责突出显示的代码提取到一个单独的处理程序中，因为针对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强大的隐式迭代能力，即一次就能隐藏所有按钮

最新文章

  1. iOS Universal Links(通用链接)
  2. OpenGL学习资料汇总
  3. 让 jQuery UI draggable 适配移动端
  4. Oracle 数据泵导入导出
  5. 玩转PowerShell第三节——【SCOM Maintenance Mode】-技术&amp;分享
  6. Linux useful command
  7. MSSQL 分组后取每组第一条（group by order by）
  8. Log4net使用笔记
  9. 文件拷贝以及base64
  10. bzoj 1176 Mokia（CDQ分治，BIT）
  11. 刨根究底字符编码之八——Unicode编码方案概述
  12. mui的上拉加载更多 下拉刷新 自己封装的demo
  13. python进阶学习笔记（三）
  14. python︱Anaconda安装、简介（安装报错问题解决、Jupyter Notebook）
  15. (转)整理 node-sass 安装失败的原因及解决办法
  16. [oracle] Oracle存储过程里操作BLOB的字节数据的办法，例如写入32位整数
  17. SparseArray
  18. IIS 注册Asp.net 4.0
  19. for（） 和$.each()的用法区别
  20. Ansible之tags介绍

热门文章

  1. Kafka 安装和测试
  2. 【linux】Cache和Buffer的区别
  3. C#：基于WMI查询USB设备
  4. Haroopad 写 markdown文本
  5. activiti自定义流程之Spring整合activiti-modeler5.16实例（五）：流程定义列表
  6. 一个SQLSERVER触发器的示例
  7. 我的wordpress插件总结
  8. HDU Count the string+Next数组测试函数
  9. phpmyadmin数据库导入出错
  10. M2M