wake-up-neo.com

Wie verlinke ich eine JavaScript-Datei mit einer HTML-Datei?

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

Zweitens, wie benutzt man jQuery in einer JavaScript-Datei?

166
firstofth300

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>

Testen Sie in Echtzeit

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

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

43
Muthu Kumaran

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); }); 
12
BuddhiP

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>
11
Kevin Bowersox

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