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


187

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

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



@caramba但是如果我需要JS做更复杂的事情怎么办?我试图让它写一个文件,所以我const fs = require('fs');从节点调用。
内森

1
@Nathan与node.js完全不同。阅读这份希望对您有帮助的希望
caramba

我找到了一种解决方法,但我相信其他人会为该链接感到高兴!
内森

Answers:


189

首先,您需要从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>

实时测试


7
非常感谢。这正是我最终想出的答案!我知道这个问题很基本,但是我感谢您抽出宝贵的时间向我展示!我所缺少的是将jQuery库放在javascript文件之前!
firstofth300 2012年

53

这是您以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 -脚本文件名和路径


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。例:

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

12

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

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

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

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

2

下面有一些VALID html5示例文件。标签中的type属性不是必需的script在HTML5中的。

您可以按$字符使用jquery 。将库(如jquery)放在<head>标记中-但您的脚本始终放在文档(<body>标记)的底部-因此,您可以确保在脚本执行开始时将加载所有库和html文档。您还可以src在底部脚本标签中使用attribute来包含脚本文件,而不是像上面那样放置直接的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
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> 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.