$('h2').css({
  color: 'blue',
  backgroundColor: 'gray',
  fontSize: '24px'
});

jQuery 添加类

$('.button').addClass('active'); 

jQuery 移除类

$('.button').on('mouseleave', evt => {
   let e = evt.currentTarget;
   $(e).removeClass('active');
});

jQuery 切换类

$('.choice').toggleClass('highlighted');

// 鼠标事件“点击”
$('#menu-button').on('click', () => {
  $('#menu').show();
});
// 键盘事件“键盘”
$('#textbox').on('keyup', () => {
  $('#menu').show();
});
// 滚动事件“滚动”
$('#menu-button').on('scroll', () => {
  $('#menu').show();
});

事件对象

$('#menu').on('click', event => {
  $(event.currentTarget).hide();
});

方法链

$('#menu-btn').on('mouseenter', () => {
  $('#menu').show();
}).on('mouseleave', () => {
  $('#menu').hide();
});

防止事件

$( "p" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

$('#menu-button').on('click', () => {
  // $('#menu').fadeIn(400, 'swing')
  $('#menu').fadeIn();
});

淡出效果

$('#menu-button').on('click', () => {
  // $('#menu').fadeOut(400, 'swing')
  $('#menu').fadeOut();
});