Wie verknüpft man eine JavaScript-Datei richtig mit einem HTML-Dokument?
Zweitens, wie benutzt man jQuery in einer JavaScript-Datei?
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>
<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>
So verlinken 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 JavaScript zu definieren.
type
- Geben Sie den Typ des Skripts an
src
- Name und Pfad der Skriptdatei
Sie können Skript-Tags in Ihr HTML-Dokument einfügen, idealerweise innerhalb der Punkte, die auf Ihre Javascript-Dateien verweisen. 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 mit $
sign oder jQuery
auf jQuery verweisen. Beispiel:
jQuery.each(arr, function(i) { console.log(i); });
Um eine externe Javascript-Datei einzuschließen, verwenden Sie das <script>
-Tag. Das Attribut src
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 einfügen. Sie können auch Jquery aus einem Content-Distributionsnetzwerk wie dem von Google bereitgestellten einbeziehen.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Unten sehen Sie ein VALID html5 Beispieldokument. Das type
-Attribut im script
-Tag ist nicht obligatorisch in HTML5.
Sie verwenden jquery von $
charater. Fügen Sie Bibliotheken (wie jquery) in das <head>
-Tag ein, aber Ihr Skript steht immer am Ende des Dokuments (<body>
-Tag). Dadurch können Sie sicher sein, dass alle Bibliotheken und HTML-Dokumente geladen werden, wenn Sie es verwenden Die Skriptausführung beginnt. Sie können auch das src
-Attribut im unteren Skript-Tag verwenden, um Ihre Skriptdatei einzuschließen, anstatt direkten js-Code wie oben zu platzieren.
<!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>