工作笔记——dom属性巧用

Posted 青草圆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了工作笔记——dom属性巧用相关的知识,希望对你有一定的参考价值。

1、获取验证码

dom:

<span class="btn btn-primary">获取验证码</span>

js:

/**
*@Author Mona
*@date 2016-11-14
*@description 获取验证码
*@param {target} string 需要实现获取验证码的dom元素
*@param {url} string  请求地址
*@param {param} object 请求参数
*/
//使用方式  new GetVerifyCode(‘#get_code‘,‘/my_account‘,{userName:‘Mona‘,mibile:‘13052587892‘})
function GetVerifyCode(target,cur_url,param){
    var _this = this;
    _this.target = target;
    _this.url = contextPath+cur_url;
    _this.param = param; 
    _this.init();   
}

GetVerifyCode.prototype = {
  init:function(){
      var _this = this;
      $(_this.target).on(‘click‘,function(){
          if(typeof $(_this.target).attr(‘disabled‘)==‘undefined‘){
              $(_this).attr(‘disabled‘,‘‘);
              if(!_this.param){
            	  return
              }
              _this.getCode();   
          }   
      })
  },
  getCode:function(){
      var _this = this;
      $.ajax({
        type:‘get‘,
        data:_this.param,
        url:_this.url,
        success:function(data){
            if(data.statusCode==‘200‘){
                    var count = 60;
                    var timer = setInterval(function(){
                        count--;
                        if(count>0){
                            $(_this.target).text(count+‘秒后重新获取‘);
                            $(_this.target).attr(‘disabled‘,‘‘); 
                        }else{
                            clearInterval(timer);
                             $(_this.target).text(‘获取验证码‘);
                             $(_this.target).removeAttr(‘disabled‘);
                        }
                    },1000)             
                  }else{
                      $(_this.target).removeAttr(‘disabled‘);
                  }
        },
        error:function(jqXHR,textStatus,errorThrown){
            renderErrorMsg(jqXHR,textStatus,errorThrown)
        }
    })
  }

}  

  

2、一个按钮实现  修改 保存

dom:

<span data-operater="modify">修改</span>  

js:

$(‘.edit-data‘).on(‘click‘,function(){                      
            if(!shenqu){
                return
            }
            var _this = this;
            var stauts = $(_this).attr(‘data-operater‘);

            if(stauts==‘modify‘){
                $(_this).attr(‘data-operater‘,‘sure‘);
                $(_this).text(‘保存‘);
            }

            if(status == ‘sure‘){
                var businessKey = $(_this).attr(‘data-businessKey‘);
                var provinceUserId = shenqu;
                $.ajax({
                    type:‘post‘,
                    url:contextPath+‘/winmanage/provinceManager?businessKey=‘+businessKey+‘&provinceUserId=‘+provinceUserId,
                    success:function(data){
                        if(data.statusCode==‘200‘){
                            $(_this).attr(‘data-operater‘,‘modify‘);
                            $(_this).text(‘修改‘);
                        }                        
                    }
                })
            }
            
        })

  

  

  

  

以上是关于工作笔记——dom属性巧用的主要内容,如果未能解决你的问题,请参考以下文章

关于CSS的个人理解

廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

巧用Vscode编辑器,快速编辑代码,教你一键写完一段代码,向合格的cv工程师前进

巧用Vscode编辑器,快速编辑代码,教你一键写完一段代码,向合格的cv工程师前进

巧用Vscode编辑器,快速编辑代码,教你一键写完一段代码,向合格的cv工程师前进

巧用Vscode编辑器,快速编辑代码,教你一键写完一段代码,向合格的cv工程师前进