jQuery 属性操作 - addClass() 方法 - CuriousZero

jQuery 属性操作 - addClass() 方法

定义和用法：

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

语法：

     $(selector).addClass(class)

参数class 是必需。规定一个或多个 class 名称。

 

使用函数来添加类：使用函数向被选元素添加类。

 

语法：

 

$(selector).addClass(function(index,oldclass))

 

描述: 为每个匹配的元素添加指定的样式类名
.addClass( className ),className为一个String字符串，为指定元素添加这个classname的类
.addClass( function(index, currentClass) )，这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。

 

for example:

源码中：

 

//假设一天只有一条，就取第一条
 var dataItem=todayData[0];
 //可以判断数据情况，然后对日期上的日期进行处理
//这里就把“异常”或者“巡检”数据的日期背景变成红色或者蓝色
 if (dataItem.flag===\'异常\') {
     $(day).addClass(\'abnormal-red\');
   }
  else if (dataItem.flag===\'巡检\'){
     $(day).addClass(\'check-blue\');
}

 

样式css文件中：

/*异常数据日期改变样式红色 */
.abnormal-red{
   background-color:red;
   color:white;
   width:20px;
   height:20px;
   border-radius:50%;
  overflow:hidden;
}
/*巡检数据日期改变样式蓝色 */
.check-blue{
  background-color:#00A2E8;
  color:white;
  width:20px;
  height:20px;
  border-radius:50%;
  overflow:hidden;
}

 结果展示：

 

 

原来是这样的：（此法不行，因为在源码中嵌入了样式文件。上面的方法避免在源码中嵌入样式文件）

  //假设一天只有一条，就取第一条
   var m=d[0];
  //可以判断数据情况，然后对日期上的日期进行处理
  //这里就把“异常”或者“巡检”数据的日期背景变成红色或者蓝色
  if (m.flag==="异常") {
    $(day).css({\'background-color\':\'red\',\'color\':\'white\',\'width\':\'20px\',\'height\':\'20px\', \'border-radius\':\'50%\',\'overflow\':\'hidden\'});
  }
   else if (m.flag==="巡检"){
     $(day).css({\'background-color\':\'#00A2E8\',\'color\':\'white\',\'width\':\'20px\',\'height\':\'20px\', \'border-radius\':\'50%\',\'overflow\':\'hidden\'});
 }