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 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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默认安装产生系统漏洞
2006/10/09 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
JQquery的一些使用心得分享
2012/08/01 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
在Python中使用元类的教程
2015/04/28 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
pycharm创建一个python包方法图解
2019/04/10 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
经销商培训邀请函
2014/01/21 职场文书
合作投资意向书
2014/04/01 职场文书
2014年师德承诺书
2014/05/23 职场文书
体育口号大全
2014/06/18 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
五四青年节活动总结
2015/02/10 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle