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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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











Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.
