如何正确地将JavaScript文件链接到HTML文档?
其次,如何在JavaScript文件中使用jQuery ?
如何正确地将JavaScript文件链接到HTML文档?
其次,如何在JavaScript文件中使用jQuery ?
这就是在HTML中链接JS文件的方法
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> - tag用于定义客户端脚本,如JavaScript。
类型-指定脚本的类型
SRC脚本文件的名称和路径
要包含一个外部Javascript文件,您可以使用<script>标记。src属性指向你的Javascript文件在你的web项目中的位置。
<script src="some.js" type="text/javascript"></script>
JQuery只是一个Javascript文件,因此如果下载了该文件的副本,可以使用脚本标记将其包含在页面中。您还可以从内容分发网络(如谷歌托管的内容分发网络)中包含Jquery。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
您可以在HTML文档中添加脚本标记,最好是在指向javascript文件的which中。脚本标记的顺序很重要。如果您想从脚本中使用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。 例子:
jQuery.each(arr, function(i) { console.log(i); });
首先你需要从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>
实时测试
< script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> <!DOCTYPE html > < html xmlns = " http://www.w3.org/1999/xhtml " > < >头 <!——链接JQUERY > <script type="text/javascript" src="jquery-3.3.1.js"></script> .js <!——个人脚本JavaScript——> < script type = " text / javascript " > $(函数(){ alert(“我的第一个Jquery测试”); }); > < /脚本 < / >头 <身体> < !——你的web——></body> . < / html >
下面是一些有效的html5示例文档。script标签中的type属性在HTML5中不是强制性的。
jquery通过$ character来使用。把库(如jquery)放在<head>标签-但你的脚本总是放在文档的底部(<body>标签)-因此,你将确保所有的库和html文档将在你的脚本执行开始时加载。你也可以在底部脚本标签中使用src属性来包含你的脚本文件,而不是像上面那样直接放置js代码。
<!doctype html > < html lang =“en”> < >头 < meta charset = " utf - 8 " > <标题>示例< /名称> < script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js " > < /脚本> < / >头 <身体> <div>我的内容</div> < >脚本 Alert ($('div').text());//显示带有div内容的消息 > < /脚本 < /身体> < / html >
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>