道格·劳埃德:在这段视频中,我们希望 召唤出不同的关注 一个非常特殊的 JavaScript的元素 你可能会发现得心应手 你开始的时候 工作在操纵网页和 改变你的网页的内容 上飞。 这就是概念 文档对象模型。 所以当我们在视频上看到 JavaScript中,对象是非常灵活的。 同样也可以包含各种领域。 虽然我们没去成很多 细节,这些字段或属性, 那我们可能更多 适当地给他们打电话 在一个对象的情况下,甚至 这些属性可以是其它的目的。 而这些对象的内部 可以是其它的目的。 你有这非常大的对象 与很多其他对象 里面的吧,这之类的 造成这种想法的一棵大树。 现在,文档对象是一个 在JavaScript中非常特殊的对象 ,组织您的整个网络 在这种伞的页面 的一个目的。 等内的文件的 对象是对象呈现 你的网页的头部和身体。 这里面的其他 对象,等等,等等, 直到你的整个网页都有 被组织在这个大目标。 什么是上攻这里,对不对? 好了,我们知道如何工作 在JavaScript对象。 因此,如果我们有一个对象 指的是我们整个网页,即 是指通过调用正确的 方法来操作对象 或修改某些 其特性,我们 可以改变的元件 我们的网页编程 使用JavaScript,而不必 编写东西,比如说HTML。 所以这里有一个例子 很简单的网页,对不对? 它有HTML标签,一个头。 里面有一个标题,你好世界。 然后,我有一具尸体。 里面的,我有 三个不同的事情。 我有h2标题标签, 一个段,和一个链接。 这是一个非常简单的网页。 那么,可能的文件 反对这个样子? 嗯,这是一个小 可怕的也许在第一。 但它实际上只是一棵大树。 而在它的根源是文档。 内的文件是另一个 对象指的是我的网页的HTML。 而我的网页的HTML是这一切。 然后里面的HTML 对象,我有一个头的对象, 它指的是那里的一切。 而且还有里面, 我有一个标题对象。 而且还有里面,我有另一个 反对这只是世界你好。 我可以有我的身体 表示如下。 在我的身体,我有一个H2 对象和第一个p对象 和链接的一个对象。 所以这整个层次 可以表示为一棵大树 有很多小一点的 东西出来吧。 现在,当然时, 我们在编程时,我们 没有想到的事情像一棵大树。 我们希望看到实际的 代码相关的东西。 幸运的是,我们可以 使用我们的开发工具 实际看一看 此网站的文档对象。 而且我们做到这一点。 所以,我已经打开了一个浏览器标签。 我已经打开了开发工具。 而在我的视频上的JavaScript,我 提到的是,控制台是不 只有放在安全的位置 我们打​​印的信息, 它也是一个地方 我们可以输入信息。 在这种情况下,什么 我要说的是 我想找回 文档对象, 这样我就可以开始看看吧。 所以,我怎么可以这样做? 好吧,如果我想 组织它真的很好, 我会说console.dir,D-1-R。 现在,我使用的console.log只是打印 出来的东西很简单。 但是,如果我想组织这样 分层像一个对象, 我想,它像是结构 像的目录结构。 所以我想console.dir文件。 我要敲回车。 而正下方,现在, 我会放大在这里, 我有这个响应文件 与它旁边的小箭头。 现在,当我打开这个箭头, 还有的将是一个很大的东西。 但是,我们会忽略了很多 它和公正的一种重点 在最重要的一部分,所以我们 可以开始浏览这个文件。 还有很多更重要的DOM比 只是父节点和子节点。 有很多附属的东西。 所以,我要打开这个了。 还有一大堆 东西弹出。 但是,我所关心的是 在这里,子节点。 让我们打开了。 里面还有我看到 一些熟悉的东西,HTML。 因此,我们的文档里面 下一级别的HTML。 我打开了。 我们有什么期待? 如果从图中我们还记得, 我们应该怎样HTML里面找? 哪两个节点是在它下面的树? 让我们来看看。 我们打​​开HTML。 我们去到其子节点。 弹出打开。 有头部和身体。 我们可以打开头。 转到其子节点。 嗯,有标题。 而且我们可以继续下去 就这样永远。 我们可以用身体做的这一点。 但是,有一种方法让我们来看看 组织作为一个大对象的文档。 如果我们看一下是个大 对象看起来很 像代码,这意味着我们可以开始 通过操纵这个大目标 代码改变了我们的 网站的外观和感觉。 所以这是一个非常强大的工具 我们有我们所掌握了。 所以,正如我们刚才看到的 文档对象本身 和所有的其内的对象的 具有属性和方法,只是 像我们已经其他对象 一直与在JavaScript中。 但是,我们可以利用这些特性, 使用这些方法排序的深入 从大的文档,并得到 下限和低, 越来越细晶粒 细节,直到我们 得到一个非常特殊的一块我们 我们要改变的网页。 而当我们更新的属性 文档对象或调用这些方法, 事情可能发生在我们的网页上。 而且我们不需要做任何令人耳目一新 让这些更改生效。 这是一个很酷的能力, 当我们正在处理的代码有。 那么,什么是其中一些属性 这是一个文档对象的一部分? 好吧,你可能看到一个 他们夫妇真的很快 因为我们是荏苒 通过巨大的文件 对象,我们在Web浏览器中刚刚看到。 但一对夫妇的这些属性 可能会像内部HTML。 你甚至可能还记得我 在JavaScript中的视频使用此 在最后的时候我 在谈论事件。 什么是这种内在的HTML? 好吧,这只是什么 在标记之间。 等内部HTML, 例如,标题的 标签,如果我们继续前进的 这个例子刚才, 本来世界你好。 这是我们的页面的标题。 其它性能 包括节点名,其中 是HTML的名称 元素如标题。 ID,它是ID HTML元素的属性。 回想一下,我们可以专门指示 我们的HTML中的具体内容 有一个ID属性,通常 就派上用场了在CSS的背景下, 特别。 父节点,这是一个参照 什么是刚起来比我高的DOM。 和子节点,这是一个 参考什么是下来我下面。 我们看到了很多的 只是翻翻。 子节点,这就是我们得到了 再降到树。 属性,这只是一个数组 属性的HTML元素。 所以属性的例子可能 如果你有一个形象的标签是, 它通常有一个源属性, 也许一高度和宽度属性。 所以这也只是一个数组 所有关联的属性的 与HTML元素。 风格是另外一个, 确实代表了CSS 造型特定元素。 后来就在这 视频中,我们会特别 杠杆式的,使一对夫妇 变化到我们的网站。 因此,这些都是一些属性。 而也有一些 方法我们就可以 使用也更迅速,也许隔离 文档对象的元素。 也许,最通用的 这些是的getElementById的。 所以,我可能会这样说,是因为 记住它的文档的方法 对象的document.getElementById。 而那些括号内,指定 通过特定的ID的HTML元素 属性是我以前 定,我马上 向右走该元素 整个网站。 所以,我没有可能钻 上下贯通的每一层。 我就可以用这个方法来找到它, 有点像热寻的导弹, 对? 它只是和发现 正是它的寻找。 的getElementsByTagName是 非常相似的精神。 这也许会发现所有的 大胆标记或所有的p标签 并给了我一切的数组 我可以再与工作。 的appendChild增加了一些 上一级树上下来。 所以,我可以添加一个全新的 元素一个水平。 或者,我可以删除元素的 低一个级别,以及如果我想 要删除我的网页的东西。 现在,一个快速的编码说明和快速 节能头痛笔记,希望。 getElementById--的d为小写。 我不能告诉你我有多少次 使用的getElementById和资本化 对D那里。 因为它真的很普遍。 如果我们写的字ID,它是 通常我的资本资本D. 而我的代码是行不通的。 我想不通为什么。 这是真的,真的,真的 常见的错误,每个人都会, 即使是专家有 一直这样做下去。 所以要知道,的getElementById, 使得d是小写。 并希望,这可以节省数 至少心痛分钟。 那么,是什么这一切告诉我们什么? 我们有这些方法。 我们有这些属性。 现在,如果我们从开始 文档,文档。 什么,我们现在可以去任何 单件我们的网页 我们要使用JavaScript 只是通过调用这些方法 并利用属性 我们发现在各种位置。 这可以得到罗嗦,这 的document.getElementById, 也许有很长的标签名, 也许你以后做更多的电话。 事情可能会变得有点罗嗦。 而作为程序员,因为你已经 可能看到很多这样的视频, 我们不喜欢罗嗦的东西。 我们希望能够快速地做事情。 所以,我们想的更 简洁的方式说些什么。 所以这种动态到的 的一些概念叫jQuery的。 现在,jQuery是不是JavaScript的。 这不是JavaScript的一部分。 这是写的一个库 一些JavaScript程序员 大约10年前。 而它的目标是简化什么 所谓的客户端脚本,这 基本上我们是什么只是 谈到与DOM操作。 所以,如果我想修改 我的网页背景颜色,也许 具体的股利。 在这里,我显然得到 ElementById colorDiv。 我想设置它的背景色。 如果我只是用纯JavaScript 使用文档对象模型, 这是一个很多东西,对不对? 的document.getElementById colorDiv.style.backgroundColor =绿色。 呼。 这是一个有很多话要说。 这是一个很多键入。 所以在jQuery中,我们也许可以说, 这一点更简洁。 在权衡是它也许有点 更多的神秘突然, 对? 至少长是有点多 解释性以我们正在做什么。 这个美元符号,括号, 单引号,哈希,colorDiv,对不对? 这意味着什么? 好吧,这基本上只是 的document.getElementById colorDiv。 但它的这种速记 做它使用jQuery的方式。 就让我们来看看现在 在几种不同的方法 我实际上可能 使用该文档对象 型号操纵我的网站作品。 特别是,我们要去 是工作在操纵 的一个特定的颜色 事业部,colorDiv,在网页上。 因此,让我们来看看这一点。 好吧。 所以我在页面上。 这就是所谓的test.html的,当你下载 这一点,如果你想鼓捣这个。 我有一堆的 此页面上的按钮。 而我要说的各个功能 为背景色,紫色,绿色, 橙色,红色,蓝色,一个单一的功能 作为背景色,事件处理 作为背景色,并使用jQuery。 我是什么说什么 当我这样做呢? 因此,我们已经看到了按钮。 现在,让我们来看看 这里的一些源代码。 我们将开始与test.html的。 为背景,使各个功能 颜色是我在这里输入。 让我滚动一点点。 而且你会发现,我 定义这些按钮 要说单击此按钮时, 调用变成紫色的功能。 当这个按钮被点击,相反, 调用函数变成绿色, 变为橙色,变红,发紫。 你可能已经猜到,这 也许不是最好的设计 某种意义上说,对不对? 如果我能这将是很好 有一个更通用的方法。 嗯,首先我们来看看 什么这五个功能 的document.getElementById colorDiv.style.background =紫, 绿,橙,红, 和蓝色,分别。 所以,没有特别的最好的设计。 下一组按钮 我已经是我写 称为单功能 改变颜色,显然 接受字符串作为它的参数。 所以这是一个更好一点。 紫,绿,橙,红, 蓝现在是一个说法。 所以,我写了一个更普遍 案例JavaScript函数, 这可能会是这个样子。 我通过研究。 这个功能的改变颜色 期待所谓的颜色参数。 而我要说的设置 背景颜色以颜色。 所以在这里代表我在这里得到了什么。 所以这是一个好一点。 不过,我也许能 做的更好。 如果我们下去看看 在事件处理程序的情况下, 现在所有这些调用看起来是一样的。 如果你还记得我们的 在事件处理程序的讨论, 我可以得到哪些信息 这些按钮被点击并使用它。 因此在event.JavaScript,我已经 书面变更色彩的事件,这 计算出该按钮被点击。 这是触发对象行。 然后在这里,它变得非常罗嗦。 但是我在做什么是我 设置背景 颜色triggerObject inner.HTML。 这是在文本 按钮标记之间。 然后,我显然有 将其设置为小写。 这就是我可以把整个 字符串使用JavaScript的小写 该方法为小写。 因为当我设置颜色, 因为我想在这里做, 颜色必须全部小写。 但是,我有按钮, 如果我们再看看, 注意到文本有 写一个大写P表示紫色。 然后在最 底部在这里,我明显 尝试做到这一点使用jQuery为好。 在这种情况下,我不竟 调用一个函数的。 我刚才说的类,我 使用此按钮是一个JQ按钮。 而已。 那么,如何jQuery的知道我在做什么? 那么,这是一个优点 削减jQuery的缺点。 它可以让我做的事情 很简洁,但也许不是 为直观。 也许那些其他三个做 一点感觉我在做什么。 在这里,虽然,这是怎么回事? 显然,创建 匿名函数 ,加载每当我的文档 准备好了,那么的document.ready, 有些功能会发生什么。 基本上,当是文档准备好了吗? 这是当我的页面加载。 所以,只要我的页面加载时, 下面的功能是时刻准备着。 它说,如果类型jQButton的对象, 如果类jQButton已被点击, 执行该功能。 因此,这里的两个匿名函数, 一个在另一个的内部限定。 所以,我的整个背景 到这里为止是我的网页 在加载时调用此函数。 并且这个功能是在等待 为一个按钮被点击。 并且单击一个按钮时,JQ 按钮特别被点击, 它调用此等 功能,这是怎么回事 设置背景 colorDiv的颜色为 无论文本是在标记之间。 这是的概念 该按钮被点击。 但除此之外,这是有点 行为类似于事件。 这只是以同样的方式我 会表达这种jQuery中。 再次,它可能是一个 很多吓人。 这不是一样清晰 像event.js, 这也许是一点点 详细,但有点少 恐吓。 但是,如果我们弹回过我的浏览器 窗口,如果我开始clicking--好, 即改为紫色。 这是一个绿色的使用字符串的方法。 这是橙色使用的事件处理程序。 这是红色的使用jQuery的,对不对? 他们都表现得一模一样。 他们只是做它用不同的 接近要解决的问题。 还有很多更 jQuery的话我们肯定 要谈谈在这个视频。 但是,如果你想了解更多,可以 去jQuery的排序文件 并了解了很多关于 这个非常灵活的库,它 是非常适合做客户端 脚本如我们在做什么 操纵它的外表 感觉我们的网页 与文档对象模型。 我是道格·劳埃德。 这是CS50。