[关闭]
@mdjsjdq 2015-09-16T07:48:31.000000Z 字数 3153 阅读 1835

JavaScript库

JavaScript

JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。为了应对这些调整，许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。

所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。在本教程中，您将学习到如何开始使用它们，来使得 JavaScript 编程更容易、更安全且更有乐趣。

jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。

Prototype

Prototype 是一种库，提供用于执行常见 web 任务的简单 API。API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。Prototype 通过提供类和继承，实现了对 JavaScript 的增强。

MooTools

MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。MooTools 也含有一些轻量级的效果和动画函数。

CDN - 内容分发网络

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小，同时您希望浏览器尽可能多地进行缓存。如果许多不同的网站使用相同的
JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。CDN (Content Delivery
Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  2. </script>

测试框架

在您决定为网页使用 JavaScript 框架之前，首先对框架进行测试是明智的。JavaScript 框架很容易进行测试。您无需在计算机上安装它们，同时也没有安装程序。通常您只需从网页中引用一个库文件。在本教程的下一章，我们会为您完整地讲解 jQuery 的测试过程。

jQuery 描述

主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

在 JavaScript 中，您可以分配一个函数以处理窗口加载事件：

  1. function myFunction()
  2. {
  3. var obj=document.getElementById("h01");
  4. obj.innerHTML="Hello jQuery";
  5. }
  6. onload=myFunction;

等价的 jQuery 是不同的：

  1. function myFunction()
  2. {
  3. $("#h01").html("Hello jQuery");
  4. }
  5. $(document).ready(myFunction);

在CmdMarkdown差异化显示文档字体对象的方法

  1. <input type="button" value="Js对象">

上面代码的最后一行，HTML DOM 文档对象被传递到 jQuery ：$(document)。
当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。

jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。
由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法，与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。

测试 jQuery

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  6. </script>
  7. <script>
  8. function myFunction()
  9. {
  10. $("#h01").html("Hello jQuery")
  11. }
  12. $(document).ready(myFunction);
  13. </script>
  15. </head>
  16. <body>
  17. <h1 id="h01"></h1>
  18. </body>
  19. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  6. </script>
  7. <script>
  8. function myFunction()
  9. {
  10. $("#h01").attr("style","color:red").html("Hello jQuery")
  11. }
  12. $(document).ready(myFunction);
  13. </script>
  15. </head>
  16. <body>
  17. <h1 id="h01"></h1>
  18. </body>
  19. </html>

正如您在上面的例子中看到的，jQuery 允许链接（链式语法）。链接（Chaining）是一种在同一对象上执行多个任务的便捷方法。

AMD 异步模块规范

AMD 规范是JavaScript开发的一次重要尝试，它以简单而优雅的方式统一了JavaScript的模块定义和加载机制，并迅速得到很多框架的认可和采纳。这对开发人员来说是一个好消息，通过AMD我们降低了学习和使用各种框架的门槛，能够以一种统一的方式去定义和使用模块，提高开发效率，降低了应用维护成本

JavaScript 概要

本教程中我们向您讲授了如何向 html 页面添加 JavaScript，使得网站的动态性和交互性更强。你已经学习了如何创建对事件的响应，验证表单，以及如何根据不同的情况运行不同的脚本。你也学到了如何创建和使用对象，以及如何使用 JavaScript 的内置对象。

HTML 测验

  1. 6.请选择产生粗体字的 HTML 标签：
  2. 您的回答：<bold>
  3. 正确答案：<b>
  5. 9.如何制作电子邮件链接？
  6. 您的回答：<mail href="xxx@yyy">
  7. 正确答案：<a href="mailto:xxx@yyy">
  9. 10.如何在新窗口打开链接？
  10. 您的回答：<a href="url" target="new">
  11. 正确答案：<a href="url" target="_blank">
  13. 16.在下列的 HTML 中，哪个可以产生文本框？
  14. 您的回答：<input type="textfield">
  15. 正确答案：<input type="text">
  17. 17.在下列的 HTML 中，哪个可以产生下拉列表？
  18. 您的回答：<input type="dropdown">
  19. 正确答案：<select>
  21. 18.在下列的 HTML 中，哪个可以产生文本区（textarea）？
  22. 您的回答：<input type="textarea">
  23. 正确答案：<textarea>
  25. /*---
  26. 20.在下列的 HTML 中，哪个可以插入背景图像？
  27. 您的回答：<body background="background.gif">
  29. 5.在下列的 HTML 中，哪个可以添加背景颜色？
  30. 您的回答：<body bgcolor="yellow">
  31. ---*/

HTML 测验

  1. // 19.如何在浏览器的状态栏放入一条消息？
  2. /*您的回答：*/ window.status("put your message here")
  3. /*正确答案：*/window.status = "put your message here"
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注