ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript のスキルを整理するためによく使用される JavaScript のメソッド
整理了一些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有很大的帮助。