Detailed explanation of the usage of css methods and event methods in jquery

CSS method

.hasClass(calssName) checks whether the element contains a certain class and returns true/false

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

.addClass(className) / .addClass(function(index,currentClass)) Adding a class to an element does not overwrite the original class, it appends it, and it does not check for duplication

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

removeClass([className]) / ,removeClass(function(index,class)) Remove element single/multiple/all class

$( "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 means switching, the method is used for switching, switch is a bool type value, you can understand this by looking at the example

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

First execution

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

Second execution

$( "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) Get the value of a specific property of the element style

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 ) Set the value of a specific property of element style

$( "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 method

.bind( eventType [, eventData ], handler(eventObject) ) Bind DefinedEvent processing program, this is often used, no explanation required

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});

.delegate(selector, eventType, handler(eventObject)) Let’s see the official explanation

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

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

.on( events [, selector ] [, data ], handler (eventObject) ) Recommended after 1.7, replacing bind, live, delegate

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

.trigger( eventType [, extraParameters ] ) JavaScriptStart element binding event

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

.toggle( [duration ] [, complete ] ) / .toggle( options ) Hide or show elements

$( ".target" ).toggle();
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {    // Animation complete.  });
});

The above is the detailed content of Detailed explanation of the usage of css methods and event methods in jquery. For more information, please follow other related articles on the PHP Chinese website!