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'});
 }