HTML, Javascript und jQuery - Anfänger

Ich habe gerade angefangen, HTML, Javascript und jQuery zu lernen, aber ich kann diese drei nicht miteinander verknüpfen. Bisher was ich getan habe ist: HTML-Datei:HTML, Javascript und jQuery - Anfänger

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script type="text/javascript" src="test.js"></script> 
    <link rel="stylesheet" href="test.css" type="text/css"/> 
</head> 
<body> 
    <button class="alert-btn">Click me for alert</button> 
</body>

JavaScript-Datei:

$(".alert-btn").click(function(){ 
    alert("Hey there!"); 
});

So wie Sie sehen können, habe ich versucht, die Links im Kopfteil setzen von HTML-Datei, aber es funktioniert nicht. Was mache ich falsch oder was muss ich hinzufügen?

Quelle

2016-08-16 Anon Ymous

ist das Javascript in Ihrer test.js Datei? –

Wenn Sie mit dem HTML-Code interagieren möchten (in Ihrem Fall mit einem Click-Handler), sollten Sie warten, bis der HTML-Code vollständig geladen ist. Sie können dies tun, indem Sie all Ihren JS-Code in '$ (document) .ready (...)' einschließen: https://learn.jquery.com/using-jquery-core/document-ready/ –

Vielleicht Ihr Pfad zu Javascript-Datei ist nicht korrekt. Schau mal, es funktioniert gut: https://jsfiddle.net/ovc6p0kq/2/ –

Wenn der Code:

$(".alert-btn").click(function(){ 
    alert("Hey there!"); 
});

in der Datei ist test.js sollten Sie diese Datei laden, nachdem die DOM-Elemente geladen werden:

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="test.css" type="text/css"/> 
</head> 
<body> 
    <button class="alert-btn">Click me for alert</button> 
    <script type="text/javascript" src="test.js"></script> 
</body>

Quelle

2016-08-16 14:56:37

Das funktioniert gut. Vielen Dank. –

Ich würde auf jeden Fall verwenden, um die `$ (document). bereit (...) oben im Header.

Quelle

2016-08-16 14:58:02 sgr0691

HTML, Javascript und jQuery - Anfänger

Antwort

Verwandte Themen