如何将 JavaScript 文件链接到 HTML 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13739568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I link a JavaScript file to a HTML file?
提问by firstofth300
How do you properly link a JavaScript file to a HTML document?
如何正确地将 JavaScript 文件链接到 HTML 文档？
Secondly, how do you use jQuery within a JavaScript file?
其次，如何在 JavaScript 文件中使用 jQuery？
回答by Swarne27
First you need to download JQuery library from http://jquery.com/then load the jquery library the following way within your html head tags
首先，您需要从http://jquery.com/下载 JQuery 库，然后在您的 html head 标签中按以下方式加载 jquery 库
then you can test whether the jquery is working by coding your jquery code after the jquery loading script
然后您可以通过在 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>
If you want to use your jquery scripts file seperately you must define the external .js file this way after the jquery library loading.
如果你想单独使用你的 jquery 脚本文件，你必须在 jquery 库加载后以这种方式定义外部 .js 文件。
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>
Test in real time
实时测试
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>回答by Muthu Kumaran
This is how you link a JS file in HTML
这是在 HTML 中链接 JS 文件的方式
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>- tag is used to define a client-side script, such as a JavaScript.
<script>- 标签用于定义客户端脚本，例如 JavaScript。
type- specify the type of the script
type- 指定脚本的类型
src- script file name and path
src- 脚本文件名和路径
回答by BuddhiP
You can add script tags in your HTML document, ideally inside the which points to your javascript files. Order of the script tags are important. Load the jQuery before your script files if you want to use jQuery from your 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>
Then in your javascript file you can refer to jQuery either using $sign or jQuery.
Example:
然后在您的 javascript 文件中，您可以使用$sign 或jQuery. 例子：
jQuery.each(arr, function(i) { console.log(i); });
回答by Kevin Bowersox
To include an external Javascript file you use the <script>tag. The srcattribute points to the location of your Javascript file within your web project.
要包含外部 Javascript 文件，请使用<script>标记。该src属性指向您的 Javascript 文件在您的 Web 项目中的位置。
<script src="some.js" type="text/javascript"></script>
JQuery is simply a Javascript file, so if you download a copy of the file you can include it within your page using a script tag. You can also include Jquery from a content distribution network such as the one hosted by Google.
JQuery 只是一个 Javascript 文件，因此如果您下载该文件的副本，则可以使用脚本标记将其包含在您的页面中。您还可以包含来自内容分发网络（例如 Google 托管的网络）的 Jquery。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
回答by Kamil Kie?czewski
Below you have some VALID html5example document. The typeattribute in scripttag is not mandatoryin HTML5.
下面是一些有效的 html5示例文档。标签中的type属性在 HTML5 中不是强制性的。script
You use jquery by $charater. Put libraries (like jquery) in <head>tag - but your script put allways at the bottom of document (<body>tag) - due this you will be sure that all libraries and html document will be loaded when your script execution starts. You can also use srcattribute in bottom script tag to include you script file instead of putting direct js code like above.
您按$字符使用 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>回答by Hozaifa
this is demo code but it will help
<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "https://reqres.in/api/users/",
data: '$format=json',
dataType: 'json',
success: function (data) {
$.each(data.data,function(d,results){
console.log(data);
$("#apiData").append(
"<tr>"
+"<td>"+results.first_name+"</td>"
+"<td>"+results.last_name+"</td>"
+"<td>"+results.id+"</td>"
+"<td>"+results.email+"</td>"
+"<td>"+results.bentrust+"</td>"
+"</tr>" )
})
}
});
});
</script>
</head>
<body>
<table id="apiTable">
<thead>
<tr>
<th>Id</th>
<br>
<th>Email</th>
<br>
<th>Firstname</th>
<br>
<th>Lastname</th>
</tr>
</thead>
<tbody id="apiData"></tbody>
</body>
</html>
