从 Google 的 CDN 下载 jQuery UI CSS

Question

我计划使用 Google 下载 UI 和 Core 的 jQuery 库。 我的问题是，他们允许我下载 CSS 还是我必须自己托管它？

另外如果我使用Google加载我应该如何加载其他插件？ 我可以将所有插件压缩在一起还是应该将其作为自己的单独文件？

Answer 1

Google AJAX 库 API 包括 jQuery UI（当前为 v1.10.3），还包括流行的主题，如 jQuery UI 博客：

Google Ajax 库 API (CDN)

• 未压缩：http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js

• 压缩：http://ajax. googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

• 主题未压缩：
  黑领带 , 闪电战, 库比蒂诺，dark-hive，dot-luv，茄子，excite-bike，轻拂，hot-sneaks，人性, le-frog，mint-choc，阴天,胡椒研磨机，雷蒙德，平滑度，南街，开始，阳光明媚，swanky-purse，trontastic，ui-darkness，ui-lightness 和 vader。

• 主题压缩：
  黑领带、闪电战, 库比蒂诺 , 暗蜂巢< /a>, 点-luv，茄子，excite-bike，轻拂，热门预告，人性，le-frog，薄荷巧克力，阴，胡椒研磨机，雷蒙德，平滑度，南街，开始，阳光明媚，时髦钱包，trontastic，ui 黑暗度，ui-lightness 和 vader.

Answer 2

jQuery 现在具有 CDN 访问权限：

code.jquery.com/ui/[版本]/themes/[主题名称]/jquery-ui.css

---

并使其成为更简单一点，在这里：

• base: http://code.jquery。 com/ui/1.9.1/themes/base/jquery-ui.css
• 黑领结：http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css
• blitzer：http://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css< /a>
• cupertino: http://code.jquery.com/ui/1.9 .1/themes/cupertino/jquery-ui.css
• 黑暗蜂巢：http://code.jquery.com/ui/1.9.1/themes/dark-hive/jquery-ui.css
• dot-luv: http://code.jquery.com/ui/1.9.1/themes/dot-luv/jquery-ui.css
• 茄子：http://code.jquery.com/ui/ 1.9.1/themes/eggplant/jquery-ui.css
• excite-bike：http://code.jquery.com/ui/1.9.1/themes/excite-bike/jquery-ui.css
• 轻弹：http://code.jquery.com/ui/1.9.1/themes/flick/jquery-ui.css
• 热门-sneaks： http://code.jquery.com/ui/1.9 .1/themes/hot-sneaks/jquery-ui.css
• 人性：http://code.jquery.com/ui/1.9.1/themes/humanity/jquery-ui.css
• le-frog：http://code.jquery.com/ui/1.9.1/themes/le-frog/jquery-ui.css
• 薄荷巧克力： http://code.jquery.com/ui/ 1.9.1/themes/mint-choc/jquery-ui.css
• 阴暗：http://code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css
• 胡椒研磨机：http://code.jquery.com/ui/1.9.1/themes/pepper-grinder/jquery-ui.css
• 雷蒙德： http://code.jquery.com/ui/1.9.1 /themes/redmond/jquery-ui.css
• 平滑度： http: //code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css
• 南街：http://code.jquery.com/ui/1.9.1/themes/south-street/jquery-ui.css
• 开始：http://code.jquery.com/ui/1.9.1/themes/start/ jquery-ui.css
• 阳光明媚： http://code.jquery .com/ui/1.9.1/themes/sunny/jquery-ui.css
• swanky-purse：http://code.jquery.com/ui/1.9.1/themes/swanky-purse/jquery-ui.css
• trontastic：http://code.jquery.com/ui/1.9.1/themes/trontastic/jquery-ui.css
• ui-darkness：http://code.jquery。 com/ui/1.9.1/themes/ui-darkness/jquery-ui.css
• ui-lightness：http://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css
• vader：http://code.jquery.com/ui/1.9.1/themes/vader/jquery-ui。 CSS

Answer 3

Google 在此链接托管 jQueryUI css https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css

如果直接看这段代码，它是使用@import导入css < a href="https://stackoverflow.com/a/1022715/745">这可能会很慢。 您可能希望将导入纳入其各个部分以获得轻微的性能优势：

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css
https://ajax.googleapis。 com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css

Answer 4

正如奥巴马所说“是的，我们可以”。 这是它的链接。 developers.google.com/#jquery

您需要使用

Google< /strong>

ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/jquery-ui.min.js
ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

jQuery CDN

code.jquery.com/ui/[VERSION NO]/jquery-ui.min.js
code.jquery.com/ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

Microsoft

ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/jquery-ui.min.js
ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

在此处查找主题名称 http:// jqueryui.com/themeroller/ 在画廊子选项卡中

。

但我不建议您从 CDN 托管，原因如下。

1. 虽然与其他 CDN 相比，Google CDN 的命中率很高，但仍然很低。（任何 CDN 不仅仅是 google）。
2. 通过 cdn 加载，您将收到 3 个请求，一个针对 jQuery.js，一个针对 jQueryUI.js，一个针对您的代码。 您可能会将其压缩在本地并将其作为单个资源加载。

http://zoompf.com/blog/2010/01 /你应该使用-javascript-library-cdns

Answer 5

我也这么认为。 为什么不？ 如果不提供 CSS 来支持脚本文件，CDN 就不算什么

此链接 表明它们是：

我们发现特别令人兴奋的是
jQuery UI CSS 主题现在是
托管在 Google 的 Ajax Libraries CDN 上。

Answer 6

如果您指的是 jQuery UI css，则可以使用这个：

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

Answer 7

jQuery UI < 1.13 现在被 Google Page Speed Insights 视为安全漏洞。

请改用安全修复的更新版本。 截至 2022 年，这将是 1.13.2

例如：

• https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js

  https:// /ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.min.css

完整的 HTML 标签示例：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>