suchen

Heim >Web-Frontend >js-Tutorial >Analyse der Konvertierung und des Unterschieds zwischen den DOM-Objekten von jQuery und jQuery-Objekten_jquery

Analyse der Konvertierung und des Unterschieds zwischen den DOM-Objekten von jQuery und jQuery-Objekten_jquery

WBOY
WBOYOriginal
2016-05-16 16:21:38969Durchsuche

In diesem Artikel werden die Konvertierung und der Unterschied zwischen DOM-Objekten und jQuery-Objekten anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

jQuery Hello World-Programm:






Vergleich von $(document).ready und window.onload

Erster Blick auf window.onload:


Code kopieren Der Code lautet wie folgt:
window.onload = sayHello;
window.onload = sayWorld;

Funktion sayHello() {
alarm("Hallo");
}
Funktion sayWorld() {
​ alarm("World");
}
Die letztere Methode überschreibt die vorherige Methode, d. h. am Ende wird nur eine Blase angezeigt, die von World.

Wenn $(document).ready verwendet wird, werden die Methoden verkettet, d. h. zuerst wird die Hallo-Warnung und dann die Weltwarnung angezeigt.


Code kopieren Der Code lautet wie folgt:
$(document).ready(sayHello);
$(document).ready(sayWorld);

Funktion sayHello() {
alarm("Hallo");
}
Funktion sayWorld() {
​ alarm("World");
}
Auf diese Weise können Sie mehrere Methoden zuordnen.

Ein weiterer kleiner Unterschied besteht darin, dass die Ausführung der Methode „ready“ etwas früher erfolgt. width.onload wartet darauf, dass das DOM bereit ist und alle Bindungen abgeschlossen sind, während „ready“ nur das DOM vorbereiten kann und andere Arbeiten möglicherweise noch nicht erledigt sind .

Beispiel: Onclick-Ereignis an jedes Hyperlink-Objekt anhängen

Fügen Sie zunächst mehrere Hyperlink-Objekte zum Textkörper hinzu:


Code kopieren Der Code lautet wie folgt:

Um jedem Objekt ein Onclick-Ereignis hinzuzufügen, gibt es viele Methoden:

Zunächst können Sie das Attribut onclick in jedes Tag schreiben; Zweitens können Sie mit window.onload eine Methode hinzufügen, um alle Tags abzurufen und Ereignisse einheitlich hinzuzufügen, wie folgt:

Code kopieren Der Code lautet wie folgt:window.onload = function () {
var myLinks = document.getElementsByTagName("a");
for(var i = 0; i < myLinks.length; i){
myLinks[i].onclick = function(){
alarm("Hallo Link: " i);
}
}
}

Beachten Sie, dass ich hier einen Fehler gemacht habe. Ich dachte ursprünglich, dass die Anzahl der Warnungen zunehmen würde, aber das tatsächliche Ergebnis war, dass jede Warnung 4 war.
Dies liegt daran, dass js keinen Gültigkeitsbereich auf Blockebene hat und die Variable i auf die Variable in for verweist, die nach der Schleife zu 4 wird. Mit anderen Worten, der Wert von i wird nur verwendet, wenn die Das Onclick-Ereignis tritt natürlich auf. Es ist 4.

Verwenden Sie jQuery, um diese Funktion unten zu implementieren:

Code kopieren Der Code lautet wie folgt:
$(document).ready(function () {
$("a").click(function () {
alarm("Hallo Link von jQuery!");
});
});

Das $()-Symbol in jQuery ruft alle entsprechenden Elemente auf der Seite ab.
Der obige Code impliziert also den Durchlaufprozess und fügt jedem Element
eine Ereignisverarbeitungsfunktion hinzu Die Click-Methode ist eine vom jQuery-Objekt bereitgestellte Methode.
onclick ist eine Eigenschaft des DOM-Objekts.
Viele Attribute im DOM werden zu Methoden in jQuery.

Gegenseitige Konvertierung und Unterschied zwischen DOM-Objekten und jQuery-Objekten

Sehen Sie sich ein Beispiel an, fügen Sie zunächst ein p-Tag hinzu:

Code kopieren Der Code lautet wie folgt:

Click Me!< /p>

Besorgen Sie sich zuerst ein DOM-Objekt und konvertieren Sie es dann in ein jQuery-Objekt:

Code kopieren Der Code lautet wie folgt:
//Teil 1: DOM --> jQuery
//DOM-Objekt:
var pElement = document.getElementsByTagName("p")[0];
alarm("DOM pElement: " pElement.innerHTML);
//DOM-Objekt in jQuery-Objekt konvertieren:
var pElementjQuery = $(pElement);
Alert("jQuery pElementjQuery: " pElementjQuery.html());

Sie können auch zuerst ein jQuery-Objekt abrufen und es dann in ein DOM-Objekt konvertieren:

Code kopieren Der Code lautet wie folgt:
//Teil 2: jQuery --> //jQuery-Objektarray:
var clickMejQuery = $("#clickMe");
//JQuery-Objekt in DOM-Objekt konvertieren (2 Möglichkeiten):
//Weg 1:
var domClickMe1 = clickMejQuery[0];
alarm("dom1: " domClickMe1.innerHTML);
//Weg 2:

var domClickMe2 = clickMejQuery.get(0);
alarm("dom2: " domClickMe2.innerHTML);

Noch einmal beachten: $() in jQuery ruft ein Array aller Elemente ab, die die Bedingungen erfüllen.

Kleine Zusammenfassung:

$("string") gibt ein Array aller Elemente zurück, die die Bedingungen erfüllen, wobei:


Die Zeichenfolge beginnt mit # und gibt die ID an; Die Zeichenfolge beginnt mit . und gibt den CSS-Klassennamen an; Wenn die beiden oben genannten Situationen nicht der Fall sind, ändern Sie die Zeichenfolge, um den Tag-Namen darzustellen:

$(DOM-Objekt) kann ein jQuery-Objekt abrufen.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Node.js-Framework zur Erstellung von Echtzeit-Multiplayer-Spielen_node.jsNächster Artikel：Node.js-Framework zur Erstellung von Echtzeit-Multiplayer-Spielen_node.js

In Verbindung stehende Artikel

Mehr sehen