jq 给按钮添加方法_JQ 基础（4）

今天继续分享JQ基础第四阶段。如何处理简单事件。

除了页面加载之外，我们也想在其他时刻完成某个任务。正如JavaScript可以让我们通过或window.onload来截获页面加载事件一样，它对用户发起的事件也提供了相似的“挂钩”（hook）。例如，鼠标单击（onclick）、表单被修改（onchange）以及窗口大小变化（onresize）等。在这些情况下，如果直接在DOM中为元素指定行为，那么这些挂钩也会与我们讨论的onload一样具有类似的缺点。为此，jQuery也为处理这些事件提供了一种改进的方式。

简单的样式转换器

为了说明某些事件处理技术，我们假设希望某个页面能够基于用户的输入呈现出不同的样处理简单的事件式。也就是说，允许用户通过单击按钮来切换视图，包括正常视图、将文本限制在窄列中的视图和适合打印的大字内容区视图。

用于样式转换器的HTML标记如下所示：
<div id="switcher" class="switcher"> 
 <h3>Style Switcher</h3> 
 <button id="switcher-default"> 
 Default 
 </button> 
 <button id="switcher-narrow"> 
 Narrow Column 
 </button> 
 <button id="switcher-large"> 
 Large Print 
 </button> 
</div>

效果如上图

接下来，我们来编写Large Print按钮的功能，此时，需要一点css代码来实现页面的替换视图：

body.large .chapter { 
  font-size: 1.5em; 
}

然后，我们的目标就是为标签应用large类。这样会导致样式表对页面进行重新格式化。添加类的语句如下。

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

但是，我们希望这条语句在用户单击按钮时执行（而不是像我们到目前为止看到的那样在页 面加载后执行）。为此，我们需要引入.on()方法。通过这个方法，可以指定任何DOM事件，并为该事件添加一种行为。此时，事件是click，而行为则是由上面的一行代码构成的函数

$(document).ready(function() { 
  $('#switcher-large').on('click', function() { 
  $('body').addClass('large'); 
  }); 
});

现在，当我们单击Large Print 按钮时，就会运行函数中的代码，此时的外观如下

这里的全部操作就是绑定了一个事件。我们前面介绍的.ready()方法的优点在此也同样适用。多次调用.on()也没有任何问题，即可以按需为同一个事件追加更多的行为。