JQuery操作class

$('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>

 

 

posted @ 2016-10-18 17:15  六把刀  阅读(167)  评论(0)  编辑  收藏  举报