Letzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Ich denke, diese Woche ist es an der Zeit, dass wir uns mit Code die Hände schmutzig machen und lernen, wie man jQuery in unseren Projekten tatsächlich einsetzt.

Ich sage das jetzt - Sie müssen kein Javascript lernen, um jQuery zu verwenden. Es ist wahrscheinlich am besten, wenn Sie sich jQuery als eine Weiterentwicklung von Javascript vorstellen – ein besserer Weg, dies zu tun – als einfach nur eine Bibliothek, die Funktionen hinzufügt. Eventuell benötigtes Javascript wird unterwegs abgeholt. Es wird jedoch davon ausgegangen, dass Sie als Webentwickler ziemlich gute Kenntnisse in HTML und CSS haben (und hier ist unser hilfreicher kostenloser xHTML-Leitfaden, falls nicht!).

Dokumentobjektmodell

Bei jQuery dreht sich alles um die Durchquerung und Manipulation der BEURTEILUNG - das D Dokument ODER Objekt m od. Das DOM ist eine hierarchische Baumdarstellung der Seite, die von Browsern nach dem Einlesen des gesamten HTML-Codes erstellt wird. In jQuery verwenden wir Terminologie wie Elternteil , Kinder , und Geschwister ziemlich oft, daher sollten Sie eine Vorstellung davon haben, was dies in Bezug auf das DOM bedeutet.

Dieses einfache Diagramm vonw3schoolserklärt die Konzepte recht gut. Sie sollten sehen können, dass das Elternelement des Elements ist, während das Element hat einen unmittelbaren

jQuery code codes here`

$('Wähler').Methode();

Das ist es, im Titel da oben. Das ist die Grundstruktur eines einzelnen jQuery-Codes, um das DOM zu manipulieren. Einfach richtig?

DieWählerweist jQuery an, Dinge zu finden, die dieser Regel entsprechen, und ist das gleiche wie CSS-Selektoren (und dann noch etwas mehr obendrauf). Also, genau wie in CSS würden Sie alle Links mit gestalten

a { }

Das gleiche würde in jQuery wie gemacht werden

$('a')

Dies kann für beliebige HTML-Elemente durchgeführt werden - div, h1, span - was auch immer. Sie können auch CSS-Klassen und -IDs verwenden, um genauer zu sein.

Um beispielsweise alle Links mit der Klasse 'findme' zu finden, verwenden Sie:

$('a.findme')

Sie müssen nicht jedes Mal den Typ des Elements angeben - aber wenn Sie dies tun, wird die Regel einfach spezifischer. Du hättest einfach sagen können

$('.findme')

was alles zur Klasse passen würde finde mich , ob es ein Link war oder nicht.

Um ein benanntes ID-Element zu verwenden, verwenden Sie das # stattdessen unterschreiben. Der Hauptunterschied besteht darin, dass ein ID-Selektor immer nur ein Objekt auswählt, während ein Klassenselektor mehr als eines finden kann.

wie erstelle ich deinen eigenen mod

$('#something')

Wenn Sie dies in CSS tun können, wird dies grundsätzlich auch jQuery tun. Tatsächlich können Sie auch einige ziemlich komplexe Pseudo-Selektoren im CSS3-Stil wie :first

$('body p:first')

Das würde den Absatz der Seite ergreifen. Sie finden auch Elemente mit bestimmten Attributen. Betrachten Sie dieses Beispiel; wir wollen alle Links auf der Seite finden, die intern auf Gebrauch machen von und heben Sie sie irgendwie hervor. So konnten wir sie finden:

$('a[href*='makeuseof']')

Ist das nicht cool? Nun, ich denke, es ist.

Ihre nächste Anlaufstelle sollte die . sein jQuery API-Dokumentation für Selektoren . Es ist eine riesige Liste all der verschiedenen Arten von Selektoren, die Sie verwenden können, und niemand würde erwarten, dass Sie sie alle lernen.

Der nächste Teil der Gleichung istMethode- was mit diesen Dingen zu tun ist, wenn Sie sie alle gefunden haben - aber das überlassen wir für die nächste Lektion. Wenn Sie jetzt jedoch mit dem Ausprobieren verschiedener Selektoren beginnen möchten, schlage ich vor, dass Sie sich an die folgende CSS-Methode halten. Dies erfordert zwei Parameter - ein CSS Name des Anwesens , und ein neues Wert dieser Eigenschaft zuzuordnen. Um allen Links eine rote Hintergrundfarbe zu geben, gehen Sie wie folgt vor:

$('a').css('background-color','red');

Einfach genug! Obwohl dies möglicherweise keinen praktischen Nutzen hat, können Sie mit Ihren Selektoren leicht alle Elemente sehen, die sich befinden. Gehen Sie nun weiter und wählen Sie - das DOM erwartet Sie.

Ich hoffe, dieses Tutorial war für Sie nützlich. Ich habe versucht, es so einfach und verständlich wie möglich zu machen. Fühlen Sie sich frei, Ihre Fragen zu stellen oder Feedback zu hinterlassen, aber seien Sie sich bewusst, dass ich sicherlich kein Elite-JQuery-Ninja bin.

Teilen Teilen Tweet Email 5 Tipps zum Aufladen Ihrer VirtualBox-Linux-Maschinen

Haben Sie genug von der schlechten Leistung virtueller Maschinen? Hier ist, was Sie tun sollten, um Ihre VirtualBox-Leistung zu steigern.

Weiter lesen Verwandte Themen

Webkultur
Web Entwicklung
JavaScript
Programmierung
jQuery

Über den Autor James Bruce(707 veröffentlichte Artikel)

James hat einen BSc in Künstlicher Intelligenz und ist CompTIA A+ und Network+ zertifiziert. Wenn er nicht als Hardware-Review-Editor beschäftigt ist, genießt er LEGO, VR und Brettspiele. Bevor er zu MakeUseOf kam, war er Lichttechniker, Englischlehrer und Rechenzentrumsingenieur.

Mehr von James Bruce

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren