javascript常用的方法整理


Posted in Javascript onAugust 20, 2015

整理了一些JS的常用方法,包括验证啊,全选反选啊,ajax请求啊之类的,因为就是自己用的,写的都比较简单,就算抛砖引玉吧,喜欢的就拿去,不喜欢就拉到

Tools.min.js

/**
 * JS公用类库文件
 * 创建时间:2015-05-13
 * 创建人:mction
 */
(function(){
  var D = document;
  var W = window;
  var Postfix = '.php'
  var _Id = function(Id){return document.getElementById(Id);};
  Check = {
    Input:function(Name,Value,Message){
      var Input = $(":input[name='"+Name+"']");
      if(Input.val() == Value){
        Input.focus();
        alert(Message);
        return true;
      }
      return false;
    },
    Phone:function(Name){
      /*
       * 联通号段:130/131/132/155/156/185/186/145/176;
       * 电信号段:133/153/180/181/189/177;
       * 移动号段:134/135/136/137/138/139/150/151/152/157/158/159/182/183/184/187/188/147/178
       */
      var Reg = /^1(30|31|32|55|56|85|86|45|76|33|53|80|81|89|77|34|35|36|37|38|39|50|51|52|57|58|59|82|83|84|87|88|47|78)[0-9]{8}$/;
      var Phone = $(":input[name='"+Name+"']");
      if(!Reg.test(Phone.val())){
        Phone.focus();
        return true;
      }
      return false;
    },
    Email:function(Name){
      var Reg = /^[a-zA-Z0-9_]+@[a-z0-9]+\.[a-z]+$/;
      var Email = $(":input[name='"+Name+"']");
      if(!Reg.test(Email.val())){
        Email.focus();
        return true;
      }
      return false;
    },
    UserName:function(UserNameMark,Message){
      var Reg = /^[\d]{8}$/;
      var UserName = $(":input[name='"+UserNameMark+"']");
      if(!Reg.test(UserName.val())){
        UserName.focus();
        alert(Message);
        return true;
      }
      return false;
    },
    Password:function(Name){
      var Reg = /^([A-Z]+)$|^([a-z]+)$|^([0-9]+)$|^([-`=\\\[\];',\.\/~!@#\$%\^&\*\(\)_+\|\{}:"<>\?]+)$|^.{0,5}$|^.{18,}$/
      var Password = $(":input[name='"+Name+"']");
      if(Reg.test(Password.val())){
        Password.focus();
        return true;
      }else{
        return false;
      }
    }
  };
  Member = {
    Login:function(){
      var UserName = $(":input[name='username']");
      var PassWord = $(":input[name='password']");
      if(Check.UserName("username","用户名格式不正确")){
        return false;
      }
      if(Check.Input("password",'',"密码不能为空")){
        return false;
      }
      $.ajax({
        url:"/User/action"+Postfix,
        type:"POST",
        data:{
          request:"Login",
          username:UserName.val(),
          password:PassWord.val()
        },
        dataType:"json",
        success:function(Data){
          if(Data.state != 200){
            alert(Data.message);
            return false;
          }else{
            location.href= "/User/member"+Postfix;
          }
        }
      });
    },
    Logout:function(){
      location.href = '/User/Logout'+Postfix;
    }
  };
  Public = {
    Hi:function(){alert('hi');},
    Box_All_Sel:function(Class,AllChecked){//全选反选
      var Input = D.getElementsByTagName("input");
      var BoxList = [];
      for(I =0;I<Input.length;I++){
        if(Input[I].type == "checkbox" && Input[I].className == Class){
          BoxList.push(Input[I]);
        }
      }
      if(AllChecked){
        for(I in BoxList){
          BoxList[I].checked = true;
        }
      }else{
        for(I in BoxList){
          BoxList[I].checked = BoxList[I].checked ? false : true;
        }
      }
    },
    After:function(New,Tar){
      if(typeof Tar == 'string'){
        var Parent = _Id(Tar);
      }else{
        var Parent = Tar;
      }
      if(Parent.parentNode == Parent){
        Parent.parentNode.appendChild(New);
      }else{
        Parent.parentNode.insertBefore(New,Parent.nextSibling);
      }
    },
    Requests:function(O,Class){
      //批量请求
      //url.request.message.input.inputMessage.inputValue
      var Data = $("."+ Class +":checked").serialize();
      if(Data == ''){
        alert("您没有选中任何项");
        //alert(O.options[0].value);
        O.value = O.options[0].value;
        return;
      }
      var TempArr = O.value.split('.');
      if(!TempArr[0] || !TempArr[1]){
        //验证URL及动作
        alert("错误:缺少必须参数");
        O.value = O.options[0].value;
        return;
      }
      Data += "&request=" + TempArr[1];
      var Message = "确认删除选中项吗?";
      if(TempArr[2]){
        //验证并设置提示消息
        Message = TempArr[2];
      }
      if(confirm(Message)){
        var Input = false;
        if(TempArr[3]){
          //验证并设置是否接收用户输入
          Input = true;
        }
        if(Input == 'True'){
          var InputVal = prompt(TempArr[4],TempArr[5]);
          Data += "&input=" + InputVal;
        }
        $.ajax({
          url:"./"+TempArr[0]+Postfix,
          type:'GET',
          data:Data,
          dataType:'json',
          async:false,
          success:function(Data){
            alert(Data.message);
            location.reload(true);
          }
        });
      }
    },
    Request : {//单次请求
      Data : '',
      MetHod : '',
      DataType : '',
      Async : '',
      SetData:function(Options,MetHod,DataType,Async){
        this.Data = Options;
        this.MetHod = typeof MetHod == 'undefined' ? 'GET' : MetHod;
        this.DataType = typeof DataType == 'undefined' ? 'json' : DataType;
        this.Async = typeof Async == 'undefined' ? true : Async;
        return this;
      },
      Send:function(Url,Call,IM,Message){
        if(!Message){
          Message = "确认删除吗?";
        }
        if(typeof Call != 'function'){
          Call = function(Data){
            switch(this.dataType){
              case 'text' :alert(Data);break;
              default :alert(Data.message);break
            }
            location.reload(true);
          }
        }
        var CF = true;
        var CFM = true;
        var LId;
        if(typeof IM != 'undefined' && IM == false){CF = false}
        if(CF && !confirm(Message)){CFM = false;}
        if(CFM){
          $.ajax({
            url:Url,
            type:this.MetHod,
            data:this.Data,
            dataType:this.DataType,
            async:this.Async,
            beforeSend:function(O){LId = Public.Loading.Open("正在处理中");},
            success:Call,
            error:function(E,Info,EO){alert(E.statusText + ":" + E.responseText);},
            complete:function(O){Public.Loading.Close(LId);}
          });
        }
      }
    },
    Desc : {
      DescId : '',
      Display:function(O,Message){
        var Id = parseInt(Math.random() * 1000);
        this.DescId = Id;
        var Desc = D.createElement('description');
        Desc.id = Id;
        Desc.innerHTML = Message;
        Desc.style.width = "200px";
        Desc.style.border = "1px solid #dfdfdf";
        Desc.style.backgroundColor = "#fff";
        Desc.style.lineHeight = "normal";
        Desc.style.position = "absolute";
        Desc.style.top = O.offsetTop + 'px';
        Desc.style.marginLeft = "5px";
        Public.After(Desc,O);
        O.setAttribute("onblur",'Public.Desc.Close()');
      },
      Close:function(){
        $("#"+this.DescId).remove();
      }
    },
    Options : {
      File_Input:function(Obj){//添加文件选择框
        var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var ObjName = '';
        for (var i = 0; i < 5; i++) {
          ObjName += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        var InputFile = D.createElement("input");
        InputFile.type = "file";
        InputFile.name = ObjName;
        InputFile.accept = "image/*";
        var A = D.createElement("a");
        A.href = "javascript:;";
        A.style.marginLeft = "300px";
        A.innerHTML = "删除";
        A.setAttribute("onclick",'$("div").remove("#'+ObjName+'")');
        var Div = D.createElement("div");
        Div.id = ObjName;
        Div.style.padding = "5px";
        Div.style.borderBottom = "1px solid #cccccc";
        Public.After(Div,Obj);
        _Id(ObjName).appendChild(InputFile);
        _Id(ObjName).appendChild(A);
      }
    },
    Loading : {
      WindowId:'',
      Open:function(Message){
        var Id = parseInt(Math.random() * 1000);
        this.WindowId = Id;
        var Div = D.createElement("div");
        Div.id = Id;
        Div.style.width = "80%";
        Div.style.height = "50px";
        Div.style.backgroundColor = "#000";
        Div.style.opacity = "0.5";
        Div.style.borderRadius = "10px";
        Div.style.position = "fixed";
        Div.style.top = (W.innerHeight - 50) / 2 + "px";
        Div.style.left = "10%";
        var P = D.createElement("p");
        P.style.textAlign = "center";
        P.style.color = "#fff";
        P.style.lineHeight = "50px";
        P.style.height = "50px";
        var Img = D.createElement('img');
        Img.src = "/phps/Public/images/loading.gif";
        Img.style.marginBottom = "-5px";
        if(Message){
          P.innerHTML = Message;
        }else{
          P.innerHTML = "正在处理中";
        }
        P.appendChild(Img);
        D.getElementsByTagName("body")[0].appendChild(Div);
        _Id(this.WindowId).appendChild(P);
        return Id;
      },
      Close:function(Id){
        if(typeof Id != 'undefined' && Id != null){
          D.getElementsByTagName("body")[0].removeChild(_Id(Id));
        }else if(this.WindowId != ''){
          D.getElementsByTagName("body")[0].removeChild(_Id(this.WindowId));
        }
      }
    },
    Tabs : {
      TabsNum : 1,
      TabListId : '',
      WindowId : '',
      New_Tabs:function(TabListId,WindowId,OpenUrl,PageTitle){
        this.TabListId = TabListId;
        this.WindowId = WindowId;
        var IframeList = _Id(WindowId).getElementsByTagName("iframe");
        //alert(Iframe.length);
        for(I = 0;I < IframeList.length;I ++){
          IframeList[I].style.display = "none";
        }
        var TabList = _Id(TabListId).getElementsByTagName("li");
        //alert(TabList);
        for(I = 0;I < TabList.length;I ++){
          TabList[I].className = "";
        }
        var Iframe = D.createElement("iframe");
        Iframe.id = "IFR"+this.TabsNum;
        Iframe.src = OpenUrl;
        Iframe.frameborder = 0;
        Iframe.width = "100%";
        Iframe.height = "100%";
        var A = D.createElement("a");
        A.href = "javascript:;";
        A.id = "IFA"+this.TabsNum;
        A.innerHTML = PageTitle;
        A.setAttribute("data-if",Iframe.id);
        A.setAttribute("onclick","Public.Tabs.View(this)");
        var Li = D.createElement("li");
        Li.id = "IFL"+this.TabsNum;
        Li.className = "on";
        Li.setAttribute("data-if",Iframe.id);
        var Close = D.createElement("a");
        Close.href = "javascript:;";
        Close.innerHTML = " x ";
        Close.setAttribute("data-li",Li.id);
        Close.setAttribute("data-if",Iframe.id);
        Close.setAttribute("onclick","Public.Tabs.Close(this)");
        this.TabsNum++;
        _Id(TabListId).appendChild(Li);
        _Id(Li.id).appendChild(A);
        _Id(Li.id).appendChild(Close);
        _Id(WindowId).appendChild(Iframe);
      },
      View:function(O){
        var IframeList = _Id(this.WindowId).getElementsByTagName("iframe");
        for(I = 0;I < IframeList.length;I ++){
          IframeList[I].style.display = "none";
        }
        var TabList = _Id(this.TabListId).getElementsByTagName("li");
        for(I = 0;I < TabList.length;I ++){
          TabList[I].className = "";
        }
        O.parentNode.className = "on";
        _Id(O.getAttribute('data-if')).style.display = "block";
      },
      Close:function(O){
        var LiO = _Id(O.getAttribute("data-li"));
        var IFO = _Id(O.getAttribute("data-if"));
        if(LiO.nextElementSibling){
          var DisPlayLi = LiO.nextElementSibling;
        }else{
          var TabList = _Id(this.TabListId).getElementsByTagName("li");
          var DisPlayLi = TabList[TabList.length - 2];
        }
        if(IFO.nextElementSibling){
          var DisPlayIF = IFO.nextElementSibling;
        }else{
          var IfList = _Id(this.WindowId).getElementsByTagName("iframe");
          var DisPlayIF = _Id(IfList[IfList.length - 2].id);
        }
        LiO.parentNode.removeChild(LiO);
        IFO.parentNode.removeChild(IFO);
        DisPlayLi.className = "on";
        DisPlayIF.style.display = "block";
      }
    }
  };
})();

这些是JAVASCRIPT的基本知识,如果是新手的话,我觉得这些不够你们学习,你可以去找些资料完整的学习下JAVASCRIPT。

这些对于已经有一些JAVASCRIPT基础的朋友,可以先浏览下这些知识,或许其中有你已经遗忘的或者遗漏的,回忆下JAVASCRIPT对你后面继续深入学下AJAX有很大的帮助。

Javascript 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
详解vue-router导航守卫
Jan 19 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 #Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 #Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 #Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 #Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 #Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 #Javascript
You might like
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jQuery入门知识简介
2010/03/04 Javascript
Ext 今日学习总结
2010/09/19 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
教你安装python Django(图文)
2013/11/04 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android