码迷,mamicode.com
首页 > Web开发 > 详细

JQuery操作class

时间:2016-10-18 18:06:15      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

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

 

 

JQuery操作class

标签:

原文地址:http://www.cnblogs.com/qulb/p/5974121.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!