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