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

CSS-Methode

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

$( "#mydiv" ).hasClass( "foo" )

.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;
});

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" );
});

.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

<div class="tumble">Some text.</div>

Die erste Ausführung

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>

Die zweite Ausführung

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>

$( "#foo" ).toggleClass( className, addOrRemove );// 两种写法意思一样if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

$( "div.foo" ).toggleClass(function() {  if ( $( this ).parent().is( ".bar" ) ) {    return "happy";
  } else {    return "sad";
  }
});

.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"
  ]);

.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"
    });

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 'foo.'" );
});

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" );
});

.trigger( eventType [, extraParameters ] )

JavaScript

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

Trigger element binding event

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

$( "#foo" ).trigger( "click" );

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!