Dies ist Teil einer laufenden Anfänger Einführung in jQuery Web-Programmierung-Serie. Teil 1 behandelt die jQuery-Grundlagen jQuery-Tutorial - Erste Schritte: Grundlagen und Selektoren jQuery Tutorial - Erste Schritte: Grundlagen & Selektoren Letzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Diese Woche, denke ich, ist es an der Zeit, dass wir uns die Hände schmutzig machen mit etwas Code und gelernt haben, wie ... Lesen Sie mehr darüber, wie Sie es in Ihr Projekt einbeziehen, und Selektoren. In Teil 2 werden wir mit der grundlegenden Verwendung fortfahren, wenn wir uns einige Methoden ansehen, die Sie für diese DOM-Elemente ausführen können, und einige weitere Grundlagen für die Sprache.
$ (Selektor) .method ();
Wenn Sie sich an Lektion 1 erinnern, ist dies die grundlegende Struktur einer DOM-Manipulation in jQuery. DOM-Manipulation ist natürlich nicht das Einzige, was man mit jQuery machen kann, aber es ist der einfachste Ort, um von und am häufigsten zu starten, deshalb haben wir es gewählt.
Um dies kurz zu wiederholen, können Sie im Selektorteil dieser Anweisung CSS-ähnliche Elementnamen, Klassen oder IDs verwenden, um Teile des DOMs zu finden. Um zum Beispiel alle mit einem Klassennamen von .hidden zu erfassen, würden wir verwenden:
$('div.hidden') Der zweite Teil dieser Gleichung ist die Methode, die auf diesen DIVs ausgeführt wird, sobald wir sie gefunden haben (wenn sie überhaupt existieren, oder sie können nur ein "passender" Gegenstand sein). Denken Sie daran, dass jQuery immer nur ein Element für die ID-Auswahl zurückgibt, da IDs sich auf eindeutige Elemente beziehen sollten. Wenn Sie mehr als eines von etwas haben, muss es als eine Klasse in CSS definiert werden.
Weiter zu den Methoden; was kannst du überhaupt mit Elementen des DOM machen?
Als Erstes habe ich Ihnen das letzte Mal die .css- Methode vorgestellt, damit Sie sie zum Testen verwenden können. Das Format ist einfach:
.css('property', 'value'); Alles, was durch CSS definiert werden kann, kann daher durch jQuery angepasst werden - Farben, Transparenz, Position, Größe - um nur einige zu nennen. Die Änderung ist unmittelbar.
Wenn Sie die CSS-Änderungen lieber animieren möchten, habe ich gute Neuigkeiten für Sie. Es gibt auch eine Methode namens .animate () . Es ist jedoch ein wenig komplexer:
.animate({'property':'value'}, speed); Als Beispiel:
.animate({'opacity':'0.25', 'height':'100px'}, 'fast'); An diesem Punkt fragen Sie sich vielleicht, wofür die geschweiften Klammern stehen. Sie werden als "Objektliteral" bezeichnet und werden normalerweise verwendet, um eine Liste von property: value- Paaren zu erstellen, ähnlich wie bei einem indizierten Array, wenn Sie aus anderen Sprachen kommen. Sie werden sie oft in jQuery verwenden, also sage ich das noch einmal - gewöhnen Sie sich daran, nach geschlossenen Klammern und geschweiften Klammern zu suchen!
Auf dieser Seite finden Sie viele Arbeitsbeispiele der Animate-Methode.
Sie können nicht nur die CSS-Eigenschaften von etwas manipulieren, sondern auch dessen Inhalt mit den . text (), .html () und .val () Methoden auch (val ist für den Inhalt von Formularelementen) . Diese Methoden dienen sowohl als Set- Ters als auch als Get- Ters; Wenn Sie keinen Wert angeben, erhalten sie den aktuellen Wert. Wenn Sie einen Wert angeben, ersetzen sie den aktuellen Wert.
Hier sind einige schnelle Beispiele:
Holen Sie den aktuellen Wert des Namensfelds in das Kommentarformular und weisen Sie es einer Variablen comment_name zu :
var commenter_name = $(#comment-form #name).val(); Setzen Sie den Wert von auf den Wert, der von commenter_name abgerufen wurde :
$('span.name').text(commenter_name); Dann haben wir eine große Auswahl an Methoden zum Klonen, Verschieben, Einfügen oder Löschen von Teilen des DOM. Deine Vorstellungskraft ist wirklich die Grenze.
Nehmen wir an, Sie wollten nach jedem dritten Absatz in der Inhaltsspalte einen Werbebildblock dynamisch einfügen, aber Sie tun dies in Javascript, damit die anfängliche Seitenladung sauber gehalten werden kann. Klingt ziemlich komplex, oder? Kaum…
$('div#content p:nth-child(3n)').after(' 
'); 
');Wir haben jQuery gefragt:
- Finde das Div mit der ID "content"
- Finde die ps, die in diesem div enthalten sind
- Filtere auf jeden 3. p mit nth-child pseudo selector (mehr dazu hier)
- Fügen Sie nach jedem passenden Element ein beliebiges img ein
Ich kann nicht alle Methoden hier auflisten und auch das würdest du nicht lesen wollen. Der Punkt ist, es gibt eine Methode, um so ziemlich alles zu tun, was man sich bei Manipulationen vorstellen kann. Überprüfen Sie daher die API auf eine, die Sie verwenden können.
Bedenken Sie auch, dass es mehr als eine Möglichkeit gibt, etwas zu tun. Wenn Sie beispielsweise das korrekte Objekt nicht auf insertAfter () eingrenzen können, denken Sie vielleicht daran, das nächste untergeordnete Element zu finden und stattdessen insertBefore () zu verwenden.
Methodenverkettung
Schließlich, heute, lassen Sie uns ein kurzes Wort über Methodenverkettung haben, im Grunde nur weil es großartig ist. Betrachten wir zunächst die folgenden Codezeilen:
$('nav#menu').fadeIn('fast'); $('nav#menu').addClass('beingShown'); $('nav#menu').css('margin-right', '10px'); Das klingt vernünftig genug, oder? Aber Sie können dasselbe in nur einer Zeile tun:
$('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right', '10px'); Das macht genau dasselbe und wird Method Chaining genannt . Da fast alle jQuery-Methoden selbst ein jQuery-Objekt zurückgeben, kann jedes in das nächste hineinlaufen. Das bedeutet weniger Code - was immer gut ist - aber es läuft auch schneller.
Warum? Nun, jedes Mal, wenn Sie den grundlegenden jQuery $ -Befehl und Selektor aufrufen, bitten Sie ihn, den DOM-Baum nach einem passenden Element zu durchsuchen. Wenn Sie Methoden verketten, müssen Sie nicht immer wieder auf das DOM verweisen, da es weiß, wo sie sich gerade befinden und die Methode sofort ausführen kann.
Das ist es für heute, und ich denke, wir haben wahrscheinlich eine ganze Menge abgedeckt. Sie sollten jetzt mit der Fähigkeit ausgestattet sein, einige ziemlich schwere DOM-Manipulationen durchzuführen, also probieren Sie es aus, verketten Sie Ihre Methoden und machen Sie ein echtes Chaos auf der Seite. Fürs Erste möchten Sie Ihre Skripte in der Fußzeile platzieren, um dem Rest der Seite Zeit zum Laden zu geben. Nächste Woche werden wir das Problem angehen, jQuery Dinge nur dann zu machen, wenn alles korrekt mit Ereignissen geladen ist, und den seltsamen Fall von anonymen Funktionen.
Wenn Sie gerade über diesen Beitrag gestolpert sind, sind Sie wahrscheinlich ein Web-Entwickler irgendeiner Art und möchten vielleicht alle unsere WordPress- und Blogging-Artikel oder unsere Best WordPress Plugins-Seite ausprobieren.