<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
<style>
.myclass {
background-color: lightblue;
color: red;
}
#myid {
color: lightblue;
}
h1 {
text-align:center;
color: red;
}
img {
display:block;
}
</style>
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script>
$(document).ready(function(){
$( "#btn_ergebnis" ).click( function() {
var a = Number( $( "#valuea" ).val() );
var b = Number( $( "#valueb" ).val() );
var ergebnis = (a + b);
$( "#my_ergebnis" ).text("das Ergebnis ist: " + ergebnis);
return false;
});
});
</script>
</head>
<body>
<h1>My First Heading</h1>
<input id="valuea" type="text" value="21" />
<input id="valueb" type="text" value="17" />
<input id="btn_ergebnis" type="submit" value="=" />
<p class="myclass">My first paragraphs.</p>
<p id="my_ergebnis">My second paragraphs.</p>
<p class="myclass">My third paragraphs.</p>
<img src="naruto-2.webp" alt="naruto" />
</body>
</html>
Als erstes fügen wir jQuery von einem Externen CDN ein ein CDN ist ein Content Delivery Network und liefert häufig verwendete Dateien und Bilder aus.
Wir geben dazu jQuery CDN in Google ein und klicken auf die slim minified version. Hier wird uns der folgende Code gezeigt:
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>Als Nächstes erstellen wir die document ready Funktion damit das Dokument erst gerendert wird bevor JavaScript Elemente darauf angewendet werden.
$(document).ready(function(){
});hier rein schreiben wir alle Funktionen.
var wert = $( "#id" ).val()so lesen wir den wert des Argumentes value aus dem element mit der ID id in wert.
$( "#id" ).val("irgendein wert");so schreiben wir den wert “irgendein wert” in das argument value
$( "#id" ).text("irgendein wert");so schreiben wir einen wert als text wir können auch .html nutzen um html code an die stelle zu schreiben
