Änderung von Klassenattributen
Das Klassenattribut ist das Klassenattribut, das den Klassennamen angibt
Wenn Sie einen Klassenselektor zum Angeben eines Stils verwenden, müssen Sie einen Klassennamen für das Element angeben, d. h. den Wert des Klassenattributs
Beachten Sie, dass jedes HTML-Element nur ein Klassenattribut hat. Der Wert des Klassenattributs kann jedoch aus mehreren Namen bestehen, d. h. es kann eine durch Leerzeichen getrennte Liste von Wörtern enthalten
Spezifische Verwendungsmethoden finden Sie unter: http://www.w3school.com.cn/css/css_selector_class.asp
Um den Klassennamen mit jQuery zu ändern, können Sie entweder die Methode attr() verwenden, um das Attribut „class“ zu ändern, oder Sie können die Methoden addClass(), removeClass(), toggleClass() und andere verwenden
API:
http://api.jquery.com/addClass/
Die Methode addClass() fügt den angegebenen Klassennamen (einen oder mehrere) zum übereinstimmenden Element hinzu.
Beachten Sie, dass das Klassenattribut bei Elementen mehrere Werte haben kann. Diese Methode entfernt nicht den vorhandenen Wert, sondern hängt ein oder mehrere Klassenattribute an den ursprünglichen Wert an
Die Verwendung der attr()-Methode zum Festlegen des Klassenattributs ist ein überschreibender Prozess, während addClass() ein anhängender Prozess ist
Klassen werden letztlich durch Leerzeichen getrennt
Wenn Sie mehrere Klassen hinzufügen müssen, trennen Sie die Klassennamen durch Leerzeichen
Ab 1.4 können die Parameter dieser Methode auch an eine Funktion übergeben werden.
removeClass()
API: http://api.jquery.com/removeClass/
Die Methode „removeClass()“ entfernt eine oder mehrere Klassen aus dem ausgewählten Element. Wenn Sie mehrere Klassen entfernen müssen, trennen Sie die Klassennamen durch Leerzeichen
Wenn keine Parameter übergeben werden, entfernt diese Methode alle Klassen des ausgewählten Elements.
toggleClass()
API: http://api.jquery.com/toggleClass/
Die Methode toggleClass() schaltet (setzt oder entfernt) eine oder mehrere Klassen des ausgewählten Elements.
Diese Methode überprüft die angegebene Klasse in jedem Element, löscht sie, wenn sie vorhanden ist, und fügt sie hinzu, wenn sie nicht vorhanden ist
Durch das Hinzufügen von Parametern können Sie nur Lösch- oder nur Hinzufügungsvorgänge festlegen
Format:$(selector).toggleClass(class,switch)
Wenn der Schalterwert wahr ist, wird er nur hinzugefügt; wenn er falsch ist, wird er nur gelöscht
hasClass()
API:
Die Methode hasClass() prüft, ob das ausgewählte Element die angegebene Klasse enthält. Sie können die gleiche Funktion auch mit der Methode is() erreichen. Der Methodenparameter wird in einer Selektorzeichenfolge übergeben, z. B. „.className“.
CSS-Stiländerung
Es gibt auch einige Methoden in jQuery, die die CSS-Eigenschaften von Elementen direkt zurückgeben oder festlegen
css()
http://api.jquery.com/css/
Lesevorgang: Rufen Sie den angegebenen Stilwert (einen oder mehrere) des ersten Elements im passenden Elementsatz
ab
Hinweis: Der Vorgang zum Lesen mehrerer Stilwerte wurde erst in jQuery v1.9 hinzugefügt.
Der übergebene Parameter kann ein einzelnes Schlüssel-Wert-Paar, mehrere durch PlainObject angegebene Werte oder eine Funktion (v1.4) sein.
jQuery behandelt einige spezifische Situationen, die in jedem Browser unterschiedlich sind. Beispielsweise ist cssFloat von W3C im IE möglich, und jQuery hilft Ihnen dabei, es in den richtigen Namen zu übersetzen .
Außerdem interpretiert jQuery sinnvollerweise Mehrwortattribute in CSS- und DOM-Formaten wie .css („background-color“) und .css („backgroundColor“), die verarbeitet werden können
height() und width()
API:
http://api.jquery.com/height/
http://api.jquery.com/width/ Die Attribute „Höhe“ und „Breite“ umfassen keine Abstände, Ränder und Ränder, es sei denn, das Attribut „Boxgröße“ wird verwendet Beachten Sie, dass beim Schreiben die Breite und Höhe des Inhalts festgelegt wird, mit Ausnahme des Kastengrößenteils
Der Lesevorgang gibt weiterhin den Attributwert des ersten Elements der Sammlung zurück.
Der Unterschied zwischen .css("width") und .width() ist: Ersteres gibt einen Wert mit einer Einheit zurück, z. B. 400px; letzteres gibt einen Pixelwert ohne Einheit zurück, also 400.
Wenn der Wert also für eine Berechnung verwendet werden muss, werden .height() und .width() empfohlen
Der gelesene Wert ist nicht unbedingt eine Ganzzahl, und wenn der Benutzer die Seite zoomt, ist der Wert möglicherweise falsch, da der Browser die API für diese Situation nicht verfügbar macht
Es gibt eine weitere Ungenauigkeit. Wenn das übergeordnete Element dieses Elements ausgeblendet ist, kann die Größe des Elements möglicherweise nicht genau gelesen werden
Der von Schreibvorgängen unterstützte Werttyp ist Zeichenfolge oder Zahl.
Wenn es sich um eine Zahl handelt, verwendet jQuery standardmäßig px als Einheit
Wenn es sich um eine Zeichenfolge handelt, kann zusätzlich zu Zahlen und Einheiten jede sinnvolle CSS-Maßeinheit verwendet werden, z. B. 100 %, 50 % oder automatisch.
position()
API: http://api.jquery.com/position/
Gibt die Position des ersten übereinstimmenden Elements relativ zum übergeordneten Element (Offset-Elternelement) zurück.
Nur Lesevorgänge.
offset()
API: http://api.jquery.com/offset/
Geben Sie die Koordinaten des ersten übereinstimmenden Elements zurück oder legen Sie die Koordinaten jedes übereinstimmenden Elements fest. Diese Koordinate ist relativ zum Dokument
offsetParent()
Zurück zur übergeordneten Klasse, nur Lesevorgänge.
scrollLeft() und scrollTop()
http://api.jquery.com/scrollLeft/ und http://api.jquery.com/scrollTop/