#07：动手！

正如我们所讨论的，jQuery 可以被认为是一个“选择并执行”的库。我们已经讨论了很多关于选择的内容，所以现在让我们来谈谈一些执行操作。请记住，该模式基本上是这样的

// Select something!
$(".something")
  // Do something!
  .hide();

我们不再使用更多理论上的例子，而是直接进入一些现实世界中的内容。我们在 Drew Barontini 的 CodePen 中找到了这个示例并将其复制。

查看 CodePen 上 Chris Coyier 的 信用卡表单 (@chriscoyier)

在我们的示例中，我们默认隐藏了信用卡表单。然后，我们创建了一个链接，您可以点击该链接来向上或向下滑动信用卡表单。我们选择链接，然后在表单上执行 slideToggle 操作。选择并执行！

我们还没有过多讨论事件，但这是 jQuery 的一个重要部分。事件是指鼠标点击、按键、滚动等。 “选择并执行”中的“执行”部分通常发生在事件之后。别担心，在我们完成本系列之前，我们会详细讨论事件。现在，只需要知道 on() 是在 jQuery 中绑定事件的最佳/标准方法。绑定，表示“监视此元素或一组元素上的此事件”。

基本计划

$("#link-that-toggles").on("click", function() {
  $("#thing-to-toggle").slideToggle();
});

在我们的示例中，链接实际上是一个链接。

切换

任何浏览器中哈希链接的默认工作方式是窗口将向下滚动到与该哈希链接匹配的 ID 的元素。有时这是好的。我喜欢它如何在该链接和该元素之间创建语义连接。因此，在没有 JavaScript 的情况下，该链接本质上仍然是有意义的（尤其是在您为其设置了聪明的标题时）。

但有时，这种哈希链接跳转行为很烦人。我们可以在 JavaScript 中使用 preventDefault 来阻止它。像这样

$("#link-that-toggles").on("click", function(event) {
  $("#thing-to-toggle").slideToggle();
  event.preventDefault();
});

我们将在以后更多地讨论这一点。

当然，jQuery 自身的文档 是所有 jQuery“执行”方面（方法）的绝佳资源。

我认为对这种“选择并执行”和事件的基本理解确实为 JavaScript 打开了一个理解的世界。我知道它对我有帮助。在本屏幕录像的最后，我们快速浏览了 CSS-Tricks 的当前设计，并了解了 JavaScript 如何被明确地用于响应某些点击事件并更改 UI。这与我们在之前的演示中所做的非常相似。例如，在您点击的元素上设置一个活动类，就像这样

查看 CodePen 上 Chris Coyier 的 d6f7161a5931397b4f24195a315d52f3 (@chriscoyier)