如何将 JavaScript 文件链接到 HTML 文件?

IT技术 javascript jquery html
2021-02-09 09:52:24

如何正确地将 JavaScript 文件链接到 HTML 文档?

其次,如何在 JavaScript 文件中使用 jQuery?

6个回答

首先,您需要从http://jquery.com/下载 JQuery 库,然后在您的 html head 标签中按以下方式加载 jquery 库

然后您可以通过在 jquery 加载脚本之后编写 jquery 代码来测试 jquery 是否正常工作

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

如果你想单独使用你的 jquery 脚本文件,你必须在 jquery 库加载后以这种方式定义外部 .js 文件。

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

实时测试

太感谢了。这正是我最终想出的答案!我知道这个问题很初级,但我感谢你花时间向我展示这个!我缺少的是将 jQuery 库放在 javascript 文件之前!
2021-03-24 09:52:24
为什么我们不能把库放在脚本之后?我可以将 js 脚本放在我需要交互的 HTML 元素之后
2021-04-11 09:52:24

这是在 HTML 中链接 JS 文件的方式

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script> - 标签用于定义客户端脚本,例如 JavaScript。

type - 指定脚本的类型

src - 脚本文件名和路径

要包含外部 Javascript 文件,请使用<script>标记。src属性指向您的 Javascript 文件在您的 Web 项目中的位置。

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

JQuery 只是一个 Javascript 文件,因此如果您下载该文件的副本,您可以使用脚本标记将其包含在您的页面中。您还可以包含来自内容分发网络(例如 Google 托管的网络)的 Jquery。

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

您可以在 HTML 文档中添加脚本标签,最好在指向您的 javascript 文件的 . 脚本标签的顺序很重要。如果您想从脚本中使用 jQuery,请在脚本文件之前加载 jQuery。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>

然后在您的 javascript 文件中,您可以使用$sign 或jQuery. 例子:

jQuery.each(arr, function(i) { console.log(i); }); 

下面是一些有效的 html5示例文档。标签中type属性在 HTML5 中不是强制性的。script

您按$字符使用 jquery 将库(如 jquery)放在<head>标签中 - 但您的脚本始终放在文档(<body>标签)的底部- 因此您将确保在脚本执行开始时将加载所有库和 html 文档。您还可以src在底部脚本标签中使用属性来包含您的脚本文件,而不是像上面那样直接放置 js 代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <div>Im the content</div>

    <script>
        alert( $('div').text() ); // show message with div content
    </script>
</body>
</html>