Jquery 事件

// 按不同的按钮,文字改变样式
$(document).ready(function() {
  $('#switcher .button').click(function(event) {
    // 取消之前样式
    $('body').removeClass();
    // 根据点击按钮的ID,判断要添加什么属性
    if (this.id == 'switcher-narrow') {
      $('body').addClass('narrow');
    }
    else if (this.id == 'switcher-large') {
      $('body').addClass('large');
    }
    // 所有按钮取消样式
    $('#switcher .button').removeClass('selected');
    // 被点击的按钮,加上选中特效
    $(this).addClass('selected');
    // 停止事件传播
    event.stopPropagation();
  });
});

// 鼠标移动到按钮上时,改变效果
$(document).ready(function() {
  $('#switcher .button').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
});

// 普通样式时,点击switcher,隐藏/显示switcher,
// 其他样式时,始终显示switcher
$(document).ready(function() {
  var toggleStyleSwitcher = function() {
    $('#switcher .button').toggleClass('hidden');
  };
  $('#switcher').click(toggleStyleSwitcher);

  $('#switcher-normal').click(function() {
    $('#switcher').click(toggleStyleSwitcher);
  });
  // 移除事件处理程序
  $('#switcher-narrow, #switcher-large').click(function() {
    $('#switcher').unbind('click', toggleStyleSwitcher);
  });
});

// 模拟用户点击,可以不用考虑事件传播
$(document).ready(function() {
  $('#switcher').click();
});


$(document).ready(function(){
  
  var buttons = $('input[@id^="button"]');
  buttons.click(function(){
	  var id = this.id;
	  id = id.split('_'); 
      alert(id[id.length-1]);
  });
});

你可能感兴趣的:(jquery)