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

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

javascript jquery html

如何在我的网页中使用外部javascript文件？,javascript,jquery,html,Javascript,Jquery,Html,我正在开发一个使用HTML和jQuery的网页。起初，我将所有内容都放在同一个文件中，如下所示： <!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding">

我正在开发一个使用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>

然后在

标记中编写我的脚本

然而，我发现我可以将我的

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>


订阅类别
类别1

类别2

类别3

类别4

类别5


点击我

如您所见，我使用以下行导入CSS和jQuery：

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

及

但是，我的jQuery现在无法工作。。。我做错了什么？

您需要同时引用jQuery和您自己的脚本文件，顺序如下：

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

注意：在HTML 5中，

类型

属性不是必需的。

您仍然需要在自己的脚本之前放置以下行以包括jQuery：

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

像这样试试看

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


订阅类别
类别1

类别2

类别3

类别4

类别5


点击我

好吧，您忘了在第二种情况下包括jQuery。简单地加上

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

看起来，您可能以错误的方式将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>

为什么您的新解决方案中没有jquery导入？当我把它放进去时，我导入实际的.js文件的那一行变为“灰色”，好像不再是该语言的命令了。不管怎样，我已经导入了，但它仍然不起作用。在导入.js文件之前，我刚刚添加了在google chrome或firefox（使用firebug）中打开你的页面，并查找错误：）在G chrome中，右键单击并“检查元素”（页面上的任何位置），新窗口将在新窗口的右侧弹出，在底部会有红色感叹号单击它并读取你的错误。这就是“为什么”。很明显，在使用jQuery之前必须包含它，不是吗？确保您的

script.js

文件是有效的JavaScript，即它不应包含

标记。另外，.每个脚本导入必须如下：

错误在于我没有使用标签来导入jquery。因此，当我试图在它之后导入.js文件时，它崩溃了。非常感谢，先生。现在我正确地关闭了标记，可以正常工作了

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

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