Question

我正在开发一个使用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现在不起作用了......我做错了什么？

Answer 1

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

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

注意：在HTML 5中，不需要type属性。

Answer 2

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

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

Answer 3

尝试

<!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>

Answer 4

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

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

Answer 5

看起来，你可能在你的script.js中包含了jquery错误的方式......但你可以链接两个或更多脚本，所以为什么不使用：

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

如何在我的网页中使用外部JavaScript文件？

5 个答案: