Accentsconagua

jQuery Prägnant Kern jQuery

Code
Share

Basiskonzept hinter jQuery

Es gibt zwar einige konzeptionelle Variationen (z. B. Funktionen wie $ .ajax) In der jQuery-API lautet das zentrale Konzept von jQuery "etwas finden, etwas tun". Wählen Sie insbesondere DOM-Elemente aus einem HTML-Dokument aus und bearbeiten Sie sie mit jQuery-Methoden. Dies ist das Gesamtkonzept.

Um dieses Konzept nach Hause zu bringen, denken Sie über den folgenden Code nach.

Beachten Sie, dass wir in diesem HTML-Dokument jQuery verwenden, um ein DOM-Element auszuwählen (). Wenn etwas ausgewählt ist, machen wir etwas mit der Auswahl, indem wir die jQuery-Methoden aufrufen Text(), attr (), und Anhängen().

Das Text Methode, die auf der Verpackung aufgerufen wird Element und setzen Sie den Anzeigetext des Elements auf "jQuery". Das attr Anruf setzt die href Attribut für die jQuery-Website.

Das grundlegende Konzept "etwas finden, etwas tun" ist wichtig, um als jQuery-Entwickler voranzukommen.

Das Konzept, Hinter dem Konzept, Hinter jQuery

Wenn Sie etwas auswählen und etwas tun möchten, ist das Kernkonzept von jQuery. Ich möchte dieses Konzept jedoch auch auf die Erstellung von Objekten erweitern. Daher könnte das Konzept von jQuery dahingehend erweitert werden, dass zunächst etwas Neues erstellt, ausgewählt und dann etwas damit gemacht wird. Wir könnten das Konzept hinter jQuery nennen.

Ich versuche offensichtlich zu machen, dass Sie nicht nur etwas auswählen müssen, das bereits im DOM enthalten ist. Es ist außerdem wichtig zu wissen, dass mit jQuery neue DOM-Elemente erstellt werden können und dann etwas mit diesen Elementen gemacht werden kann.

Im folgenden Codebeispiel erstellen wir ein neues Element, das sich nicht im DOM befindet. Einmal erstellt, wird es ausgewählt und dann bearbeitet.

Das Schlüsselkonzept, das wir hier aufgreifen sollten, ist, dass wir das erstellen Element on the fly und dann darauf zu arbeiten, als ob es bereits im DOM wäre.

jQuery erfordert, dass HTML im Standardmodus oder im Standardmodus ausgeführt wird

Es gibt bekannte Probleme mit jQuery-Methoden, die nicht richtig funktionieren, wenn ein Browser eine HTML-Seite im Quirks-Modus darstellt. Stellen Sie bei Verwendung von jQuery sicher, dass der Browser den HTML-Code im Standardmodus oder fast im Standardmodus interpretiert, indem Sie einen gültigen Doctype verwenden.

Um die ordnungsgemäße Funktionalität sicherzustellen, verwenden Codebeispiele in diesem Buch den Doctype HTML 5.

Warten auf das DOM, um bereit zu sein

jQuery löst ein benutzerdefiniertes Ereignis mit dem Namen aus bereit wenn das DOM geladen ist und für die Bearbeitung verfügbar ist. Code, der das DOM bearbeitet, kann in einem Handler für dieses Ereignis ausgeführt werden. Dies ist ein allgemeines Muster bei der Verwendung von jQuery.

Das folgende Beispiel enthält drei codierte Beispiele für dieses benutzerdefinierte Ereignis.

Denken Sie daran, dass Sie so viele anhängen können bereit() Ereignisse zu dem Dokument, wie Sie möchten. Sie sind nicht nur auf einen beschränkt. Sie werden in der Reihenfolge ausgeführt, in der sie hinzugefügt wurden.

JQuery-Code ausführen, wenn das Browserfenster vollständig geladen ist

Normalerweise wollen wir nicht auf das warten window.onload Veranstaltung. Das ist der Punkt der Verwendung eines benutzerdefinierten Ereignisses wie bereit() Dadurch wird Code ausgeführt, bevor das Fenster geladen wird, aber nachdem das DOM bereit ist, durchlaufen und bearbeitet zu werden.

Manchmal wollen wir aber tatsächlich warten. Während der Brauch bereit() Dieses Ereignis eignet sich hervorragend für die Ausführung von Code, sobald das DOM verfügbar ist. Mit jQuery können Sie auch Code ausführen, wenn die gesamte Webseite (einschließlich aller Assets) vollständig geladen ist.

Dies kann durch Anhängen eines Ladeereignishandlers an den Server erfolgen Fenster Objekt. jQuery liefert die Belastung() Ereignismethode, mit der eine Funktion aufgerufen werden kann, wenn das Fenster vollständig geladen ist. Nachfolgend gebe ich ein Beispiel für die Belastung() verwendete Ereignismethode.

Alle CSS-Dateien einschließen vor dem Einschließen von jQuery

Ab jQuery 1.3 garantiert die Bibliothek nicht mehr, dass alle CSS-Dateien geladen werden, bevor der Benutzerdefiniert ausgelöst wird bereit() Veranstaltung. Aufgrund dieser Änderung in jQuery 1.3 sollten Sie immer alle CSS-Dateien vor jQuery-Code einschließen. Dadurch wird sichergestellt, dass der Browser das CSS analysiert hat, bevor es in das später im HTML-Dokument enthaltene JavaScript verschoben wird. Bilder, die über CSS referenziert werden, können natürlich heruntergeladen werden, wenn der Browser das JavaScript analysiert.

Verwenden einer gehosteten Version von jQuery

Beim Einbetten von jQuery in eine Webseite wählen die meisten Benutzer den Quellcode und den Link von einer persönlichen Domäne / Host aus. Es gibt jedoch auch andere Optionen, bei denen eine andere Person den jQuery-Code für Sie hostet.

Google hostet mehrere Versionen des jQuery-Quellcodes, die von jedermann verwendet werden sollen. Das ist eigentlich sehr praktisch. Im folgenden Codebeispiel verwende ich a

Google hostet auch mehrere frühere Versionen des jQuery-Quellcodes. Für jede Version werden reduzierte und nicht minimierte Varianten bereitgestellt. Ich empfehle die Verwendung der nicht minimierten Variante während der Entwicklung, da Fehler im Debugging immer einfacher sind, wenn Sie mit nicht reduziertem Code arbeiten.

Die Verwendung einer von Google gehosteten Version von jQuery hat den Vorteil, dass sie zuverlässig, schnell und möglicherweise zwischengespeichert ist.

JQuery-Code ausführen, wenn DOM ohne Ready () analysiert wird

Der Brauch bereit() Veranstaltung ist nicht vollständig erforderlich. Wenn Ihr JavaScript-Code keinen Einfluss auf das DOM hat, können Sie es an einer beliebigen Stelle im HTML-Dokument einfügen. Dies bedeutet, dass Sie das vermeiden können bereit() Ereignis insgesamt, wenn Ihr JavaScript-Code nicht davon abhängig ist, dass das DOM intakt ist.

Heutzutage wird bei JavaScript, insbesondere jQuery-Code, das DOM manipuliert. Dies bedeutet, dass das DOM vom Browser vollständig analysiert werden muss, damit Sie es bearbeiten können. Diese Tatsache ist der Grund, warum Entwickler auf der Website festgehalten wurden window.onload Achterbahnfahrt seit einigen Jahren.

Um zu vermeiden, die bereit() Ereignis für Code, der auf dem DOM ausgeführt wird, können Sie Ihren Code vor dem Schließen einfach in ein HTML-Dokument einfügen Element. Dadurch wird sichergestellt, dass das DOM vollständig geladen ist, weil der Browser das Dokument von oben nach unten analysiert. Wenn Sie Ihren JavaScript-Code nach den DOM-Elementen, die er bearbeitet, in das Dokument einfügen, müssen Sie das nicht verwenden bereit() Veranstaltung.

Im folgenden Beispiel habe ich auf die Verwendung von verzichtet bereit() indem Sie einfach mein Skript platzieren, bevor der Dokumentkörper geschlossen wird. Dies ist die Technik, die ich in diesem Buch und auf den meisten Websites, die ich baue, verwende.

    
 Hi, ich bin der DOM! Skript weg!

Wenn ich das platzieren würde

Mit destruktiven Methoden die Kette durchbrechen

Wie bereits erwähnt, wird die Kette nicht von allen jQuery-Methoden beibehalten. Methoden wie  Text() kann verkettet werden, wenn der Textknoten eines Elements festgelegt wird. jedoch, Text() bricht tatsächlich die Kette, wenn der Textknoten in einem Element enthalten ist.

Im Beispiel unten, Text() wird verwendet, um den in der enthaltenen Text festzulegen und zu erhalten

 Element.

Abrufen des in einem Element enthaltenen Textes mit Text() ist ein Paradebeispiel für eine unterbrochene Kette, da die Methode eine Zeichenfolge zurückgibt, die den Textknoten enthält, nicht jedoch den jQuery-Wrappersatz.

Es sollte nicht überraschen, dass, wenn eine jQuery-Methode den jQuery-Wrappersatz nicht zurückgibt, die Kette dadurch beschädigt wird. Diese Methode gilt als destruktiv.

Verwenden von destruktiven jQuery-Methoden und Beenden der Zerstörung mithilfe von End ()

jQuery-Methoden, die den ursprünglichen ausgewählten jQuery-Wrapper-Satz ändern, gelten als destruktiv. Der Grund ist, dass sie den ursprünglichen Zustand des Wrapper-Sets nicht beibehalten. Keine Sorgen machen; Nichts wird wirklich zerstört oder entfernt. Der frühere Wrapper-Satz ist vielmehr an einen neuen Satz angehängt.

Der Spaß an der Verkettung muss jedoch nicht aufhören, wenn der ursprünglich verpackte Satz geändert wird. Verwendung der Ende() Methode können Sie alle zerstörerischen Änderungen am ursprünglichen Wrapper-Set zurücknehmen. Überprüfen Sie die Verwendung der Ende() Methode im folgenden Beispiel, um zu verstehen, wie DOM-Elemente ein- und ausgeblendet werden.

     
      
  •  
          
     
    •

Aspekte der jQuery-Funktion

Die jQuery-Funktion ist vielfältig. Wir können unterschiedliche Werte und String-Formationen übergeben, die dann zur Ausführung eindeutiger Funktionen verwendet werden können. Hier sind einige Verwendungsmöglichkeiten der jQuery-Funktion:

  • Wählen Sie Elemente aus dem DOM mithilfe von CSS-Ausdrücken und benutzerdefinierten jQuery-Ausdrücken sowie Elemente mithilfe von DOM-Referenzen aus: jQuery ('p> a') oder jQuery (': first') und jQuery (document.body)
  • Erstellen Sie HTML-Code im Handumdrehen, indem Sie HTML-Stringstrukturen oder DOM-Methoden übergeben, die DOM-Elemente erstellen: jQuery ('
    ')     oder jQuery (document.createElement ('div'))
  • Eine Abkürzung für die bereit() Ereignis durch Übergeben einer Funktion an die jQuery-Funktion: jQuery (Funktion ($) / * Abkürzung für ready () * /)

Jede dieser Verwendungen wird im folgenden Codebeispiel detailliert beschrieben.

Grokking, wenn sich das Schlüsselwort auf DOM-Elemente bezieht

Beim Anhängen von Ereignissen an DOM-Elemente in einem Wrapper-Satz das Schlüsselwortdiese kann verwendet werden, um auf das aktuelle DOM-Element zu verweisen, das das Ereignis aufruft. Das folgende Beispiel enthält jQuery-Code, der eine benutzerdefinierte Datei anhängt Mouseenter Veranstaltung für jeden Element auf der Seite. Das native JavaScript Mouseover Das Ereignis wird ausgelöst, wenn der Cursor ein untergeordnetes Element ein- oder ausbricht, wohingegen bei jQuery Mouseenter nicht.

    jQuery.com jQuery.com jQuery.com

Innerhalb der anonymen Funktion, die an die übergeben wird mouseenter () Methode verwenden wir das Schlüsselwort diese auf den Strom beziehen Element. Jedes Mal, wenn die Maus den Text "jQuery.com" berührt, zeigt der Browser an, welches Element mit der Maus markiert wurde Ich würde Attributwert.

Im vorherigen Beispiel ist es auch möglich, die diese referenzieren und übergeben Sie es an die jQuery-Funktion, damit das DOM-Element mit der jQuery-Funktion eingeschlossen wird.

Also stattdessen:

 // Zugriff auf das ID-Attribut des DOM-Elements. alert (this.id);

Wir hätten das tun können:

 // Wrapp das DOM-Element mit einem jQuery-Objekt, // und verwende dann attr (), um auf den ID-Wert zuzugreifen. alert ($ (this) .attr ('id'));

Dies ist möglich, da die jQuery-Funktion nicht nur Selektorausdrücke, sondern auch Verweise auf DOM-Elemente benötigt. Im Code, diese ist ein Verweis auf ein DOM-Element.

Der Grund, aus dem Sie die jQuery-Funktionalität möglicherweise um ein DOM-Element wickeln möchten, sollte offensichtlich sein. Auf diese Weise können Sie die jQuery-Verkettung verwenden, falls Sie dies benötigen.

Das Durchlaufen mehrerer Elemente des jQuery-Wrapper-Sets ähnelt dem gerade diskutierten Konzept. Mit der jQuery jeder() Methode können wir jedes DOM-Element in einem Wrapper-Set durchlaufen. Dies ermöglicht den individuellen Zugriff auf jedes DOM-Element über die Verwendung von diese Stichwort.

Aufbauend auf dem Markup im vorherigen Beispiel können wir alle auswählen Elemente in der Seite und verwenden Sie die jeder() Methode, um über jedes zu iterieren Element im Wrapper-Set, greift auf sein Element zu Ich würde Attribut. Hier ist ein Beispiel.

   jQuery.com jQuery.com jQuery.com

Wenn Sie den HTML-Code in einen Browser laden, wird der Browser eine Warnung anzeigen Ich würde Wert von jedem Element auf der Seite. Da gibt es drei Elemente auf der Seite erhalten Sie drei Iterationen über die jeder() Methode und drei Alarmfenster.

Elemente aus einem Wrapper-Set extrahieren und direkt ohne jQuery verwenden

Nur weil Sie die jQuery-Funktionalität um ein HTML-Element wickeln, verlieren Sie nicht den Zugriff auf das eigentliche DOM-Element. Sie können ein Element jederzeit aus dem Wrapper-Set extrahieren und das Element über natives JavaScript bearbeiten. Zum Beispiel setze ich im folgenden Code das title-Attribut von Element in der HTML-Seite durch Manipulieren der nativen title-Eigenschaft des DOM-Element.

    jQuery.com

Wie gezeigt, bietet jQuery das Handy erhalten() Methode für den Zugriff auf DOM-Elemente an einem bestimmten Index im Wrapper-Set.

Es gibt jedoch eine andere Option hier. Sie können die Verwendung von vermeiden erhalten() Verwenden Sie dazu einfach die Notation für eckige Klammern im jQuery-Objekt. Im Zusammenhang mit unserem vorherigen Codebeispiel:

Dieser Code:

 $ ('a'). get (0) .title = 'jQuery.com';

Könnte das werden:

 $ ('a') [0] .title = 'jQuery.com';

Beide erlauben den Zugriff auf das eigentliche DOM-Element. Ich persönlich bevorzuge die eckige Klammer. Es ist schneller, da es natives JavaScript verwendet, um das Element aus einem Array abzurufen, anstatt es an eine Methode zu übergeben.

Jedoch die erhalten() Diese Methode bietet eine einfache Lösung, um alle DOM-Elemente in einem nativen Array zu platzieren. Indem Sie einfach die erhalten() Methode, ohne einen Indexparameter zu übergeben, gibt die Methode alle DOM-Elemente im Wrapper-Set in einem nativen JavaScript-Array zurück.

Nehmen wir zur Demonstration erhalten() für eine Probefahrt. In den folgenden Code stelle ich alle ein Elemente in ein Array. Ich verwende dann das Array, um auf die Titeleigenschaft des dritten zuzugreifen DOM-Objekt auf der Seite.

    jQuery.com jQuery.com jQuery.com

Anmerkungen: Verwenden erhalten() beendet die Verkettung von jQuery. Der Wrapper-Satz wird in ein einfaches Array von DOM-Elementen umgewandelt, das nicht mehr mit der jQuery-Funktion umgeben ist. Verwenden Sie daher die .Ende() Methode kann die Verkettung nach nicht wiederherstellen .erhalten().

Überprüfen, ob das Wrapper-Set leer ist

Bevor Sie mit einem Wrapper-Set arbeiten, ist es logisch, zu überprüfen, ob Sie tatsächlich etwas ausgewählt haben. Die einfachste Lösung ist die Verwendung von ob Anweisung, um zu prüfen, ob der Wrappersatz DOM-Elemente enthält.

    jQuery

Die Wahrheit der Sache ist oben ob Anweisungen sind nicht unbedingt erforderlich, da jQuery unbemerkt fehlschlägt, wenn keine Elemente gefunden werden. Jede mit einem leeren Wrapper-Satz verkettete Methode wird jedoch weiterhin aufgerufen. Während wir eigentlich auf die Verwendung der verzichten könnten ob Aussagen, ist es wahrscheinlich eine gute Faustregel, sie zu verwenden. Das Aufrufen von Methoden für einen leeren Wrapper-Satz kann möglicherweise zu unnötiger Verarbeitung sowie zu unerwünschten Ergebnissen führen, wenn Methoden andere Werte als den Wrapper-Satz zurückgeben und diese Werte berücksichtigt werden.

Erstellen eines Alias ​​durch Umbenennen des jQuery-Objekts in sich

jQuery liefert die kein Konflikt() Methode, die mehrere Verwendungen hat, nämlich die Fähigkeit zu ersetzen $ mit einem anderen Alias. Dies kann auf drei Arten hilfreich sein: Es kann auf die Verwendung von verzichten $ Signieren Sie bei einer anderen Bibliothek, um potenzielle Konflikte zu vermeiden, und bieten Sie die Möglichkeit, den Namespace / Alias ​​für das jQuery-Objekt anzupassen.

Angenommen, Sie erstellen eine Webanwendung für die Firma XYZ. Es kann sinnvoll sein, jQuery so anzupassen, dass es nicht verwendet werden muss jQuery ('div'). show () oder $ ('div'). show () Du könntest benutzen XYZ ('div'). Show () stattdessen.

    
Syncfusion., Inc.

Anmerkungen:Durch das Passieren der kein Konflikt() Wenn Sie einen booleschen Wert von true verwenden, können Sie vollständig rückgängig machen, was jQuery in die Webseite eingefügt hat. Dies sollte nur in extremen Fällen verwendet werden, da dies höchstwahrscheinlich Probleme mit jQuery-Plugins verursacht.

.Each () verwenden, wenn die implizite Iteration nicht ausreicht

Hoffentlich ist es offensichtlich, dass, wenn Sie eine HTML-Seite (Beispiel unten) mit drei leer haben

Elemente, die folgende jQuery-Anweisung wählt alle drei Elemente auf der Seite aus, durchläuft die drei Elemente (implizite Iteration) und fügt den Text "I am div" in alle drei Elemente ein
Elemente.

Dies wird als implizite Iteration betrachtet, da in jQuery-Code davon ausgegangen werden soll, dass Sie alle drei Elemente bearbeiten möchten. Dazu müssen die ausgewählten Elemente wiederholt werden und der jeweilige Textknotenwert festgelegt werden

mit dem Text "Ich bin ein Div." Wenn dies standardmäßig erfolgt, wird es als implizite Iteration bezeichnet.

Das ist ziemlich praktisch. In der Mehrzahl der jQuery-Methoden wird die implizite Iteration angewendet. Andere Methoden gelten jedoch nur für das erste Element im Wrapper-Set. Zum Beispiel die jQuery-Methode attr () greift nur auf das erste Element des Wrapper-Sets zu, wenn es zum Abrufen eines Attributwerts verwendet wird.

Anmerkungen:Bei Verwendung der attr () Um ein Attribut festzulegen, wendet jQuery implizit die Iteration an, um das Attribut und seinen Wert für alle Elemente im Wrapper-Set festzulegen.

Im folgenden Code enthält der Wrapper-Satz alles

Elemente auf der Seite, aber die attr () Methode gibt nur das zurück Ich würde Wert des ersten Elements, das im Wrapper-Set enthalten ist.

    
Ich bin ein div
 
Ich bin ein div
 
Ich bin ein div

Nehmen Sie zu Demonstrationszwecken an, Ihr Ziel ist es tatsächlich, das zu erreichen Ich würde Attributwert für jedes Element auf der Seite. Sie können drei separate jQuery-Anweisungen schreiben, die jeweils auf sie zugreifen

Element ist Ich würde Attributwert. Wenn wir das tun würden, könnte es ungefähr so ​​aussehen:

 $ ('# div1'). attr ('id'); $ ('# div2'). attr ('id'); $ ('# div3'). attr ('id'); // oder var $ divs = $ ('div'); // Zwischengespeicherte Abfrage $ divs.eq (0) .attr ('id'); // Beginne mit 0 anstelle von 1 $ divs.eq (1) .attr ('id'); $ divs.eq (2) .attr ('id');

Das scheint etwas wortreich, nein? Wäre es nicht schön, wenn wir das Wrapper - Set überlaufen und einfach das Ich würde Attributwert von jedem der

Elemente? Mit der $ (). each () Wir rufen eine weitere Iterationsrunde auf, wenn unser Wrapper-Set eine explizite Iteration erfordert, um mehrere Elemente zu behandeln.

Im folgenden Codebeispiel verwende ich die $ (). each () Methode, um den Wrapper-Satz zu durchlaufen, auf jedes Element im Satz zuzugreifen und dann sein Element zu extrahieren Ich würde Attributwert.

    
div1
 
div2
 
div3

Stellen Sie sich die Möglichkeiten vor, die vor Ihnen liegen, mit der Möglichkeit, die Iteration jederzeit durchzusetzen.

Anmerkungen: jQuery bietet auch eine $ .each Funktion, nicht mit der verwechselt werden $ () Diese Methode wird speziell zum Durchlaufen eines jQuery-Wrappersatzes verwendet. Das $ .each Diese Methode kann tatsächlich verwendet werden, um über jedes alte JavaScript-Array oder -Objekt zu iterieren. Es ist im Wesentlichen ein Ersatz für native JavaScript-Schleifen.

Elemente in jQuery Wrapper Set in Dokumentreihenfolge zurückgegeben

Das Auswahlmodul gibt die Ergebnisse in der Dokumentreihenfolge zurück, nicht in der Reihenfolge, in der die Selektoren übergeben wurden. Der Wrapper-Satz wird mit den ausgewählten Elementen gefüllt, basierend auf der Reihenfolge, in der jedes Element im Dokument von oben nach unten erscheint.

    
h1
 
h2
 
h3

Bestimmen des von der jQuery-Funktion verwendeten Kontexts

Der von der jQuery-Funktion beim Auswählen von DOM-Elementen verwendete Standardkontext ist das Dokumentelement (z. $ ('a', Dokument)). Das bedeutet, wenn Sie die jQuery-Funktion nicht bereitstellen (z. jQuery ()) mit einem zweiten Parameter, der als Kontext für die DOM-Abfrage verwendet werden soll, ist der Standardkontext das Dokumentelement, das allgemein als bekannt ist .

Es ist möglich, den Kontext zu bestimmen, in dem die jQuery-Funktion eine DOM-Abfrage ausführt Kontext Eigentum. Im Folgenden zeige ich zwei codierte Beispiele für das Abrufen des Werts der Eigenschaft context.

    
 
 
jQuery

Erstellen der gesamten DOM-Struktur einschließlich der DOM-Ereignisse in einer einzelnen Kette

Durch die Verwendung von Chaining- und jQuery-Methoden können Sie nicht nur ein einzelnes DOM-Element, sondern ganze DOM-Strukturen erstellen. Nachfolgend erstelle ich eine ungeordnete Liste von jQuery-Links, die ich dann zum DOM hinzufüge.
Code
×