Wie verknüpfe ich eine JavaScript-Datei mit einer HTML-Datei?

187

Wie verknüpft man eine JavaScript-Datei richtig mit einem HTML-Dokument?

Zweitens, wie verwenden Sie jQuery in einer JavaScript-Datei?

javascript jquery html firstofth300
quelle
3
Ich bevorzuge die Antworten hier: Wo soll ich <script> -Tags in HTML-Markups einfügen?
Caramba
@caramba Aber was ist, wenn ich den JS brauche, um etwas komplizierteres zu tun? Ich versuche, eine Datei schreiben zu lassen, damit ich const fs = require('fs');vom Knoten aus aufrufe.
Nathan
1
@ Nathan mit node.js ist es eine ganz andere Geschichte. Lesen Sie diese Hoffnung, es hilft
Caramba
Ich habe eine Problemumgehung gefunden, aber ich bin sicher, dass sich jemand anderes über den Link freuen wird!
Nathan

Antworten:

189

Zuerst müssen Sie die JQuery-Bibliothek von http://jquery.com/ herunterladen und dann die JQuery-Bibliothek wie folgt in Ihre HTML-Head-Tags laden

Anschließend können Sie testen, ob die JQuery funktioniert, indem Sie Ihren JQuery-Code nach dem JQuery-Ladeskript codieren

<!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>

Wenn Sie Ihre JQuery-Skriptdatei separat verwenden möchten, müssen Sie die externe JS-Datei nach dem Laden der JQuery-Bibliothek auf diese Weise definieren.

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

In Echtzeit testen

Code-Snippet anzeigen

Swarne27
quelle
7
Ich danke dir sehr. Dies ist genau die Antwort, die ich endlich herausgefunden habe! Ich weiß, dass die Frage elementar war, aber ich danke Ihnen, dass Sie sich die Zeit genommen haben, mir dies zu zeigen! Was mir fehlte, war das Platzieren der jQuery-Bibliothek vor der Javascript-Datei!
firstofth300
52

So verknüpfen Sie eine JS-Datei in HTML

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

<script> - tag wird verwendet, um ein clientseitiges Skript wie ein JavaScript zu definieren.

type - Geben Sie den Typ des Skripts an

src - Name und Pfad der Skriptdatei

Muthu Kumaran
quelle
13

Sie können Ihrem HTML-Dokument Skript-Tags hinzufügen, idealerweise innerhalb dessen, was auf Ihre Javascript-Dateien verweist. Die Reihenfolge der Skript-Tags ist wichtig. Laden Sie die jQuery vor Ihren Skriptdateien, wenn Sie jQuery aus Ihrem Skript verwenden möchten.

<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>

Dann können Sie in Ihrer Javascript-Datei entweder mit $sign oder auf jQuery verweisen jQuery. Beispiel:

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

Um eine externe Javascript-Datei einzuschließen, verwenden Sie das <script>Tag. Das srcAttribut verweist auf den Speicherort Ihrer Javascript-Datei in Ihrem Webprojekt.

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

JQuery ist einfach eine Javascript-Datei. Wenn Sie also eine Kopie der Datei herunterladen, können Sie sie mithilfe eines Skript-Tags in Ihre Seite aufnehmen. Sie können Jquery auch aus einem Content-Distributionsnetzwerk wie dem von Google gehosteten einbinden.

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

Unten finden Sie ein GÜLTIGES HTML5- Beispieldokument. Das typeAttribut im scriptTag ist in HTML5 nicht obligatorisch .

Sie verwenden jquery by $charater. Fügen Sie Bibliotheken (wie jquery) in das <head>Tag ein - aber Ihr Skript wird immer am Ende des Dokuments ( <body>Tag) platziert. Aus diesem Grund können Sie sicher sein, dass alle Bibliotheken und HTML-Dokumente geladen werden, wenn die Skriptausführung beginnt. Sie können das srcAttribut auch im unteren Skript-Tag verwenden, um Ihre Skriptdatei einzuschließen, anstatt wie oben direkten js-Code einzufügen.

<!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>
Erweitern Sie das Snippet

Kamil Kiełczewski
quelle
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>
Hozaifa
quelle