Question

我正在尝试学习jQuery，但我不明白为什么它根本不起作用。我的index.html很简单，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Tutorial</title>
</head>
<body>
    $(function() { alert("Hello world!"); });

    <script src="js/jquery-1.8.0.min.js"></script>
</body>
</html>

我在本地机器上使用XAMPP托管网站，文件结构是这样的，在htdocs下：

XAMPP/xamppfiles/htdocs
...
jquerytuts2/
  index.html
  /js
    jquery-1.8.0.js
    jquery-1.8.0.min.js

jQuery只显示在浏览器中，纯文本。我在Chrome，Safari，Firefox上看过这个，我正在使用运行OSX 10.8.1的2012 MacBook Pro。

Answer 1

在将库包含在文档中之前，您正尝试使用jQuery DOM ready方法（$(function() { ... })）。是的，不要忘记为您的JavaScript使用<script></script>标记：

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Tutorial</title>

    <!-- place your code here: -->
    <script src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
    <!-- and don't forget the tags: -->
    <script>
        $(function() { alert("Hello world!"); });
    </script>
</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Tutorial</title>
</head>
<body>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script>
    $(function() { alert("Hello world!"); });
    </script>
</body>
</html>

说明：因为文档通常从上到下执行，所以在加载jQuery本身之前执行jQuery代码，导致网站爆炸。哦，是的，你忘记在JavaScript代码周围打上<script>标记了。

编辑：还有一些建议：除非你有理由不这样做，否则请将你的javascript放在网站上的任何其他内容之下。这会导致网站加载速度加快。脚本标签有HTML5属性，这使得这种必要的（理论上）。

Answer 3

嘿，你的代码有问题.. 你需要将你的jquery代码放在脚本标记

中

 <!DOCTYPE html>
    <html>
    <head>
        <title>JQuery Tutorial</title>
    </head>
    <body>
<script type="text/javascript">
        $(function() { alert("Hello world!"); });
</script>

        <script src="js/jquery-1.8.0.min.js"></script>
    </body>
    </html>

注意

无需将jquery文件置于顶部，然后调用ready函数。浏览器如何呈现DOM是它下载所有外部文件css，js等..然后它用于内联标记。在这里，因为它已准备就绪，无论您将代码放在页面中的哪个位置都不会产生影响。但是如果你在外部js文件中写了相同的东西然后你在jquery文件之前包含它它肯定会给你一个错误..

jQuery根本没工作？

3 个答案: