使用Jquery库的不同方法选择

Question

使用Jquery库的不同方法选择

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>

- Charlie Parker

1

请将 <script src="scripts/jquery-1.6.2.min.js"> </script> 替换为 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</script>，并告诉我们是否有效。 - TryHarder

4

应将 $("disappear") 更改为 $("#disappear")。 - Jared Farrish

2

@JaredFarrish 如果您不喜欢这段代码，我很抱歉。我希望我提问的方式表明我并不打算让其他人来调试我的代码。这绝不是我的意图。我还展示了我为解决问题进行了研究，我希望这能表明我不是一个懒惰的家伙，只是希望别人解决我的问题。但是，我真的想知道我的原始<script>标记出了什么问题，我相信这是一个合法的问题。如果您知道为什么它不能运行，我将非常感激您的答复。原始标记是：<script src="scripts/jquery-1.6.2.min.js"></script> - Charlie Parker

1

+1 @Chicharito。伙计们，试着保持话题一致。楼主只是想学习而已。还没有人生来就会满口金钱符号。说正题，在你的HTML文件保存的文件夹里，是否包含一个名为“scripts”的文件夹，并且里面有一个名为jquery-1.6.2.min.js的正确副本？ - Fabrício Matté

2

@JaredFarrish 如果你找到了一个完全相同的问题并且你同意，那么你可以将其关闭为完全重复。除此之外，在我看来，这是一个非常有效的问题。 - Fabrício Matté

显示剩余33条评论

2个回答

1

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

我猜测可能是以下三种情况之一：

你的jquery文件位于不同的目录中
你从未包含过jquery文件
jquery文件名不是完全相同

如果你在FireBug中检查，我敢打赌这个文件是缺失的。

- JoeCortopassi

1

那正是问题所在！！！我确实有Firebug，但我正在学习如何使用它，所以我猜我不知道如何从Firebug中读取它未工作的信息。但现在我知道如何更好地引用目录了！ :) 非常感谢！ :) - Charlie Parker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tehprofessor · Accepted Answer

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

1.) 当路径以/开头时，它意味着它从根文件夹开始。

2.) 当路径不以/开头时，则表示它相对于当前所在的文件夹开始。

解决方法：

在包含HTML的文件夹内创建一个javascripts文件夹（可以随便命名，例如"js"），并将您的jQuery JavaScript文件放入其中。

然后使用以下路径来引用jquery：

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

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

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

<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é的更正。

如果您没有在Web服务器（例如Apache）后面运行，则绝对路径可能会有一些棘手。这就是为什么它可以在服务器上工作，而在您的计算机上不能工作的原因。

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

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

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