3

我想知道如何使 Jquery 库工作。在提出这个问题之前，我当然对此进行了研究，并且我有一本书建议执行以下操作：

<script src="scripts/jquery-1.6.2.min.js"><script>

但是，出于某种原因，即使这样，我页面上的内容也不会响应我的代码。所以我很困惑。我尝试的是，将我正在处理的文件移动到与 jquery-1.6.2.min.js 相同的目录，因为 jquery 是一个 js 库，但没有工作。我想知道它可能是什么？我已经像疯了一样搜索语法错误，所以我真的怀疑这就是问题所在。我想知道我做错了什么？我能想到的唯一其他选择是使用网站标签（我还没有尝试过）：

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

或者

<head>
  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery- 1.6.2.min.js"></script>
</head>

我想避免这种情况，因为我在工作时不想依赖网络，我们永远不知道...谢谢！

顺便说一句，这是完整的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery goes to DOM-ville</title>
    <style>
      #change_me {
        position: absolute;
        top: 100px;
        left: 400px;
        font: 24px arial;
      }
      #move_up #move_down #color #disappear { padding: 5px; }
    </style>
    <script src="scripts/jquery-1.6.2.min.js"></script>
  </head>
  <body>
    <button id="move_up">Move Up</button>
    <button id="move_down">Move Down</button>
    <button id="color">Change Color</button>
    <button id="disappear">Disappear/Re-appear</button>
    <div id="change_me">Make Me Do Stuff!</div>
    <script>
      $(document).ready(function() {
        $("#move_up").click( function() {
          $("#change_me").animate({top:30},200);
        });//end move_up
        $("#move_down").click( function() {
          $("#chage_me").animate({top:500},2000);
        });//end move_down
        $("#color").click( function() {
          $("#change_me").css("color", "purple");
        });//end color
        $("disappear").click( function(){
          $("#change_me").toggle("slow");
        });//end disappear
      });//end doc ready
    </script>
  </body>
</html>
4

2 回答 2

3

问题很可能是路径...您只是使用 HTML 页面吗？如果是这样，有几点需要注意：

1.) 当路径以 a 开头时/，表示它从根文件夹开始。

2.）当路径不以 a 开头时，/这意味着它将相对于它所在的当前文件夹开始。

修理：

在包含您的 html 的文件夹中，创建一个 javascripts 文件夹（您可以将其命名为任何名称，例如“js”），然后将您的 jquery javascript 文件放入其中。

然后将其用于 jquery 的路径：

 <script type="text/javascript" src="/javascripts/jquery.min.js"

这将引用绝对路径，因此如果稍后您在嵌套文件夹中有 html 文件，它不会查看相对路径，而是查看绝对路径。

同样，如果您想在有互联网时使用谷歌版本，而在没有互联网时使用本地版本，您可以使用以下代码段：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>  
<script type="text/javascript">
    window.jQuery || document.write("<script src='/PATH/TO/jquery.js'><\/script>")
</script>

附录：

修复了帖子以反映 Fabrício Matté 的更正。

如果您没有在网络服务器（例如 apache）后面运行，绝对路径可能会变得有点奇怪。这就是为什么它可以在服务器上运行，而不是在您的计算机上运行。

如果你在本地运行它，没有网络服务器（不要这样做，安装 MAMP 或 XAMP、Apache、nginx、IIS，任何东西......），你需要指定完整路径：

Mac：/Users/yourusername/Sites/website/index.html

PC: C:/somethign/something/else/index.html

于 2012-07-07T00:22:45.540 回答
2

您的页面（您复制所有代码并向我们展示的页面）是否与名为“scripts”的目录位于同一目录中？在那个“脚本”目录中，你有一个名为“jquery-1.6.2.min.js”的文件吗？

我的猜测是正在发生的三件事之一：

  1. 您的 jquery 文件位于不同的目录中
  2. 您从未包含过 jquery 文件
  3. jquery文件名不完全相同

如果你签入 FireBug，我敢打赌这个文件不见了

于 2012-07-07T00:19:26.837 回答