Jak połączyć plik JavaScript z plikiem HTML?

187

Jak prawidłowo połączyć plik JavaScript z dokumentem HTML?

Po drugie, w jaki sposób używasz jQuery w pliku JavaScript?

javascript jquery html firstofth300
źródło
3
Wolę odpowiedzi tutaj: Gdzie należy umieścić tagi <script> w znacznikach HTML?
caramba
@caramba Ale co, jeśli potrzebuję JS, aby zrobić coś bardziej skomplikowanego? Próbuję zmusić go do napisania pliku, więc dzwonię const fs = require('fs');z węzła.
Nathan
1
@Nathan z node.js to zupełnie inna historia. przeczytaj tę nadzieję, że to pomoże
caramba
Znalazłem obejście, ale jestem pewien, że ktoś inny będzie zadowolony z tego linku!
Nathan

Odpowiedzi:

189

Najpierw musisz pobrać bibliotekę JQuery ze strony http://jquery.com/, a następnie załadować bibliotekę jquery w następujący sposób w tagach head HTML

następnie możesz sprawdzić, czy jquery działa, kodując kod jquery po skrypcie ładującym 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>

Jeśli chcesz używać pliku skryptów jquery osobno, musisz zdefiniować zewnętrzny plik .js w ten sposób po załadowaniu biblioteki jquery.

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

Testuj w czasie rzeczywistym

Pokaż fragment kodu

Swarne27
źródło
7
Dziękuję bardzo. To jest dokładnie odpowiedź, którą w końcu wymyśliłem! Wiem, że pytanie było elementarne, ale dziękuję za poświęcenie czasu na pokazanie mi tego! Brakowało mi tylko umieszczenia biblioteki jQuery przed plikiem javascript!
firstofth300
53

W ten sposób łączysz plik JS w HTML

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

<script> - tag służy do definiowania skryptu po stronie klienta, takiego jak JavaScript.

type - określ typ skryptu

src - nazwa i ścieżka pliku skryptu

Muthu Kumaran
źródło
13

Możesz dodać tagi skryptu do dokumentu HTML, najlepiej wewnątrz tego, który wskazuje na twoje pliki javascript. Ważna jest kolejność znaczników skryptu. Załaduj jQuery przed plikami skryptów, jeśli chcesz używać jQuery ze skryptu.

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

Następnie w pliku javascript możesz odwoływać się do jQuery za pomocą $znaku lub jQuery. Przykład:

jQuery.each(arr, function(i) { console.log(i); });
BuddhiP
źródło
12

Aby dołączyć zewnętrzny plik JavaScript, użyj <script>tagu. srcAtrybut wskazuje lokalizację pliku JavaScript w projekcie internetowym.

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

JQuery to po prostu plik JavaScript, więc jeśli pobierzesz kopię pliku, możesz dołączyć go do swojej strony za pomocą znacznika skryptowego. Możesz także dołączyć Jquery z sieci dystrybucji treści, takiej jak ta obsługiwana przez Google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Kevin Bowersox
źródło
2

Poniżej znajduje się WAŻNY przykładowy dokument HTML5 . typeAtrybut w scripttagu jest nie obowiązkowe w HTML5.

Używasz jquery przez $charater. Umieść biblioteki (takie jak jquery) w <head>znaczniku - ale twój skrypt zawsze umieszcza się na dole dokumentu ( <body>znacznika) - dzięki temu będziesz mieć pewność, że wszystkie biblioteki i dokument HTML zostaną załadowane, gdy rozpocznie się wykonywanie skryptu. Możesz także użyć srcatrybutu w dolnym tagu skryptu, aby dołączyć plik skryptu zamiast umieszczać bezpośredni kod js jak wyżej.

<!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>
Rozwiń fragment kodu

Kamil Kiełczewski
źródło
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
źródło