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

qvtsj1bj 于 2023-06-04 发布在 Java

关注(0)|答案(6)|浏览(193)

如何正确地将JavaScript文件链接到HTML文档？
第二，如何在JavaScript文件中使用jQuery？

JavaScript

来源：https://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file

6条答案

按热度按时间

xfb7svmp1#

首先，您需要从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"></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>

赞(0）回复(0）举报 2023-06-04

bybem2ql2#

这是如何在HTML中链接JS文件

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

<script>- tag用于定义客户端脚本，例如JavaScript。
type-指定脚本的类型
src-脚本文件名和路径

赞(0）回复(0）举报 2023-06-04

slhcrj9b3#

要包含外部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>

赞(0）回复(0）举报 2023-06-04

s5a0g9ez4#

您可以在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文件中，你可以使用$符号或jQuery来引用jQuery。示例：

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

赞(0）回复(0）举报 2023-06-04

wydwbb8l5#

下面是一些VALID html5示例文档。script标签中的type属性在HTML5中不是强制性的。
你使用jquery通过$字符。把库（如jquery）放在<head>标签中-但你的脚本总是放在文档的底部（<body>标签）-由于这一点，你将确保所有的库和html文档将在脚本执行开始时加载。你也可以在底部的script标签中使用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>

赞(0）回复(0）举报 2023-06-04

wsxa1bj16#

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>

赞(0）回复(0）举报 2023-06-04

我来回答

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

6条答案

真实的测试

相关问题

热门标签

最新问答