Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Verwendung von CSS-Methoden und Ereignismethoden in JQuery

Detaillierte Erläuterung der Verwendung von CSS-Methoden und Ereignismethoden in JQuery

伊谢尔伦
Freigeben: 2017-06-19 14:46:00
Original
1263 Leute haben es durchsucht

CSS-Methode

.hasClass(calssName) prüft, ob das Element eine bestimmte Klasse enthält und gibt true/false zurück

$( "#mydiv" ).hasClass( "foo" )
Nach dem Login kopieren

.addClass(className) / .addClass(function(index , currentClass)) fügt dem Element eine Klasse hinzu, überschreibt die ursprüngliche Klasse nicht, hängt sie an und prüft nicht auf Duplikate

$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {  return "item-" + index;
});
Nach dem Login kopieren

removeClass([className ]) / ,removeClass(function(index ,class)) Element einzeln/mehrfach/alle Klasse entfernen

$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {  return $( this ).prev().attr( "class" );
});
Nach dem Login kopieren

.toggleClass(className) /.toggleClass(className,switch) / .toggleClass([switch] ) / .toggleClass( function( index, class, switch) [, switch ] ) toggle bedeutet Umschalten, die Methode wird zum Umschalten verwendet, switch ist ein Wert vom Typ Bool, Sie können dies verstehen, indem Sie sich das Beispiel

<🎜 ansehen >
<div class="tumble">Some text.</div>
Nach dem Login kopieren
Die erste Ausführung

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
Nach dem Login kopieren
Die zweite Ausführung

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
Nach dem Login kopieren
$( "#foo" ).toggleClass( className, addOrRemove );// 两种写法意思一样if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}
Nach dem Login kopieren
$( "div.foo" ).toggleClass(function() {  if ( $( this ).parent().is( ".bar" ) ) {    return "happy";
  } else {    return "sad";
  }
});
Nach dem Login kopieren
.css(propertyName) / .css(propertyNames) erhält den Wert von spezifische Eigenschaft des Elementstils

var color = $( this ).css( "background-color" ); 
var styleProps = $( this ).css([    "width", "height", "color", "background-color"
  ]);
Nach dem Login kopieren
.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( PropertiesJson ) Legt den Wert einer bestimmten Eigenschaft des Elements fest Stil

$( "div.example" ).css( "width", function( index ) {  return index * 50;
});
$( this ).css( "width", "+=200" );
$( this ).css( "background-color", "yellow" );
   $( this ).css({      "background-color": "yellow",      "font-weight": "bolder"
    });
Nach dem Login kopieren

event Die Methode

.bind( eventType [, eventData ], handler(eventObject) ) bindet das

Ereignisverarbeitungsprogramm . Dies wird häufig verwendet und erfordert keine große Erklärung.

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on &#39;foo.&#39;" );
});
Nach dem Login kopieren
oder mehr Ereignisse für alle Elemente, die jetzt oder in Zukunft mit dem Selektor übereinstimmen, basierend auf einem bestimmten Satz von Stammelementen.

.on( events [, selector ] [, data ], handler( eventObject) ) wird nach 1.7 empfohlen und ersetzt bind, live, delegate

$( "table" ).on( "click", "td", function() {//这样把td的click事件处理程序绑在table上
  $( this ).toggleClass( "chosen" );
});
Nach dem Login kopieren

.trigger( eventType [, extraParameters ] )

JavaScript
$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});
Nach dem Login kopieren
Trigger element binding event

.toggle( [Dauer ] [, abgeschlossen ] ) / .toggle( Optionen ) Element

$( "#foo" ).trigger( "click" );
Nach dem Login kopieren
ausblenden oder anzeigen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von CSS-Methoden und Ereignismethoden in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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