• jQuery 属性操作


    定义和用法:

    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'});
     }
  • 相关阅读:
    也谈谈我面试的经历
    synchronized和lock比对
    数据结构之查找
    iptable和tcpdump的先后顺序
    iptable的四表五链
    iptable规则的执行顺序
    curl指令的坑
    k8s 网络模型解析之实践
    如何创建一个img文件并且mount 它
    k8s 网络模型解析之原理
  • 原文地址:https://www.cnblogs.com/shenxiaolin/p/6370118.html
Copyright © 2020-2023  润新知