jQuery: So erhalten Sie Objekte nach ID, Klasse, Tag und Attribut

In diesem zweiten Abschnitt meiner jQuery-Reihe werden wir das Abrufen von Objekten anhand des ID-Selektors (#id), des Klassen-Selektors (.class), des Tags und des Attributs (.attr ()) überprüfen.

Im ersten Teil, "Erste Schritte mit jQuery", habe ich den Basiscode für unsere HTML-Datei index.html und unsere Stile mit der Datei styles.css eingerichtet . Dann haben wir unsere erste "ready ()" - Ereignisfunktion aufgerufen und eine Click-Event-Handler-Warnung hinzugefügt.

Die Dateien, denen Sie in diesem Lernprogramm folgen müssen, einschließlich HTML, CSS, Skript und Bilder, können hier in einer Zip-Datei heruntergeladen werden.

Objekt mit jQuery ID Selector abrufen (#id)

Das Abrufen eines Objekts anhand der ID wird zum Suchen verwendet, das durch das ID-Attribut eines Elements angegeben wird. Jeder ID-Wert darf nur einmal in einem einzelnen Webdokument verwendet werden. Wenn mehr als einem Element dieselbe ID zugewiesen wurde, wählen Abfragen, die diese ID verwenden, nur das erste übereinstimmende Element im DOM aus. Auf dieses Verhalten sollte man sich nicht verlassen. Ein Dokument mit mehr als einem Element mit derselben ID wird jedoch ungültig.

In der Datei index.html fügen wir in der folgenden Codezeile direkt unter dem Absatz "Switch" Folgendes hinzu:

Schalter

Per Definition wird die Methode jQuery toggleClass () verwendet, um zwischen dem Hinzufügen und Entfernen einer oder mehrerer Klassen für die ausgewählten Elemente umzuschalten. Diese Methode überprüft jedes Element auf die angegebenen Klassen. Die Klassen werden hinzugefügt, wenn sie fehlen, und entfernt, wenn sie bereits festgelegt sind. Dadurch wird ein Umschalteffekt erzeugt. Mit dem Parameter "switch" können Sie jedoch angeben, dass nur eine Klasse entfernt oder nur hinzugefügt werden soll.

In dieser Demonstration wenden wir eine Klasse mit der toggleClass () -Methode auf den zweiten Artikel mit der ID = "zwei" an. Wenn Sie darauf klicken, wird sie von einem 2-Pixel-blauen Rand in einen 2-Pixel-grünen Rand gerendert und auch die geändert Höhe von 200px bis 100px. Wir werden die folgende jQuery zu unserem ready () - Ereignis direkt unter dem ersten Klickfunktionsaufruf hinzufügen, den wir im ersten Segment hinzugefügt haben:

 $ ('# switch-two'). click (function () { 
 $ ('# two'). toggleClass ('newClass'); 
 }); 
Öffnen Sie Ihre index.html-Datei in Ihrem Browser und klicken Sie dann auf die Schaltfläche Wechseln. Die Transformation wird in Chrome 17.0.9 in den folgenden Abbildungen A und B angezeigt:

Abbildung A.

Abbildung B.

Wenn Sie auf die Schaltfläche Wechseln klicken, wird die Umschaltfunktion ausgelöst, mit der das Element gefunden wird, indem die ID durch "newClass" ersetzt wird. Dadurch wird der Artikel im Schattenfeld als 110 Pixel hoch definiert und die Rahmenfarbe auf Grün gesetzt. Durch erneutes Klicken auf die Schaltfläche Wechseln wird die ID auf das Original zurückgesetzt.

Objekt nach Klasse abrufen (.class)

In dieser Demonstration ändern wir mehrere Objekte aus einem Aufruf, indem wir alle Objekte einer bestimmten Klasse abrufen - in diesem Fall die Klasse = "test". In unserer Datei index.html fügen wir die folgenden Codezeilen direkt unter dem vorherigen Absatz hinzu und erstellen eine neue Eingabeschaltfläche mit dem Namen "Test Button".

Testknopf

Fügen Sie dann in unserem Bereich die folgenden Zeilen JavaScript direkt unter dem vorherigen Code hinzu, den wir in unserer Bereitschaftsfunktion hinzugefügt haben, und speichern Sie die Datei:

 $ ('# test-switch'). click (function () { 
 $ ('. test'). toggleClass ('newTestClass'); 
 }); 

Fügen Sie nun in unserer Datei styles.css die folgenden Zeilen hinzu und speichern Sie die Datei:

 #content .newTestClass { 
 Breite: 300px; 
 Höhe: 100px; 
 Rand: 2px fest # 0FF; 
 }} 
Aktualisieren Sie das Dokument index.html in Ihrem Browser und klicken Sie auf die Eingabe Test Button. Das Objekt get nach Klasse abrufen ist aktiviert und das Ergebnis ist in Abbildung C dargestellt, wie in Chrome 17.0.9 dargestellt:

Abbildung C.

In diesem Beispiel haben wir jQuery verwendet, um das Element mit der ID des newTestClass" (der newTestClass" ) zu finden, und als wir auf die Schaltfläche geklickt haben, hat jQuery eine Funktion zum Umschalten der Klasse (" newTestClass" ) für die beiden Elemente ( der zweite article und der section ) mit einer test .

Objekte nach Tag abrufen

Um ein Objekt nach Tag zu erhalten, müssen Sie nur den Namen des gewünschten Tags an die Bereitschaftsfunktion übergeben. In diesem Beispiel fügen wir diese Codezeilen zu unserer Datei index.html hinzu und speichern die Datei:

Artikel-Button

Fügen Sie außerdem das folgende JavaScript direkt unter dem Code hinzu, den wir im letzten Schritt hinzugefügt haben (innerhalb der Ready-Funktion), und speichern Sie die Datei:

 $ ('# article-switch'). click (function () { 
 $ ('article'). toggleClass ('newClass'); 
 }); 
Aktualisieren Sie Ihr Dokument index.html und klicken Sie dann auf die Schaltfläche Artikel-Tag-Schalter (siehe Abbildung D in Chrome 17.0.9):

Beachten Sie in diesem Fall, dass wir das Element mit der ID des Artikelschalters finden (die Schaltfläche zum Umschalten des Artikel-Tags). Wenn Sie auf die Schaltfläche zum Umschalten des Artikel-Tags klicken, sind die beiden Elemente mit dem Tag "Artikel" vom Umschalten von jQuery betroffen zu "newClass", wodurch sie in die grünen Schattenfeldstile umgewandelt werden.

Objekte nach Attribut abrufen .attr (attributeName)

Wir können jedes Attribut (ID, Klasse, Stil, Name, Titel) eines beliebigen Tags abrufen (z. B.,,

, ) mit der Funktion .attr ("attributeName"). Diese Methode gibt eine Zeichenfolge des Attributs des Elements zurück.

Gemäß der Beschreibung der .attr () -Methode von jQuery zum Abrufen des Werts des Attributs eines Elements hat dies zwei Hauptvorteile:

  1. Komfort: Es kann direkt für ein jQuery-Objekt aufgerufen und mit anderen jQuery-Methoden verkettet werden.
  2. Browserübergreifende Konsistenz: Die Werte einiger Attribute werden in allen Browsern und sogar in Versionen eines einzelnen Browsers inkonsistent gemeldet. Die Methode .attr () reduziert solche Inkonsistenzen.

In diesem Beispiel ändern wir ein angezeigtes Bild mit jQuery, um eine Bildquelldatei zusammen mit dem Alt und dem Titel zu ersetzen. Zuerst fügen wir jedoch Folgendes zu unserer index.html-Datei direkt unter der Article Button-Zeile hinzu:

Bilder

Wir werden jQuery verwenden, um die Bildquelle, das alt-Attribut und das title-Attribut zu ändern. Gleichzeitig übergeben wir die Sätze von Namen und Werten sofort mit einer map - .attr (map) an die Methode. Eine Zuordnung von Attribut-Wert-Paaren zum Festlegen jedes Schlüssel-Wert-Paares in der Zuordnung fügt ein Attribut hinzu oder ändert es. Fügen Sie dem Ereignishandler direkt unter dem vorherigen Code in der Datei index.html die folgende jQuery hinzu, und speichern Sie die Datei:

 $ ('# image-switch'). click (function () { 
 $ ('img'). attr ({ 
 src: "images / Rose.gif", 
 alt: 'Rose', 
 Titel: 'Rose' 
 }); 
 }); 

Wir werden auch die folgenden Stile in die Datei styles.css einfügen und diese Datei erneut speichern:

 #images { 
 Rand: 3px durchgehend grau; 
 Polsterung: 10px; 
 Breite: 400px; 
 }} 
Bevor Sie auf die Schaltfläche "Attributwechsel" klicken, wird das Dokument "index.html" wie in Abbildung E in Chrome 17.0.9 dargestellt angezeigt:

Klicken Sie auf die Schaltfläche Attributwechsel, und das Bild wird auf die in Abbildung F gezeigte Rose aktualisiert, wie in Chrome 17.0.9 angezeigt:

In unserem nächsten Abschnitt zu jQuery werden wir das Filtern von Objekten, das Ändern von CSS-Klassen, das Ändern des inneren Textes eines Objekts und andere lustige Dinge behandeln!

© Copyright 2020 | mobilegn.com