Commonly used methods of javascript to organize_javascript skills
整理了一些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有很大的帮助。

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

This article series was rewritten in mid 2017 with up-to-date information and fresh examples. In this JSON example, we will look at how we can store simple values in a file using JSON format. Using the key-value pair notation, we can store any kind

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig
