3-5 jQuery的属性与样式之删除样式.removeClass()
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery的属性与样式之删除样式.removeClass()

jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class

.removeClass( )方法

  1. .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
  2. .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

注意事项

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除

任务

在代码编辑器中第61行填写相应代码

removeClass

在代码编辑器中第67行填写相应代码

removeClass
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left,
  9.     .right {
  10.         width: 300px;
  11.         height: 120px;
  12.     }
  13.  
  14.     .left div,
  15.     .right div {
  16.         width: 100px;
  17.         height: 90px;
  18.         padding: 5px;
  19.         margin: 5px;
  20.         float: left;
  21.         border: 1px solid #ccc;
  22.     }
  23.  
  24.     .newClass{
  25.         background: #bbffaa;
  26.     }
  27.  
  28.     .imoocClass{
  29.         background: red;
  30.     }
  31.  
  32.     </style>
  33.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  34. </head>
  35.  
  36. <body>
  37.     <h2>.removeClass()方法</h2>
  38.     <div class="left">
  39.         <div class="aaron newClass">
  40.             <p>newClass</p>
  41.         </div>
  42.         <div class="aaron newClass">
  43.             <p>newClass</p>
  44.         </div>
  45.     </div>
  46.     <div class="right">
  47.         <div class="aa bb imoocClass">
  48.             <article>
  49.                 <p>imoocClass</p>
  50.             </article>
  51.         </div>
  52.         <div>
  53.             <article>
  54.                 <p>imoocClass</p>
  55.             </article>
  56.         </div>
  57.     </div>
  58.  
  59.     <script type="text/javascript"> 
  60.         //class=left下div元素删除newClass样式
  61.         $('.left div').?('newClass')
  62.     </script>
  63.  
  64.  
  65.     <script type="text/javascript"> 
  66.         //.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式
  67.         $('.right > div:first').?(function(index,className){
  68.  
  69.             //className = aa bb imoocClass
  70.             //把div的className赋给下一个兄弟元素div上作为它的class
  71.             $(this).next().addClass(className)
  72.  
  73.             //删除自己本身的imoocClass
  74.             return 'imoocClass'
  75.         })
  76.  
  77.  
  78.     </script>
  79.  
  80.  
  81.  
  82. </body>
  83.  
  84. </html>
下一节