基础 - JavaScript（JavaScript）
在本章中，我们将研究JavaScript 。 在Foundation中设置JavaScript很容易; 你唯一需要的就是jQuery。
JavaScript安装
您可以使用ZIP下载，包管理器或CDN来获取Foundation JavaScript文件。 在您的代码中，您可以提供指向jQuery和Foundation的链接作为标记，放在结束之前，并检查在jQuery之后加载Foundation。 有关更多信息， 请单击此处
文件结构
当您通过命令行安装Foundation时，Foundation插件将作为单独的文件下载，例如foundation.tabs.js ， foundation.dropdownMenu.js ， foundation.slider.js等。 所有这些文件都合并到foundation.js ，它一次提供所有插件。 如果你想使用一些插件，首先应该加载foundation.core.js 。
例如 -
<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>
某些插件可能需要特定的实用程序库，它们随Foundation安装一起提供。 您可以在下一章JavaScript Utilities中详细了解特定的插件要求。
加载单个文件会产生网络开销，特别是对于移动用户。 为了加快页面加载速度，建议使用grunt或gulp 。
初始化 (Initializing)
foundation()函数用于一次初始化所有Foundation插件。
例如 -
(document).foundation();
使用插件
使用数据属性，插件连接到HTML元素，因为它们与插件的名称相匹配。 虽然大多数插件可以嵌套在其他插件中，但单个HTML元素一次只能有一个插件。 例如，工具提示链接是通过添加data-tooltip创建的。 有关更多信息， 请单击此处
配置插件
可以使用其配置设置自定义插件。 例如，您可以设置accordion幻灯片的速度上下。 可以使用插件的DEFAULTS属性全局更改插件设置。 有关更多信息， 请单击此处
页面加载后添加插件
将新HTML添加到DOM时，默认情况下不会初始化这些元素上的任何插件。 您可以通过重新调用.foundation()函数来检查新插件。
例如 -
$.ajax('assets/partials/kitten-carousel.html', function(data) {
$('#kitten-carousel'</span>).html(data).foundation();
});
程序化使用
在JavaScript中，插件可以通过编程方式创建，每个插件都是全局Foundation对象的类，其构造函数包含两个参数，如元素和对象。
var $accordion = new Foundation.Accordion($('#accordion'), {
slideSpeed: 600, multiExpand: true
});
大多数插件都提供了公共API，允许您通过JavaScript操作它。 您可以查看插件的文档来研究可用的函数和方法，可以轻松调用。
例如 -
$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.
$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.
$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.
您可以选择任何jQuery选择器，如果选择器包含多个插件，那么它们都将具有相同的选择方法。
参数可以像传递参数一样传递给JavaScript。
以underscore(_)为前缀的方法被视为内部API的一部分，这意味着，在没有警告的情况下，它们可以破坏，更改甚至消失。
事件 (Events)
每当特定函数完成时，DOM就会触发一个事件。 例如，每当更改选项卡时，都可以监听它并创建对它的返回响应。 每个插件都可以触发事件列表，这些事件将在插件的文档中记录。 在Foundation 6中，删除了回调插件，必须将其作为事件侦听器。
例如 -
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});