Hoe koppel je een JavaScript-bestand op de juiste manier aan een HTML-document?
Ten tweede, hoe gebruik je jQuery in een JavaScript-bestand?
Antwoord 1, autoriteit 100%
Eerst moet u de JQuery-bibliotheek downloaden van http://jquery.com/en vervolgens
laad de jQuery-bibliotheek op de volgende manier binnen uw html-head-tags
dan kunt u testen of de jQuery werkt door uw jQuery-code te coderen na het jQuery-laadscript
<!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>
Als u uw jQuery-scriptbestand afzonderlijk wilt gebruiken, moet u het externe .js-bestand op deze manier definiëren nadat de jQuery-bibliotheek is geladen.
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>
Test in realtime
Antwoord 2, autoriteit 28%
Zo koppel je een JS-bestand in HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>– tag wordt gebruikt om een client-side script te definiëren, zoals een JavaScript.
type– specificeer het type script
src– naam en pad van scriptbestand
Antwoord 3, autoriteit 7%
Om een extern Javascript-bestand op te nemen, gebruikt u de tag <script>. Het kenmerk srcverwijst naar de locatie van uw Javascript-bestand binnen uw webproject.
<script src="some.js" type="text/javascript"></script>
JQuery is gewoon een Javascript-bestand, dus als u een kopie van het bestand downloadt, kunt u het met een scripttag in uw pagina opnemen. U kunt ook JQuery opnemen van een inhoudsdistributienetwerk zoals het netwerk dat wordt gehost door Google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Antwoord 4, autoriteit 6%
Je kunt scripttags toevoegen aan je HTML-document, idealiter in de tags die naar je javascript-bestanden verwijzen. De volgorde van de scripttags is belangrijk. Laad de jQuery vóór uw scriptbestanden als u jQuery vanuit uw script wilt gebruiken.
<script type="text/javascript" src="https://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>
Vervolgens kunt u in uw javascript-bestand naar jQuery verwijzen met het teken $of jQuery.
Voorbeeld:
jQuery.each(arr, function(i) { console.log(i); });
Antwoord 5
Hieronder vindt u een VALID html5voorbeelddocument. Het kenmerk typein de tag scriptis niet verplichtin HTML5.
Je gebruikt jQuery met het teken $. Zet bibliotheken (zoals jQuery) in de <head>-tag – maar uw script staat altijd onderaan het document (<body>-tag) – hierdoor zult u zorg ervoor dat alle bibliotheken en html-documenten worden geladen wanneer de uitvoering van uw script begint. U kunt ook het kenmerk srcin de onderste scripttag gebruiken om uw scriptbestand op te nemen in plaats van directe js-code zoals hierboven te plaatsen.
<!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>Antwoord 6
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>