jquery.js文件的位置

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

我已经更新了我的代码以指向谷歌APIS，但它仍然不起作用：

<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>

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

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

但是，如果您可以尝试使用jQuery下载部分中给出的文件的CDN版本。您可以使用谷歌或Microsoft CDN。

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

例如：

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

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

鉴于您使用的是 JSF2，您可以使用 JSF2 资源管理系统。也就是说，将CSS/JS/图像资源放在公共Web内容的文件夹中/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()更早被击中。

另请参阅：

如何在小面模板中引用 CSS/JS/图像资源？
JSF 资源库的用途是什么，应该如何使用它？
具有共享代码的多个 JSF 项目的结构

只要

你提供正确的路径就没关系，目前我们主要使用谷歌托管的jQuery库。这减轻了一些交通压力..

你可以试试谷歌托管库

请注意，您需要在链接前放置HTTP或HTTPS。

您可以将

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

使用h:outputScript加载脚本文件：（参考）

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

放置路径（如果您使用的是富面孔）：

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

添加谷歌 CDN：

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

参考：xhtml

中的jQuery您的方案：使用如下所示的代码。

<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>

演示：
实时示例1（在正文中添加谷歌CDN）
实时示例2（在标题中添加谷歌CDN）。

在您的 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 将自动从上面的代码调用该版本的文件。

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

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

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

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

在 HTML <head> 中或页面底部也是如此。

另请参阅：

相关内容

最新更新

热门标签：