1

我正在开发一个使用 HTML 和 jQuery 的网页。一开始，我将所有内容都放在同一个文件中：

<!DOCTYPE html> 
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
        </script>

        <script>
                Here goes my jquery ...
        </script>
    </head>  

    <body>
    <h1>Subscribe To Categories</h1>
    <form>
        <input type="checkbox" id="category1">Category1<br>
        <input type="checkbox" id="category2">Category2<br>
        <input type="checkbox" id="category3">Category3<br>
        <input type="checkbox" id="category4">Category4<br>
        <input type="checkbox" id="category5">Category5<br><br>                 
    </form> 
    <button>Click me</button>   
</body>

这是一个简单的复选框页面，很简单jQuery。正如你所看到的，我做了两件事：
1）用这一行导入 jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

然后在<script>标签内写我的脚本。

但是，我看到我可以将我的JavaScript和保存CSS在外部文件中，然后将它们简单地导入我的项目。

我创建了一个script.js文件，并在其中放入了所有 jQuery 代码。然后我的 HTML 看起来像这样：

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">

        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>

    <body>
        <h1>Subscribe To Categories</h1>
        <form>
            <input type="checkbox" id="category1">Category1<br>
            <input type="checkbox" id="category2">Category2<br>
            <input type="checkbox" id="category3">Category3<br>
            <input type="checkbox" id="category4">Category4<br>
            <input type="checkbox" id="category5">Category5<br><br>                 
        </form> 
        <button>Click me</button>   
    </body>


</html>

如您所见，我使用这些行导入 CSS 和 jQuery：

<link rel='stylesheet' type='text/css' href='stylesheet.css'/>

和

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

但是我的 jQuery 现在不起作用了……我做错了什么？

4

5 回答 5

3

您需要按顺序引用 jQuery 和您自己的脚本文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>

注意：在 HTML 5 中，该type属性不是必需的。

于 2013-05-29T08:26:18.430 回答
0

您仍然需要在您自己的脚本之前添加以下行以包含 jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-05-29T08:27:14.457 回答
0

试试看

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
        </script>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <h1>Subscribe To Categories</h1>
        <form>
            <input type="checkbox" id="category1">Category1<br>
            <input type="checkbox" id="category2">Category2<br>
            <input type="checkbox" id="category3">Category3<br>
            <input type="checkbox" id="category4">Category4<br>
            <input type="checkbox" id="category5">Category5<br><br>                 
        </form> 
        <button>Click me</button>   
    </body>
</html>
于 2013-05-29T08:27:25.750 回答
0

好吧，您忘记在第二种情况下包含 jQuery。只需添加

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-05-29T08:27:28.767 回答
0

看来，您可能以错误的方式将 jquery 包含到您的 script.js 中……但是您可以链接两个或多个脚本，所以为什么不使用：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
于 2013-05-29T08:28:36.587 回答