$('div').addClass('box') //添加class
$('div').removeClass('alert') //删除
$('div').hasClass('alert') //是否存在
$('div').toggleClass('box') //切换，有则删除，无则添加
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title> new document </title> 5 </head> 6 <style> 7 div>button{ 8 background-color:#f00; 9 margin:0px; 10 float:left; 11 border:0px solid #fff; 12 } 13 div>button.pressed{ 14 background-color:#ddd; 15 } 16 </style> 17 <body> 18 <div> 19 <button>1</button> 20 <button>2</button> 21 <button>3</button> 22 <button>4</button> 23 </div> 24 25 <script src="js/jquery-1.11.3.js"></script> 26 <script> 27 28 /*$('button').click(function(){ 29 var btn = $('button'); 30 if($(this).hasClass('pressed')){ 31 $(this).removeClass('pressed'); 32 }else{ 33 $(this).addClass('pressed'); 34 } 35 });*/ 36 $('button').click(function(){ 37 $(this).toggleClass('pressed'); 38 }); 39 /*$('button').click(function(){ 40 $('.pressed').removeClass('pressed'); 41 $(this).addClass('pressed'); 42 }); 43 */ 44 </script> 45 </body> 46 </html>