187

Come si collega correttamente un file JavaScript a un documento HTML?

In secondo luogo, come si utilizza jQuery in un file JavaScript?

javascript jquery html

— firstofth300
fonte

3

Preferisco le risposte qui: dove devo inserire i tag <script> nel markup HTML?

— Caramba,

@caramba Ma cosa succede se ho bisogno del JS per fare qualcosa di più complicato? Sto cercando di farlo scrivere un file, quindi chiamo const fs = require('fs');dal nodo.

— Nathan,

1

@Nathan con node.js è una storia completamente diversa. leggi questa speranza che aiuta

— caramba il

Ho trovato una soluzione alternativa, ma sono sicuro che qualcun altro sarà contento del link!

— Nathan,

189

Per prima cosa devi scaricare la libreria JQuery da http://jquery.com/ quindi caricare la libreria jquery nel modo seguente nei tag head HTML

quindi puoi verificare se jquery funziona codificando il tuo codice jquery dopo lo script di caricamento 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>

Se si desidera utilizzare il file di script jquery separatamente, è necessario definire il file .js esterno in questo modo dopo il caricamento della libreria jquery.

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

Prova in tempo reale

Mostra snippet di codice

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

Espandi frammento

— Swarne27
fonte

7

Grazie mille. Questa è esattamente la risposta che ho finalmente capito! So che la domanda era elementare ma ti ringrazio per aver dedicato del tempo a mostrarmelo! Quello che mi mancava era posizionare la libreria jQuery prima del file javascript!

— firstofth300,

53

Ecco come si collega un file JS in HTML

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

<script> - tag viene utilizzato per definire uno script sul lato client, ad esempio JavaScript.

type - specifica il tipo di script

src - nome e percorso del file di script

— Muthu Kumaran
fonte

13

È possibile aggiungere tag di script nel documento HTML, idealmente all'interno del punto che punta ai file javascript. L'ordine dei tag di script è importante. Caricare jQuery prima dei file di script se si desidera utilizzare jQuery dallo script.

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

Quindi nel tuo file JavaScript puoi fare riferimento a jQuery usando $sign o jQuery. Esempio:

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

— BuddhiP
fonte

12

Per includere un file Javascript esterno si utilizza il <script>tag. L' srcattributo punta alla posizione del tuo file Javascript all'interno del tuo progetto web.

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

JQuery è semplicemente un file Javascript, quindi se scarichi una copia del file puoi includerlo nella tua pagina usando un tag script. Puoi anche includere Jquery da una rete di distribuzione di contenuti come quella ospitata da Google.

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

— Kevin Bowersox
fonte

2

Di seguito è riportato un documento di esempio html5 VALIDO . L' typeattributo nel scripttag non è obbligatorio in HTML5.

Usi jquery dal $personaggio. Metti le librerie (come jquery) nel <head>tag - ma il tuo script è sempre nella parte inferiore del documento ( <body>tag) - per questo sarai sicuro che tutte le librerie e il documento html verranno caricati all'avvio dell'esecuzione dello script. Puoi anche usare l' srcattributo nel tag di script in basso per includere il tuo file di script invece di inserire il codice js diretto come sopra.

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

Espandi frammento

— Kamil Kiełczewski
fonte

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
fonte

Come collego un file JavaScript a un file HTML?

Prova in tempo reale