Heim > Web-Frontend > js-Tutorial > jQuery ändert Klassenattribute und CSS-Stile „arrangement_jquery'.

jQuery ändert Klassenattribute und CSS-Stile „arrangement_jquery'.

WBOY
Freigeben: 2016-05-16 16:16:40
Original
1240 Leute haben es durchsucht

Ä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

addClass()

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:

http://api.jquery.com/hasClass/

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()


API:

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.

Schreibvorgang: Legen Sie den Wert einer oder mehrerer CSS-Eigenschaften für jedes Element im passenden Elementsatz fest.

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/

und

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()

API: http://api.jquery.com/offsetParent/

Zurück zur übergeordneten Klasse, nur Lesevorgänge.

scrollLeft() und scrollTop()

API:

http://api.jquery.com/scrollLeft/ und http://api.jquery.com/scrollTop/

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage