Tutorial zu den Grundlagen von JavaScript und JQuery Framework

Inhaltsverzeichnis

1. JS-Objekt
DOM

–1, Funktion
–2, Prüfung

3. JQuery

–1. Überblick
–2, Nutzungsschritte
–3. Eintrittsfall
–4, jQuery-Dokument ist fertig

Viertens die Syntax von JQuery

–1, Selektor
–2, Gemeinsame Funktionen
–3, Gemeinsame Ereignisse
–4, Üben

Zusammenfassen

1. JS-Objekt

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Test-JS-Erstellungsobjekt</title>
		<Skript>
			//2. Objekt erstellen Methode 2:
				var p2 = {
					// An den Attributnamen gebunden: „Zhang San“,
					Alter:19,
					//Gebundene Funktion eat:function(a){
						konsole.log(a);
					}
				}
				konsole.log(p2);
				p2.eat(10);//Funktion aufrufen //1. Objektmethode 1 erstellen:
				//Objektfunktion Person() deklarieren{}
				//Objekt erstellen var p = new Person();
				//Dynamische Bindungsattribute p.name="Zhang San";
				Seite.Alter=18;
				//Dynamische Bindungsfunktion p.eat=function(){
					console.log("Schweinefleisch essen");
				}
				//console.log(p) anzeigen;
				//Funktion p.eat() aufrufen;
		</Skript>
	</Kopf>
	<Text>
	</body>
</html>

DOM

–1, Funktion

Verwenden Sie verschiedene Methoden und Eigenschaften des Dokumentobjekts. Analysieren Sie verschiedene Elemente auf der Webseite.

Holen Sie sich das Element per ID ----- getElementById ("der Wert des ID-Attributs")

Elemente nach Namen abrufen ----- getElementsByName ("Wert des Namensattributs")

Elemente nach Klasse abrufen----- getElementsByClassName ("Wert des Klassenattributs")

Elemente nach Tag-Namen abrufen ----- getElementsByTagName ("Tag-Name")

Ausgabe im Browser-----write("Anzuzeigender Inhalt")

innerHtml

innerText

style

–2, Prüfung

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Testen der DOM-Analyse von Webseitenelementen</title>
		<Skript>
			Funktionsmethode () {
				// 4. Holen Sie sich den Tag-Namen p var d = document.getElementsByTagName("p");
				d[0].innerHTML="hallo…";
				Konsole.log(d[0].innerHTML);
				// 3. Holen Sie sich class="f"
				var c = document.getElementsByClassName("f");
				c[0].innerHTML="hallo…";
				Konsole.log(c[0].innerHTML);
				// 2. Holen Sie sich name="d"
				var b = document.getElementsByName("d");//Mehrere Elemente abrufen // b[0].innerHTML="test..."; //Den Inhalt des ersten Elements ändern b[0].style.color="blue"; //Die Farbe des Textes des ersten Elements ändern console.log(b[0].innerHTML);//Den Inhalt des ersten Elements abrufen // 1. Get id="a1"
				var a = window.document.getElementById("a1");//Ein Element abrufen // a.innerText = "<h1>hallo</h1>" ; //Den Inhalt ändern // document.write( a.innerText ); //Daten direkt in die Webseite schreiben // //Was ist der Unterschied zwischen innerText und innerHtml? innerHtml kann HTML-Tags analysieren // a.innerHtml = "<h1>hallo</h1>" ; //Inhalt ändern // document.write( a.innerHtml ); //Daten direkt in die Webseite schreiben }
		</Skript>
	</Kopf>
	<Text>
		<div name="d" onclick="method();">Ich bin div1</div>
		<div name="d">Ich bin div2</div>
		<div class="f">Ich bin div3</div>
		<a href="#" id="a1">Ich bin a1</a>
		<a href="#" class="f">Ich bin A2</a>
		<p class="f">Ich bin p1</p>
		<p>Ich bin p2</p>
	</body>
</html>

3. JQuery

–1. Überblick

Wird verwendet, um das Schreiben von JS zu vereinfachen und kombiniert HTML css js .

Syntax: $(Selektor).Ereignis

–2, Nutzungsschritte

Führen Sie zuerst die jQuery-Datei ein: Verwenden Sie das Skript-Tag, um sie in HTML einzuführen

Verwenden Sie die jQuery-Syntax, um Webseitenelemente zu ändern

–3. Eintrittsfall

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Testen Sie die JQ-Syntax</title>
		<!-- 1. jQuery-Datei importieren-->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. JS-Code in die Webseite einbetten-->
		<Skript>
			// Klicken Sie auf das p-Tag, um die Textfunktion zu ändern fun(){
					//dom ruft das Element ab var a = document.getElementsByTagName("p");//Holt das Element entsprechend dem Tag-Namen a[0].innerHTML="Ich habe geändert…";//Ändert den Text //jq ruft das Element ab --jq Syntax: $(selector).event $("p").hide();//Versteckt das Element $("p").text("Ich habe 33333 geändert…");//Ändert den Text }
		</Skript>
	</Kopf>
	<Text>
		<p onclick="fun();">Du bist p2</p>
	</body>
</html>

–4, jQuery-Dokument ist fertig

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Testen Sie die Dokumentbereitschaft von jq</title>
		<!-- 1. JQ-Datei importieren-->
		<script src="jquery-1.8.3.min.js"></script>
		<Skript>
			//Problem mit Methode 1: Das gewünschte h1 wurde noch nicht geladen, daher wird bei der Verwendung ein Fehler gemeldet. //Lösung: Schreiben Sie, nachdem h1 geladen wurde + verwenden Sie die Funktion „Dokument bereit“ (importieren Sie zuerst jq).
			// document.getElementsByTagName("h1")[0].innerHTML="Ich habe geändert…";
			//Schreibmethode 2: Verwenden Sie die Funktion „Dokument bereit“ (importieren Sie zuerst jq) – dies bedeutet, dass das Dokument bereit ist, und verwenden Sie dann das Element $(document).ready(function(){
				//document.getElementsByTagName("h1")[0].innerHTML="Ich habe geändert…";//js dom Schreibmethode $("h1").text("Ich habe geändert…");//jq Schreibmethode });
		</Skript>
	</Kopf>
	<Text>
		<h1>Ich bin h1</h1>
	</body>
</html>

Viertens die Syntax von JQuery

–1, Selektor

Tag-Namensselektor: $(“div”) – wählt div aus

ID-Selektor: $("#d1") – wählt das Element mit der ID=d1 aus

Klassenselektor: $(".cls") – wählt Elemente mit Klasse=cls aus

Attributselektor: $("[href]") – wählt Elemente aus, die ein href-Attribut haben

Erweiterte Selektoren: $(“div.d3”) – wählt Divs mit Klasse=d3 aus

–2, Gemeinsame Funktionen

text() html() val() — Den Wert abrufen oder festlegen

hide() – Ausblenden

$(“p”).css(“background-color”,“yellow”); --Stil festlegen

show() — Anzeige

fadeIn() — Einblenden

fadeOut() — ausblenden

–3, Gemeinsame Ereignisse

Klick-Event – click !!!

Doppelklick-Ereignis – dblclick

Mauseingabeereignis – mouseenter

Maus-raus-Ereignis – mousleave

Mouseover-Ereignis – hover

Tastaturereignisse – keydown keyup keypress

–4, Üben

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Testen von jq-Übungen</title>
		<!-- 1. Importieren Sie jq -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. Verwenden Sie die jq-Syntax, um die Syntax zu üben: $(selector).event-->
		<Skript>
			// jq document ready function:: Stellen Sie sicher, dass alle Elemente geladen wurden, dann können Sie es bedenkenlos verwenden, andernfalls wird ein Fehler gemeldet $(function(){
				// Übung 1: Klicken Sie auf das Element mit der ID=d1, um das Element mit der ID=p1 auszublenden $("#d1").click(function(){
					$("#p1").ausblenden();
				})
			});
			$(Funktion(){
				// Übung 2: Doppelklicken Sie auf das Element mit class="dd", um dem div eine Hintergrundfarbe hinzuzufügen $(".dd").dblclick(function(){
					$("div").css("Hintergrundfarbe","grün");
				})
				// Übung 3: Wenn die Maus das div mit der ID „d1“ betritt, verstecke das Element mit dem href-Attribut $("#d1").mouseenter(function(){
					$("[href]").ausblenden();
				})
			});
		</Skript>
	</Kopf>
	<Text>
		<div id="d1">Ich bin div1</div>
		<div class="dd">Ich bin div2</div>
		<div>Ich bin div3</div>
		<div class="dd">Ich bin div4</div>
		<p id="p1">Ich bin p1</p>
		<p>Ich bin p2</p>
		<a class="dd">Ich bin A1</a>
		<a href="#">Ich bin a2</a>
		<a href="#">Ich bin a3</a>
	</body>
</html>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:

js verwendet die Funktion „documentready“, um den Seiteninhalt dynamisch zu ändern, Beispiel [innerHTML, innerText]
Detaillierte Erklärung der tiefen und flachen Kopie von Javascript und jQuery
Unterschied zwischen der Document Ready-Funktion in JavaScript und jQuery

<<: Tutorial zur Installation und Konfiguration von MySQL 5.7.17 Zip. Lösung für MySQL-Startfehler.

>>: Implementierung von Docker zum Aufbau eines privaten Warehouse (Registrierung und Harbor)