如何正确地将 JavaScript 文件链接到 HTML 文档？
其次，如何在 JavaScript 文件中使用 jQuery？
问问题
1076679 次
6 回答
219
首先，您需要从http://jquery.com/下载 JQuery 库，然后在您的 html 头标签中按以下方式加载 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>
实时测试
<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>于 2012-12-06T08:40:25.040 回答
62
这是在 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- 脚本文件名和路径
于 2012-12-06T08:25:59.663 回答
14
要包含外部 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>
于 2012-12-06T08:26:57.183 回答
13
您可以在 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); });
于 2012-12-06T08:29:21.990 回答
2
下面有一些VALID 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>于 2018-06-27T15:35:51.230 回答
1
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>
于 2020-01-27T14:13:49.997 回答