jquery.js 文件的位置答案

【问题标题】：location of jquery.js filejquery.js 文件的位置
【发布时间】：2013-01-07 18:10:22
【问题描述】：

我已经创建了一个示例 jsf 应用程序，并且正在尝试使用 jquery。 jquery.js 文件应该位于哪个目录中？网络信息？源代码？我下载了 .js 文件，但它似乎不起作用。我不确定它应该在哪里。

我已更新我的代码以指向 googleapis，但它仍然无法正常工作：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
        $(document).ready(function(){
            $("#p1").mouseenter(function(){
                alert("You entered p1!");
            });
        });
    </script>
    <p id="p1">Enter this paragraph.</p>
</h:body>

【问题讨论】：

标签： jquery jsf

【解决方案1】：

只要您提供正确的文件路径，您就可以将其保存在任何地方。但尽量远离WEB-INF 目录，只保留该目录下的私有文件（用户无法直接访问的文件）。

如果你有web-content目录，请将jquery文件保存在web-content\js目录下，以便通过<path-to-your-app>/js/jquery.js访问。

但是，如果您可以尝试使用 jQuery 的download section 中给出的文件的 CDN 版本。您可以使用Google 或Microsoft CDN。

【讨论】：

【解决方案2】：

没关系，最重要的是你要给出正确的路径。

例如：

<script language="javascript" src='script/jquery-1.6.min.js'></script>

并且您的包含 jquery 的 html 文件必须与脚本文件夹放在一起。

【讨论】：

【解决方案3】：

鉴于您使用的是 JSF2，您可以利用 JSF2 资源管理系统。也就是说，将 CSS/JS/image 资源放到公共 webcontent 的 /resources 文件夹中，如下所示：

WebContent
 |-- resources
 |    |-- css
 |    |    `-- style.css
 |    |-- js
 |    |    `-- script.js
 |    `-- img
 |         `-- logo.png
 :

然后由以下组件提供：

<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />

在您的特定情况下，您需要将其保存为/resources/js/jquery-1.9.0.min.js：

WebContent
 |-- resources
 |    `-- js
 |         `-- jquery-1.9.0.min.js
 :

并引用如下：

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
    <h:outputScript name="js/jquery-1.9.0.min.js" />
</h:head>
<h:body>
    <h:outputScript target="body">
        $("#p1").mouseenter(function(){
            alert("You entered p1!");
        });
    </h:outputScript>
    <p id="p1">Enter this paragraph.</p>
</h:body>

注意：<h:outputScript target="body"> 将自动重定位到 <body> 的末尾，这将早于 $(document).ready() 被命中。

另见：

【讨论】：

【解决方案4】：

只要您提供正确的路径并不重要，目前我们主要使用谷歌托管的 jquery 库。这减轻了一些交通压力..

你可以试试 google hosted library

请注意，您需要在链接前添加 http 或 https ..

【讨论】：

【解决方案5】：

您可以将脚本文件保存在WebResources/WebContent文件夹中（任何资源文件夹，但路径必须正确），

使用h:outputScript加载脚本文件：(Reference)

 <h:outputScript name="js/jquery-1.6.2.js" />

如果您使用的是 RichFaces，则放置路径：

<a4j:loadScript src="resource:///pathToFile/jquery-1.4.2.min.js" />

添加 Google CDN：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

参考：jQuery in xhtml

您的场景：使用如下代码。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <title>Facelet Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
</h:head>
<h:body>
   <script type="text/javascript">
        $(document).ready(function(){
            $("#p1").mouseenter(function(){
                alert("You entered p1!");
            });
        });
    </script>
    <p id="p1">Enter this paragraph.</p>
</h:body>

或者

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $("#p1").mouseenter(function(){
                    alert("You entered p1!");
                });
            });
        </script>

演示：
Live Example1（在正文中添加 google CDN）
Live Example2（在标题中添加 google CDN）。

【讨论】：

【解决方案6】：

在您的 Web 应用程序中添加文件夹 resources 下一个文件夹 js 下一个由您的 JavaScript 文件命名为 jquery.js 的文件夹，并在此有效 JavaScript 文件中，其名称与版本的语法匹配，例如 1_6.js。

因此，对于您的示例，它将是：

<your_web_app>/resources/js/jquery_min.js/1_6.js

这是一个正确的 JSF 方式。现在您可以在您的 jsf 页面中使用：

<h:outputScript library="js" name="jquery_min.js"/>

所有版本都将由 JSF Framework 管理。如果您将下一个版本（可能是 1_7 名为 1_7.js 的文件添加到您的 jquery_min.js 文件夹中，那么 JSF 将自动从上述代码调用该版本的文件。

【讨论】：

这是资源库使用不当：stackoverflow.com/questions/11988415/…就用<h:outputScript name="js/jquery_min.js"/>
请用几句话告诉我为什么？我在此链接中阅读了您的问题和自我回答；）仍然无法理解您的想法？
"js" 不代表正确的库名称。
为什么？请参阅 JSF 2.2 规范第 75-81 页（自 2012 年 12 月 7 日起）。为什么规范作者images 是库的好名字并用作示例，而您说js 或javascript 不好？这难道不是网络应用程序开发人员决定如何命名库的情况吗？
肯定会奏效的。这不是技术问题。功能问题是，如果所有组件库都使用“js”之类的过于笼统的术语来表示其 JS 文件的集合，如果需要，您将在资源处理程序中如何区分组件库供应商？

【解决方案7】：

您可以将 jquery 库放在 Web 应用程序的 resources 文件夹内的 WebContent 目录中。

WebContent
   ->resources->js->jquery-latest-version.js

您可以通过指定将 jquery 包含在 JSF 页面中，

<h:outputScript name="js/jquery-latest-version.js" />

在 html 中 <head> 或页面底部。

【讨论】：

这是资源库使用不当：stackoverflow.com/questions/11988415/…就用<h:outputScript name="js/jquery-latest-version.js" />