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

jQuery的属性与样式之增加样式.addClass()

通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名

.addClass( className )方法

  1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
  2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

注意事项：

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

简单的描述下：在p元素增加一个newClass的样式

<p class="orgClass">
$("p").addClass("newClass")

那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔

任务

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

addClass

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

addClass
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>.addClss()方法</h2>
  38.     <div class="left">
  39.         <div class="aaron">
  40.             <p>newClass</p>
  41.         </div>
  42.         <div class="aaron">
  43.             <p>newClass</p>
  44.         </div>
  45.     </div>
  46.     <div class="right">
  47.         <div class="aa bb imooc">
  48.             <article>
  49.                 <p>imoocClass</p>
  50.             </article>
  51.         </div>
  52.         <div class="bb cc imooc ">
  53.             <article>
  54.                 <p>imoocClass</p>
  55.             </article>
  56.         </div>
  57.     </div>
  58.  
  59.     <script type="text/javascript"> 
  60.         //class=left下div元素增加一个新的样式，增加背景颜色
  61.         $('.left div').?('newClass')
  62.     </script>
  63.  
  64.     <script type="text/javascript"> 
  65.  
  66.         //通过className(fucntion)方法
  67.         //这个函数返回一个或更多用空格隔开的要增加的样式名。
  68.         //接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容
  69.  
  70.         //找到所有的div，然后通过addClass设置颜色，根据返回的className的判断，
  71.         $("div").?(function(index,className) {
  72.  
  73.             //找到类名中包含了imooc的元素
  74.             if(-1 !== className.indexOf('imooc')){
  75.                 //this指向匹配元素集合中的当前元素
  76.                 $(this).addClass('imoocClass')
  77.             }
  78.         });
  79.     </script>
  80.  
  81.  
  82.  
  83. </body>
  84.  
  85. </html>
下一节