Question

我从头开始编码并使用Aptana Studios。我只学会了通过Codeacademy网站编码，所以虽然我可以编码，但我不熟悉使用Aptana等程序，链接文档和术语。所以，我提前为这个问题的长度道歉。简而言之，我想要一个完整的解释关于如何“安装”jQuery 。我不确定在这种情况下“安装”是否是正确的选择，所以我在下面提供了一个更详细的问题说明。

当我编写自己设置的网页任务的HTML和CSS时，一切都很顺利 - 当我需要使用jQuery时遇到了问题。我想用的代码是：

$(document).ready(function(){
    $('table').hide();
});

^^（只是包括我在某处犯了一个愚蠢的错误）^^

我认为将Javascript文件链接到HTML的方式有问题，或者我无法正确“安装”jQuery。这就是我访问jQuery所做的：

我将jQuery站点中的代码复制到.js文档中，并将其保存在保存所有HTML和CSS文档的同一文件夹中。然后我将它链接到这样的HTML：

<script type='text/javascript' src='jquery.js'></script>

我完全无法找到任何类型的教程来解释如何详细完成这项工作。甚至jQuery网站的解释对我来说也显得模糊不清。

在此之后，我使用以下方法将自己的代码链接到我的HTML：

<script type="text/javascript" src="barns.js"></script>

当它没有成功时，我并不惊讶，所以我继续寻找答案，但我什么都没回来。这可能更多地与我如何被教授编码而不是缺乏解释 - 即使在这个问题上我对编码词汇的小知识也很明显 - 但是相信我，我想做的最后一件事就是问自己所以我真的不会这样做，除非我真的用完了选项。

Answer 1

有多种方法可以在页面中包含jQuery。您可以像这样使用CDN：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

或者通过使用本地副本并将其包括在内来实现它。

<script type='text/javascript' src='jquery.js'></script>

请注意，要使用第二种方法，必须确保脚本的路径正确。所以上面的代码说jquery.js与正在查看的页面位于同一目录中。接下来，您必须确保名为barns.js的自定义脚本也位于同一目录中，并且声明在jQuery声明之后出现。

<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript" src="barns.js"></script>

最后要记住一些提示：

使用浏览器的开发人员工具查看控制台以查看任何错误。如果您不知道这是什么，Google吧。
使用console.log在开发人员工具中将内容打印到控制台，以确保正在运行代码的某些部分。这是一种非常有用的调试技术。例如，您可以将console.log('in script');放在自定义JS脚本的顶部，以确保正确引入脚本。这可以帮助消除由于脚本路径错误导致的错误。
使用jQuery documentation。太棒了！
实验并玩得开心！

Answer 2

添加jQuery的最简单方法（因为它也是一个不错的选择）是使用cdn，如cdnjs.com：

在结束男孩标记（</body>）之前添加此行：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

使用CDN时，不需要在本地下载jQuery JavaScript文件，因为它托管在cdn服务器上。因此，它消除了对本地js文件的正确路径的需要 - 这是为什么你得到'未捕获的参考错误：$未定义'错误的原因。

有关CDN的更多信息：
http://en.wikipedia.org/wiki/Content_delivery_network

Answer 3

一个快速简单的工作示例，它使用jQuery隐藏表：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>jQuery</title>
  </head>
  <body>
    <h1>Red table should not be visible</h1>
    <table style="background: red;">
      <tr><td>If you see this, jQuery is not working</td></tr>
    </table>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      jQuery( function( $ ){
        $( 'table' ).hide();
      });
    </script>
  </body>
</html>

您的代码可能无法正常运行，因为未加载脚本（src属性不正确）

安装jQuery - 我错过了什么？

3 个答案: