[Powered by Google Translate] [研讨会：JQUERY] [VIPUL谢卡瓦特，哈佛大学] [这是CS50。] [CS50.TV] 如果你在家，你可以在线访问我的幻灯片 通过此链接。 这是的TjjRWj，在bit.ly.上 你也可以直接去到URL， 这是cloud.cs50.net /〜vshekhawat的，这是我的名字， 和jQuery。 我强烈鼓励你跟随，如果你在家里看， 如果你在这里，还因为这是一个漂亮的互动演示。 

所以，今天我将要谈论的jQuery，第一个问题是， jQuery的是什么？ 这一年，我知道你们有没有覆盖的JavaScript 在尽可能多的细节，正如我们在过去几年。 JavaScript是，首先，只是一个客户端语言 您使用每个用户的机器上运行脚本和代码。 因此，你有一台服务器，提供网页的人， 但你可能要在他们的机器上做的东西， 问他们的机器将请求发送到您的服务器每隔30秒或类似的东西。 做到这一点，您可以使用JavaScript。 jQuery只是提供了更多的功能之上的JavaScript 为你做一些额外的东西。 如果你看的内容之上， 介绍了一些的东西，你是能够做到的。 所以，总体来说，它创建于2006年1月。 它的最初设想是在2005年8月。 这是几年，它是真正的新的Web 2.0运动的一部分 这使得互联网如此闪亮。 这是使用最广泛的JavaScript库。 超过19.6万个网站正在使用它，和使用仍在增加 根据到builtwith.com，其中，很显然，在过去的一年中， 刚刚被不断增加的相当线性。 其中排名前10万的网站，还是有 -  其中约40％目前正在使用它。 Facebook的使用，目前大量的其他网站使用它。 你可以看一下那些在自己的统计，如果你想。 你可以告诉它是合法的，因为它有一个基础和13名董事会成员， 随着一队20人的定期工作。 因此，它的使用非常广泛，它有一个组织网址，它的花哨， 它具有分拆其他的东西，所以这是一个大问题。 

你为什么要使用它呢？ jQuery是非常轻巧。 这意味着它不是一个巨大的文件。您可以下载 压缩后的文件，这是没有空白和注释，这是只有32 KB。 所以很容易只是折腾到您的网页 刚刚开始使用它。 这也是写得非常有效，所以它不会占用很多 -  它不会减慢你的网站多，当你使用它。 它可以让你实现这在以前是不可行的事情。 还有一些方面的功能， 像创建动画，通常将是非常，非常难以做到。 但在jQuery中，他们其实很简单。 也有一些事情是恼人做的， 在JavaScript中，可能像发送POST请求， 但发送请求到服务器，你必须写 五，六，七行代码。 现在你可以做一个单一的代码行，在一个单一的函数调用。 这确实简化了很多的东西，你这样做。 所有时尚的年轻人正在使用它。 ，我的意思是我。 在我最后的项目，这是去年news.whrb.org 这是电台，我创建了这个博客 它承载了我们所做的所有的节目和MP3文件。 您可以浏览过往， 这一切都做使用jQuery。你可以告诉 由于所有这些动画，基本上。 所以如果你有 - 如果你创建一个新的职位， 你看到这些小slideDowns使用jQuery，一切都做。 这个褪色效果 - 所以那种东西是所有使用jQuery， 你不必不断刷新页面来浏览网站。 使用jQuery的另一个很酷的事情是这样的演示文稿。 我使用这个开源的事情称为scrolldeck的， 有人写jQuery的顶部。 如果你真的看看源代码，你可以看到， 他们使用的是美元符号美元符号 使用jQuery来表示一个函数是一个jQuery功能。 因此，他们的jQuery上定义一个包装 允许你这样做一个介绍， 你可以看到，在这里，他们包括原来的jQuery文件， 这是什么你就必须包括如果想使用jQuery 在您自己的网站。 

在谈到上，你怎么安装呢？ 你可以去jQuery.com和下载文件， 它添加到Web目录，包括它。 因此，只要在上面，在你的HTML文件的头部标签 你的主要的HTML文件，就是有行代码 您使用的是哪个版本的jQuery正确的版本。 您可以下载它通过去jQuery.com， 点击“下载jQuery的，”你已经有了。就是这样。 而实际上，我们可以一起来看看它是什么样子。 如果您点击这里下载，jQuery是这一点。 它只是一个大的JavaScript文件，它为你的所有魔法的东西。 这是缩小的版本，这是无法读取。 您还可以在开发版本，这是可读 但还是非常非常漫长的。 这是一个很大的东西在里面。 您还可以链接到谷歌的托管版本。 所以这会允许你仅仅依靠谷歌提供。 他们提供的每一个版本，它在任何时候都可用。 所以，你或许可以依靠谷歌为你主持。 或者你可以连结到jQuery的自己的最新版本。 他们有一个网址，总是更新到最新版本。 这是jQuery的最新，并与有一个问题， 这是，如果更新的jQuery和一些先前的功能 他们变得退或过时， 它可能不是 - 它可能会开始没有得到支持了。 所以，如果你写一个网站使用1.8.2版本， 时间版本2.7出来 你写的一些功能不工作了。 因此，最好只下载32 KB的文件， 把它放在你的网页，它会永远工作。 

我要继续前进，并开始谈论jQuery的实际功能。 的第一件事就是选择器。这是什么jQuery提供最初设想。 你也可以点击文档看 选择我将要覆盖的详细文档。 选择器背后的想法是，你可以选择HTML页面上的元素。 页面上元素的ID和类和其他识别方面。 还有 - 他们在不同的订单。 有些的时候，他们互相嵌套。 jQuery允许您构建简单的查询，检索页面中的元素。 然后，你可以操纵这些元素使用jQuery功能， 这是操纵部分，我们稍后会得到。 您可以更改，更改CSS的HTML， 你也可以动画和添加功能激活某些事件。 因此，举例来说，如果点击的东西，你想要的东西发生， 你可以做到这一点，以及使用jQuery。 有数量庞大的方式来选择元素。 他们中的大多数，我从来没有使用，但也有基本的， 这是非常重要的。 元素选择，例如，如果你只是选择什么 这是一个div  - 其实我有这个幻灯片演示代码开放。 因此，举例来说，在这里的第一张幻灯片。 在这里，我们有一个div。如果我们实际上在页面上，选择所有的div 它只是给我们所有的div，在这个文件中，存在一个数组。 ID选择器可让您选择任何一个给定的ID。 所以，如果，例如，这件事情有ID为“什么，” 如果我们这样做的＃什么，而不是一些ID， 话，就返回一个数组，它有一个单一的元素，也就是该元素的页面。 我们也可以结合选择这种方式有 只能选择东西的div的ID。 所以，是的。只有选择具有该ID的div的。 对于类，你只需要使用一个圆点，这是同样的事情，CSS。 后裔也工作，所以如果你有一些类 嵌套内的元素 - 例如， 有一些类，它有一个锚标记，链接到另一个页面， 你可以使用这个语法检索链接。 您也可以一次选择多个事物，只是用逗号将它们分开， 使用任何你想要的选择，你会选择他们一次，在一个单一的阵列。 再有就是也没有选择，所以你可以选择所有的div 不具有某些特定的类。 而这仅仅是一个有用的方法来介绍，本次评选是如何工作的。 我将展示一些具体的例子，在第二。 

高级选择 - 这些只是几个例子。 这些有几十个，但如果你要选择所有的图像标签 在某些元素，那么你只是做图像。 如果你想选择的偶数的元素，例如，如果有20个，其中， 你要选择0，2，4，6等， 你要做的：就算了，或者你也可以这样做：奇数。 这些伪选择，这意味着他们实际上计算 所有其他元素，而不仅仅是选择所有这些。 您也可以 - 每个元素也可以有特定的属性。 因此，举例来说，类=中心也是一个属性。 这个锚标记，HREF，超文本引用，是一个属性也。 因此，您可以选择链接到特定的网页或只是 - 这是真的一般的东西。 您可以选择任何你喜欢的任何属性。 然后，属性，也包含。 如果，例如，要选择所有的输入元素 有“通”字，它们的名称， 如果网页上有一个输入文本块 这就是所谓的“密码”，那是一种方式，你可以选择。 有很多种。你可以去看看文档 看到它是如何工作的具体例子。 

接下来的事情就是DOM操作。 我们选择的元素之后，我们将要与他们实际做的东西。 到目前为止，我们还没有在看着，但如果你看一下文档， 真的有很多，我们可以做。 在这一点上，我们要在这个演示中选择元素 并操纵他们使用jQuery。 因为这是使用jQuery实现，我们有jQuery库的访问， 我们可以使用这些功能在这个代码。 一个有用的东西，你可能不知道的是控制台。 和谷歌Chrome是我使用的是什么。您可以按ALT指令J 或ALT控制J来打开控制台。 在Firefox中，我认为它的位移K命令或控制移位K. 在Safari中，你必须去改变一些设置。 有一个链接，如果你想做到这一点，但我建议让浏览器或Firefox。 所以，让我们打开控制台，它在这里。 它基本上只是让你做任何你想要的。 所以，你可以只需键入创建了一个变量x， X = 5，让我们来看看X + 2。 你甚至可以做一些像CS +让我们来看看，X + 45，那将是CS50。 你可以做一些典型的JavaScript的东西。 但你也可以这样写：jQuery在这里。 

因此，让我们来看看这第一方面。 我们要创建一个变量称为HTML，它是一个字符串。 它有一个段落标记，这就是所谓的一些新的文本。 所以我们有这样的HTML，它的一些新的文字，段落标记。 现在，我们其实是想将它添加到页面中。 我将它设置的HTML这一段，在这里，这个称号是追加ID。 如果我们选择追加ID，然后追加到 我刚刚创建的HTML变量， 它会增加，HTML结束时，右后这个段落标记。 因此，如果我们做到这一点 - 我们选择这一段， 我们所谓的附加功能与HTML的变量我只是说， 它会添加新的文本页面上。 我们也可以预先准备，这意味着它会去之前，该元素的开始。 因此，有一些新的文本在开始和之后。 我可以继续前进，刷新摆脱我刚刚做过这方面的东西。 但是，这是一个例子，你可以使用前置和追加方法 操作页面上的东西，添加一些HTML。 

您还可以更改类。 在这种风格的文件，我创建了这个胜利类 有文本颜色为红色，有些背景颜色，文字阴影。 它看起来可怕的，但是实际上，我可以 -  本段对应的类ID。 所以，我可以添加类为赢。 我可以在控制台中执行此， 将增加类，现在它看起来狰狞，不如预期。 CSS自动被应用到你的类 -  如果有CSS的一类，它会自动被应用 如果你改变一个元素的类。 然后我们可以使用删除类只是将其删除。 因此，如果你有一些预定义的类，如红色或突出， 然后你想运用这些元素， 你不必做所有的CSS样式每次。 你可以添加类的元素，然后它会自动成为 -  它会自动寻找适合这一类。 我们也可以删除的东西，所以我会选择所有的div 在页面上，并删除它们。 那是什么将会是什么样呢？ 它要看起来像什么，所以，实际上什么也没有留下。 我的演讲了。 我可以刷新，并把它带回来，幸运的是， 因为它只是运行一次， 但是这是一个例子，如果你想彻底摧毁关闭页面元素去除。 

您也可以覆盖了，我要选择页面上的所有的段落标记 和里面去，取代他们在他们有任何文字 只用单词“测试”。 如果你这样做，你会替换页面上的每一个段落，这个测试。 没错。他们全部换成测试。 所以这就是一个例子访问文字和覆盖的。 您还可以获取信息，这是真的很酷输入框。 如果你有一个输入框，人们打字的东西到， 人们键入的东西进去， 在这里，我们选择的输入，任何一种类型的文本输入标签。 在这种情况下，只有一个输入框整个演示文稿， 所以我们就选择了第一个，然后我们就可以调用Val函数。 返回值，输入框， 值是刚刚发生的一切是在它里面。 因此，如果我们做到这一点，它只是返回字符串的东西。 而如果我们再次调用它写更多的东西后，它变成更多的东西。 这是一个伟大的方式来访问一个输入框的元素，然后检查， 这是一个有效的电子邮件地址，这是一个有效的日期，例如。 您可以立即检索的东西，因为人们打字， 然后检查其是否有效，将其发送回服务器，你想用它做任何事情。 这就是你如何访问这些箱子里面有什么。 

您也可以直接修改CSS，而不是增加 一类，有一些预定义的属性， 你可以添加任何CSS，你要到什么。 因此，让我们选择的身体，这是整个演示文稿， 颜色的属性，定义的文字是什么颜色。 如果我们把它改成红色，所有页面中的文字会变成红色。 我们可以做一些像背景颜色为蓝色， 我们去它的美丽。 你可以做任何你想要的与此。 使用CSS属性，你真的可以修改，在任何时候任何事情看起来如何。 接下来的事情就是效果。 修改CSS效果基本上是相同的事情， 但是，实际上他们提供一些额外的动画。 因此，而不是只是显示或隐藏着什么或改变颜色， 你实际上可以使动画。 这里的文件，如果你想看一看它的广泛文档。 但我要说的是，主要的。 有显示和隐藏属性。 显示/隐藏ID的对应这整个框， 所以如果我隐藏它，它就会消失。 我可以再次显示它，如果我要让它回来。 它的背上。它其实并没有消失， 我其实没有删除它，我只是从页面设置的CSS属性的知名度隐藏 所以你看不到它了。 还有向上滑动和向下滑动，可以让你有这样的效果。 滑动消失，消失后 你可以将其向下滑动，使其回来。现在它回来了。 还有这种淡入淡出效果， - 褪色ID的对应这个盒子。 如果我消失了，然后它会慢慢消失。 我也淡出，它会回来的。 你也可以做淡入淡出，这是特定的淡入淡出功能。 你可以把它褪色，你想要的任何具体的不透明度。 所以，如果你慢慢淡出.5，它会成为半可见。 我可以使它.1回1使它再次完全可见。 那只是另一个动画，你可以做。 

也有切换的效果。 所以我要选择切换的ID，这相当于这个盒子， 该div，你可以调用切换，如果它是可见的，它会成为无形， 如果它是无形的，它会再次成为可见。 所以，我只是叫这个切换功能两次，第一次是 隐藏同样的事情，第二次调用表演同样的事情。 你也可以做到这一点使用淡入淡出切换， 做同样的事情，但它实际上变淡。 而同样的事情幻灯片切换。 有连锁效应，这意味着 如果你选择一个元素，它只是调用了一堆动画的方法， 如果你想淡出，然后向下滑动， 然后隐藏，然后淡入，它会做他们在一排。 所以消失了，回来 - 由于某种原因，隐藏并没有发生。 让我们试试吧。呀，所以它淡出，然后它溜去。 而且还有很多。您可以使用animate函数 创建自己的动画，这是相当复杂的， 但它为您提供了无限的可扩展性。 你可以让你想要什么样的动画。 您还可以使用队列排队多个动画的时间。 所以，如果你想要的东西飞跨页， 从右上方向左下方滑动，你可以做到这一点， 只是有一堆要一前一后的动作。 

接下来的事情，我们要谈的是事件。 活动让您 - 到目前为止，我们刚刚一直在打字的东西到控制台 那就是要做到这一点的方法之一， 但实际页面上，你不会能够 使用户类的东西到控制台。 你想，自动事情发生。 对于这一点，你需要使用激活某些事件发生的事件。 您可以查看文档的全部细节。 所以，让我们来看看。我们想要隐藏或显示框， 但现在这个按钮没有做任何事情，因为我没有实现它。 我打算去实际的HTML页面。 下面的幻灯片。有一个div幻灯片。 它具有类幻灯片。 有文字。现在，有此箱与彩盒按钮。 我们如何真正使这个消失？ 首先，让我们写一个函数，使得盒ID消失。 这是的语法FUNTION，让，姑且称之为hideTheBox。 它不带任何参数，因为没有参数应采取。 我们可以选择框的ID。 因此，使用jQuery的选择，我们可以选择框ID， ，然后就让它消失。 让我们把它淡出。 如果我们运行这个功能在实际的控制台， 我们可以定义此功能，我们可以称之为hideTheBox，和它的作品。 但是，我们希望它发生，实际上是按下按钮时。 要做到这一点，我们必须使用一个事件。 要绑定一个事件，某些特定的按钮，或发生一些动作， 我们必须选择将触发该事件的元素 -  或将触发该事件，对不起。 

因此，首先，让我们来选择框按钮的ID 因为的按钮，现在，该按钮， 我们要创建一个动画时，它的点击。 所以有这个点击功能。 它允许你绑定另一个功能。 这个函数接受另一个函数作为参数 我们可以通过在hideTheBox功能， 每当这个按钮被点击时，该功能会自动执行。 因此，这将工作，如果我们保存这一点，我会刷新，  - 第二，我很抱歉。 让我解决这个问题真的很快。 好吧。我们去那里。所以现在的方块消失，当我们点击按钮。 我们也可以改变这个只是fadeToggle， 改变它只是隐藏或显示框， 这也太多，如果我们刷新。 我们可以将其隐藏，我们也可以表现出来，而且将继续努力。 我们可以做的另一件事是，我们不居然有定义此hideTheBox功能 之前我们所说的点击功能。 因此，而不是定义函数和调用hideTheBox的， 我们只是去调用它，如果点击这个东西。 因此，我们可以将它定义匿名在这里， 这是一个功能的JavaScript。 你可以定义一个函数，通常情况下，我们会说功能hideTheBox 参数，而是，我们就可以说函数没有参数， 启动大括号来定义函数， 关闭，大括号，然后就在这里定义的功能， 第一个括号内的最后一个括号 对应的点击功能参数。 因此，我们通过在这个函数中，我们可以复制这行代码就在这里， 将做同样的事情。 现在我们没有这个的随机fadeTheBox功能 围坐没有明显的原因。 该函数被定义的匿名，它不会有一个名称。 它只会执行包装盒上的按钮，当我们点击。 让人耳目一新一次，再来一次，你可以看到，它仍然有效。 这就是你如何创建活动。 

有很多不同的事件，我们可以使用。 我要切换回使用控制台只是向你展示如何将这些工作。 为每个这些的ID对应的每个方块。 因此，这盒是点击ID，这是一个关键的ID，这一个是鼠标ID。 还有一件事是，有这个动作功能，而不是每次打字， 其实，我说干就干，这个动作定义功能在这里。 做同样的事情作为hideTheBox功能。 它得到这个框，要么变淡或消失它。 这就是为什么我们能够使用它。 因此，如果我们点击这个键式身份证，我们希望使框消失或再现。 这是同样的事情，我们不得不在最后一张幻灯片的按钮。 现在我们称之为后，我们可以点击这个框将消失， 然后点击它再次框将再次出现。 这是非常简单的。双击做同样的事情， 它除了需要双击。 所以，如果你点击了一次，再次点击它什么都不会发生， 但如果你双击，它会迅速消失。 如果你再次双击，它会回来的。 所以这是很简单的。 键盘输入是一种怪异的，我不认为它确实可以工作在这个例子中 因为下来的关键，关键和重要的新闻和其他关键行动 激活不管什么元素，你把它绑定到。 例如，即使我身体或别的东西完全绑定键， 那么它仍然会激活不管 - 这是不特定的。 我没有点击按一个键做任何事情消失。 它会被激活，无论什么样的元素，我目前所在 因此，这些实际上并不在这个例子中 因为它不认识我了输入到键盘输入格。 

但是，如果你看一下鼠标操作， 第一个是徘徊，它可以做一些使用CSS。 如果你使用CSS，你可以创建，因此，如果您将鼠标悬停在东西， 那么它的风格变化。 但是，使用jQuery，你可以改变的样式，以及其他的东西。 因此，举例来说，我们要打电话的行动，如果我们将鼠标悬停在这个div。 这意味着，如果我们将鼠标悬停在它，那么对话框就会消失。 如果我们远离它移动，方块会重新出现。 如果我们把这种和它悬停，盒子消失， 只要我们搬开，它回来了。 如果我们把这种悬停鼠标ID功能， 对应此框，然后如果我们将鼠标悬停在该框， 然后框实际上会消失 - 它是时髦的权利，但 -  如果我们将远离它，它会重新出现。现在它是向后的一些原因。 鼠标进入和鼠标移动的功能有些相似，但略有不同。 鼠标进入时，只激活鼠标进入箱，如预期。 所以，如果你进入它，它会消失。 但它不会重新出现，当你搬走，你将不得不搬回到它回来。 还有鼠标移动功能，这将激活 每当鼠标甚至在框中。 所以就继续走，淡入淡出。 它实际上是记录 - 好像它只是淡入淡出， 但它实际上是记录了很多比这更多的行动， 所以，当你搬走它会继续下去，因为它像一个三千人登录。 也许不是一千年。也许五年。 它记录不止于此。 问题的关键是，所有的鼠标操作，也有很多人。 你可以阅读其他的，但他们都略有不同， 你可以挑你最需要 任何特定目的，你要怎样做。 

接下来的事情，我要谈的是AJAX。 AJAX，我知道我们没有尽可能多的深度覆盖的JavaScript今年， 所以我只是谈谈AJAX一般一分钟。 AJAX是异步JavaScript和XML。 它基本上是，例如，当你在Facebook和它推动你的通知， 这是因为AJAX的Web浏览器上运行。 您的网页浏览器实际上每几秒钟 Facebook的服务器，要求他们，你有什么新的东西，对我来说， 然后还给你。 这允许你发送请求到服务器 没有实际加载页面。 所以通常情况下，如果你只是使用PHP和数据库， 你必须刷新页面，才可以从服务器得到新的信息。 但是，使用AJAX，你可以拉新的信息不断， 或拉它，当你点击一个按钮或类似的东西。 因此，这使得我们无需重新加载页面发送请求， 我们可以使用GET或POST请求。 

GET请求是，例如，如果你到Google.com 做Q =测试。这是给他们一个查询测试。 这是一个GET请求，因为它在这些参数传递到URL本身。 如果你通过邮寄发送POST请求。 这就像你把它放在一个字母和运送他们， 但他们没有真正看到的内容。他们不是在URL中可见。 你不能直接键入它，你必须把它几乎偷偷。 这是在一个岗位。 但是，使用jQuery，你可以做的GET和POST请求 更容易比你通常可以只使用普通的JavaScript。 可以查询的API使用GET请求，你也可以检查登录信息。 在接下来的页面中，我创造了这个，问，“什么是午餐吗？” 使用哈佛食品API，让我们拉起来。 这仅仅是一个例子，可以如何使用jQuery做一个GET请求的API 并获得信息。 因此，我们希望看到今天的菜单， 我们想看看有什么吃午饭。 这里是在jQuery创建一个GET请求的URL。 您使用$得到的功能。 第一个参数是URL，所以正是你查询。 那么接下来的参数是一个GET请求完成时执行的函数。 所以你发送一些请求到服务器，等待它回来。 当它回来，你要采取一些行动，从服务器返回的数据。 让我们继续前进，并编写这一点。 我没有编码要么目的。 这里的TODO。首先，让我们用事件绑定 这样，当按下这个按钮，我们发送一个GET请求。 而当GET请求返回一些数据， 我们将它写入这顿饭信息ID格。 首先，让我们来选择食物的按钮的ID。 当点击时，我们希望它做的事情。 让我们只是让一个匿名机能的，如前。 可以换那些大括号， 按下此按钮时，我们要发送一个GET请求 检查有什么吃午饭。 要做到这一点，我们就可以键入$。 这是一个jQuery的功能，使用美元符号。 这需要几个参数。第一个是URL， 第二个是回调函数，这就是所谓的功能 当该请求返回。 就让我们先构建URL。 我们可以得到它的API大卫写了。 在这里，我们可以看到，它是food.cs50.net/api/1.3/menus， 然后你只是传递的参数，你会喜欢的名字。 因此，参数1值1。 它看起来像标准的日期，开始日期默认为今天 如果你不输入任何内容，和结束日期也默认 今天，如果你不输入任何东西。 这就是我们想要的。我们希望今天刚刚得到的信息。 

我们想要的格式是JSON。 这只是任意的，你可以使用任何你想要的形式。 您可以使用CSV，但JSON是JavaScript对象符号。 它为JavaScript很容易明白这意味着什么， 我们可以把它打印出来更容易的方式。 因此，我们要求它在JSON和让我们请求午餐。 所以，餐=午餐。只是写网址，我们这里回去。 有菜单。第一个参数是输出= JSON 因为这是我们想要的，分隔参数'。“ 第二个参数是 - 我不记得了。 膳食。我们想要一顿=午餐。 你可以测试这个URL输入到浏览器中去它。 它会给你一些输出。它只是一堆东西，吃午饭。 在这个丑陋格式。我们要打印到我们的网页在一个更好的格式。 因此，URL是正确的，现在我们只需要编写一个函数 时回电请求成功。 此功能将采取实际的说法。它能将数据。 这些数据是回来从GET请求GET请求后完成。 我们可以做的大括号，在这里，我们写的匿名函数 执行时，使用该数据时，我们得到的信息。 所以数据，当我们输入这个网址， 这是什么样的数据是怎么回事的样子。这将是这个庞大的字符串。 但好事是，JavaScript可以解析它使用JSON.parse功能的。 因此，让我们来创建一个新的变量解析数据。 和解析数据是一个对象数组。 每个对象都包含的信息，如 - 好吧，让我们来看看。 它的日期，一顿饭，类别，配方，这一切其他的东西。 因此，让我们为每一个打印出了名。 让我们遍历整个数组的东西，我们回来， 刚刚打印出来的每一个 - 打印出每个人的名字。 这是一个循环。 

JavaScript有这个有用的语法，在这里你可以创建一个数组变量和循环， 变种i是迭代器，所以，而不必做VAR = 0 我是长度小于，我+ +，你可以这样做var目录中解析数据。 在这个例子中，解析出的数据（一）将对应于当前元素 的数组，实际的对象。 我们想要得到出了名的。 因此，让我们只是做名字。 的最后一件事是，我们要再次有一些jQuery。 其实它添加到div，这顿饭资讯目前是空的div中。 因此，让我们选择。 我们将使用jQuery和选择膳食信息的div ID，或饭后信息ID，对不起。 我们要追加到此。 如果我们做了测试，例如，它只是覆盖它每一次。 因此，我们就可以追加。 当前数组中的元素，我们会得到出了名的，它 我们会追加结束了一顿信息ID DIV。 然后只是为了使它看起来更简洁， 我们还会追加一个换行符，所以它不是全部在一行。 因此，如果一切顺利的话，这应该是一件好事 -  首先，只要按一下这个按钮， 它会发送一个GET请求来此URL。 当数据回来时，它会解析它， 把它变成JSON，循环整个数组，表示该数据， 然后追加的名称和一个换行符 原先是空的这顿饭信息ID的每一行。 所以回到这个页面，我们会刷新， 点击，找到了 - 这是行不通的。这是不幸的。 这是在调试的用武之地。 index.html的1号线。 那很有意思。 所有权利，而不是花时间做这个，我只是去 拉起我有完成的文件，这是完成的版本。 我不知道有什么区别，但我们可以打开这件事，而不是。 我们去了AJAX，这应该正常工作。 这就是今天的午餐， 在没有特定的顺序，用引号括起来，所以它不是最漂亮的。 但是，很明显，如果你做这个项目的最后， 你会让它看起来更好。 但是，这只是一个简单的例子，你是怎么做到的GET请求。 如果我们看看实际的代码，我猜，我敢肯定 它仍然是几乎相同的。 哦，我忘了把它转换为一个字符串，就是这样。 没有，它仍然没有工作。无论如何，这里是实际完成的代码 这看起来应该像， 做同样的事情，我只是实施。 当你按一下按钮，它使用自动解析JSON数据。 它采用数据和遍历整个数组  - 无论是今天的午餐，它的名字打印出来， 每一行后追加一个换行符。 这就是你如何使用GET功能。 

您也可以使用POST，这是我没有时间 写了一个例子，但我们可以看看它的文档。 如果你看看jquery.post， 你可以看到，它几乎同样的事情。 你有一个网址，而是通过参数使用 -  只是把他们在字符串的URL本身， 你必须通过在该数据变量 基本上是一个数组，字典映射参数值。 您传递，他们在使用POST发送。 一旦你有，那么你就可以有一个成功的功能 时执行的数据回来。 否则，它是完全一样的。因此，使用POST， 你可能想使用POST，例如，如果你有一个输入表单 你让人家进去，输入密码并发送这些密码关闭 您的后端脚本，在数据库中检查该用户是否是有效或无效。 你可以这样做，所有使用jQuery，而不必刷新页面。 这就是我在博客中，我发现你刚才实施。 如果我们去年底门户和注销，注销， 退出不起作用。 好吧，让我在新窗口中打开它。 这里有一个密码，我正想输入随机的东西。 这是行不通的，但你可以看到，我们没有 其实有刷新页面。 的代码，如果你想看看它， 在这里是所有可用的。 所以我写的代码去年的某个时候。 在这里，你可以看到我们发送POST请求。 我有一个文件叫的login.php在后端， 检查，如果密码是有效的。 我们传递的参数是密码，映射到 目前在这个输入框中输入。 当数据回来，我们检查。 如果数据是假的，那么我们说密码不正确，将其向下滑动， 只是让它消失之后。 否则，我们的管理页面加载。 而这一切都是使用JSON。 在这个多行代码，你就可以将数据传递到后端， 检查它是否是正确的，请检查是否正确登录， 实际响应，重定向到正确的页面的人 或不让他们登录并告诉他们，他们有一个不正确的密码。 所以这是一个例子，你如何可以使用jQuery POST 发送POST请求到后端， 检查是否有人在正确的记录。 

所有的权利，所以这是我有所有的例子，所有的东西，我想掩盖。 这些都是重大的事情，jQuery允许你做： 选择元素，修改它们使用DOM操作， 您可以添加效果，激活在某些事件上的东西， 也非常无缝地做AJAX请求。 所以，谢谢你的到来或观看， 如果你有任何问题，只是让我知道。是吗？ [学生]当你发现，你有JSON后引号中的POST请求， 我只是想知道做什么。 是啊，我明白了。现在的问题是，在这个例子中，我只是表明， 周围的引号的字JSON  -  我只是拉起来了 - 周围的POST功能。 我只是拉来显示。 因此，这里的这个POST请求，并在引号中有此JSON。 这只是定义了我们所期望的输出。 因此，如果我们通过JSON作为预期的数据类型， 它不是一个要求，但是如果我们通过它， 那么数据就会被自动解析为JSON。 所以我们不必调用JSON解析功能， 它会自动发生。 如果你看看在POST的文档， 有这样的数据类型的变量，从服务器上的数据，不同的。 它默认的智能猜测，可能是错的， 所以你可以让它空白，但它只是数据的类型 在编码你使用，无论是JSON或XML或别的东西。 

任何其他的问题吗？ 好的。如果您有任何其他问题，请随时给我发电子邮件 在vshekhawat@college.harvard.edu， 幻灯片和代码可在网上很快。 祝你好运与您的最终项目，希望你使用jQuery。 [CS50.TV]