Erste Schritte mit Mootools

Dieses Tutorial führt heute eines der beliebtesten JavaScript -Frameworks vor: Mootools. Mootools (für meine objektorientierten Werkzeuge ) sind mit Internet Explorer 6, Firefox, Opera und Chrome kompatibel. Mootools ist kompakt, modular und objektorientiert. Mootools ist für JavaScript-Programmierer mit mittlerer bis hoher Ebene konzipiert. Stellen Sie daher sicher, dass Sie genügend Erfahrung haben, bevor Sie tiefer graben.

Kernpunkte

Mootools (repräsentativ
• meine objektorientierten Tools ) ist ein kompaktes, modulares und objektorientiertes JavaScript-Framework. Es ist mit Internet Explorer 6, Firefox, Opera und Chrome kompatibel und für JavaScript-Programmierer auf mittlerer bis hoher Ebene konzipiert.
Dieses Framework enthält Merkmale wie Element -Selektor, Domready -Ereignisse, Elementerstellung, Ereignisbindung und Browsererkennung. Der Element Selector vereinfacht den Betrieb der Auswahl von Elementen über ID, Klasse oder Attributmodus. Das Domready -Ereignis wird unmittelbar nach dem Laden des DOM ausgeführt, wodurch eine schnellere Skriptausführung ermöglicht wird. Die Ereignisbindung ermöglicht eine Codeausführung, wenn bestimmte Ereignisse auftreten, während die Browsererkennung basierend auf dem Browser des Benutzers bequem in bedingter Code geschrieben ist.
Mootools ist sehr anpassbar, sodass Entwickler die von ihnen gebrauchten Komponenten auswählen und ändern können. Dies verbessert die Skripteffizienz und verbessert die Leistung. Es bietet auch Kompatibilität mit anderen JavaScript -Bibliotheken und bietet eine Funktion namens Browserabstraktion, die die Unterschiede zwischen verschiedenen Browsern für eine konsistente Codeleistung normalisiert.

Holen Sie sich Mootools

Mootools zu bekommen ist sehr einfach. Mootools sind in zwei Teile unterteilt, die als Kern und mehr bezeichnet werden. Kern enthält Kernklassen und Module des Frameworks und mehr enthalten zusätzliche Klassen, die gemäß den Anforderungen an die Anwendungsanforderungen enthalten sein können. Mootools verfügt über eine leistungsstarke Bauerseite, die Kerne und mehr an unsere Bedürfnisse anpasst. Die aktuelle stabile Version von Mootools Core (zum Zeitpunkt des Schreibens) beträgt 1.4.5 und mehr 1.4.0.1.

Elemente -Selektor

Eine der grundlegendsten Operationen eines JavaScript -Frameworks besteht darin, Elemente auszuwählen. Mootools verwendet Slick als Selektormotor. Mootools unterstützt viele verschiedene Arten von Selektoren. In diesem Abschnitt werden einige der nützlichsten und wichtigsten Selektoren beschrieben.

Element nach id

auswählen

Wenn wir Elemente nach ID in reinem JavaScript auswählen möchten, müssen wir die ausführliche

-Syntax verwenden. Mootools verwenden wie viele andere JavaScript -Frameworks document.getElementById('id_of_element'), um diesen Vorgang zu verkürzen. Ihr Code sieht so aus: $

var element = $('id_of_element');

Wenn Sie Mootools und andere Bibliotheken (z. B. JQuery) auf derselben Seite aufnehmen, verursacht dies Probleme. Um dies zu überwinden, liefert Mootools

als eine weitere Möglichkeit, Elemente auszuwählen. Der Code, den Sie ausgewählt haben, sieht jetzt so aus: $ document.id()

Elemente nach Klasse

var element = document.id('id_of_element');

auswählen

Dies gibt eine Reihe von Elementen mit einer bestimmten Klasse zurück. Um jedes einzelne Element zu erhalten, müssen wir wie unten gezeigt über das Array iterieren.

var element = $('id_of_element');

Wählen Sie Elemente über den Attributmodus

aus

Das folgende Beispiel wählt Elemente aus, deren ID- und Klassenattribute mit einem bestimmten Muster beginnen.

var element = document.id('id_of_element');

In ähnlicher Weise entspricht das folgende Beispiel Elementen, deren ID- und Klassenattribute in einem bestimmten Muster enden.

$$('.class_name').each(function(ele){
  console.log(ele);
});

domready Ereignis

domready ist ein Ereignis, das nur an Fensterobjekte gebunden sein kann. Domready wird unmittelbar nach dem Laden des DOM ausgeführt, was wahrscheinlich viel früher als das Fenster ist. Laden Sie Ereignis, bei dem alle anderen Ressourcen geladen werden. Ich schlage vor, eingehend über Domready und Fenster zu lesen. Das folgende Beispiel wird domready warten, bis es geladen wird, bevor es das DOM abfragt.

$$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

$$('[class^=class_start_]').each(function(ele){
  console.log(ele);
});

Elementerstellung

Mootools können neue HTML -Elemente erstellen und sie in die DOM einbringen. Das Erstellen neuer HTML -Elemente in Mootools ist sehr einfach. Zum Beispiel erstellt der folgende Code ein neues DIV -Element.

$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

$$('[class$=_end_class]').each(function(ele){
  console.log(ele);
});

Der vorherige Code erstellt ein neues Element, fügt ihn jedoch nicht in die DOM ein. Um die Injektion durchzuführen, müssen Sie die adopt() -Methode aufrufen. Das folgende Beispiel zeigt, wie das geht.

window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});

Wenn Sie diesen Code ausführen, können Sie die hinzugefügte neue DIV sehen, bevor Sie das Body -Tag beenden.

Ereignisbindung

Ereignisbindung führt dazu, dass Code ausgeführt wird, wenn bestimmte Ereignisse auf Elementen ausgeführt werden. Klicken Sie, doppelklicken Sie und hover sind Beispiele für allgemeine Ereignisse. Sie können auch Ihre eigenen benutzerdefinierten Ereignisse erstellen, aber dies geht über den Rahmen dieses Artikels hinaus. Als Beispiel für die Mootools -Ereignisbindung fügt der folgende Code einem Element einen einfachen Klick -Ereignis -Handler hinzu.

var new_div = new Element('div', {'class': 'new_div'});

Sie können auch Ereignisse zu dynamisch erstellten Elementen hinzufügen. Der folgende Code fügt dem dynamisch erstellten Element den Klick -Handler hinzu.

var new_div = new Element('div', {'class': 'new_div'});

$$('body').adopt(new_div);

Browsererkennung

Last but not least ist die Browser -Erkennung mit Mootools. Dies ist erforderlich, wenn Sie einen bedingten Code basierend auf dem Browser des Benutzers schreiben möchten. Mootools bietet ein Browser -Objekt, das beim Laden der Seite besiedelt ist. Das folgende Beispiel verwendet eine Switch -Anweisung, um den aktuellen Browser zu identifizieren.

document.id('id_of_ele').addEvent('click', function(){
  console.log('I was just clicked');
});

Schlussfolgerung

In diesem Artikel wird viele Grundkenntnisse über Mootools eingeführt. Es gibt viele hervorragende Ressourcen, um Mootools effektiv zu verwenden. Ich habe viel aus der Mootools -Dokumentation und dem David Walsh -Blog gelernt. Sie können sich auch auf meine Mootools -Arbeit beziehen.

(zweiter FAQ -Abschnitt kann bei Bedarf ähnlich umgestellt werden, und die Formulierung und die Satzstruktur können angepasst werden, während die Konsistenz des Inhalts aufrechterhalten wird)

Das obige ist der detaillierte Inhalt vonErste Schritte mit Mootools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!