知识大全 javascript技巧参考

Posted 2022-07-20 知

篇首语：读不在三更五鼓，功只怕一曝十寒。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 javascript技巧参考相关的知识，希望对你有一定的参考价值。

　　事件源对象 event srcElement tagName event srcElement type 捕获释放 event srcElement setCapture(); event srcElement releaseCapture(); 事件按键 event keyCode event shiftKey event altKey event ctrlKey 事件返回值 event returnValue 鼠标位置 event x event y 窗体活动元素 document activeElement 绑定事件 document captureEvents(Event KEYDOWN); 访问窗体元素 document all( txt ) focus(); document all( txt ) select(); 窗体命令 document execCommand 窗体COOKIE okie 菜单事件 document oncontextmenu 创建元素 document createElement( SPAN ); 根据鼠标获得元素 document elementFromPoint(event x event y) tagName== TD document elementFromPoint(event x event y) appendChild(ms) 窗体图片 document images[索引] 窗体事件绑定 document onmousedown=scrollwindow; 元素 document 窗体 elements[索引] 对象绑定事件 document all xxx detachEvent( onclick a); 插件数目 navigator plugins 取变量类型 typeof($js_libpath) == undefined 下拉框下拉框 options[索引] 下拉框 options length 查找对象 document getElementsByName( r ); document getElementById(id); 定时 timer=setInterval( scrollwindow() delay); clearInterval(timer); UNCODE编码 escape() unescape 父对象 obj parentElement(dHTML) obj parentNode(dom) 交换表的行 TableID moveRow( ) 替换CSS document all CSSs href = a CSS ; 并排显示 display:inline 隐藏焦点 hidefocus=true 根据宽度换行自动刷新 <meta HTTP EQUIV= refresh CONTENT= ;URL= > 简单邮件 <a mailto:?subject=ccc&body=xxxyyy > 快速转到位置 obj scrollIntoView(true) 锚 <a name= first > <a #first >anchors</a> 网页传递参数 location search(); 可编辑 ntenteditable=true 执行菜单命令 obj execCommand 双字节字符 /[^\\x \\xff]/ 汉字 /[\\u e \\u fa ]/ 让英文字符串超出表格宽度自动换行 word wrap: break word; word break: break all; 透明背景 <IFRAME src= / / width= height= allowtransparency></iframe> 获得style内容 obj style CSSText HTML标签 document documentElement innerHTML 第一个style标签 document styleSheets[ ] style标签里的第一个样式 document styleSheets[ ] rules[ ] 防止点击空链接时页面往往重置到页首端 <a JavaScript:function() >word</a> 上一网页源 ASP: request servervariables( HTTP_REFERER ) JavaScript: document referrer 释放内存 CollectGarbage(); 禁止右键 document oncontextmenu = function() return false; 禁止保存 <noscript><iframe src= ></iframe></noscript> 禁止选取<body oncontextmenu= return false ondragstart= return false onselectstart = return false onselect= document selection empty() oncopy= document selection empty() onbeforecopy= return false onmouseup= document selection empty()> 禁止粘贴 <input type=text onpaste= return false > 地址栏图标 <link rel= Shortcut Icon > favicon ico 名字最好不变 * 的色放虚拟目录根目录下收藏栏图标 <link rel= Bookmark > 查看源码 <input type=button value=查看网页源代码 onclick= window location = view source: + > 关闭输入法 <input > 自动全选 <input type=text name=text value= onfocus= this select() > ENTER键可以让光标移到下一个输入框 <input onkeydown= if(event keyCode== )event keyCode= > 文本框的默认值 <input type=text value= onfocus= alert(this defaultValue) > title换行 obj title = sdfs 获得时间所代表的微秒 var n = new Date( replace(/ /g \\/ )) getTime() 窗口是否关闭 win closed checkbox扁平 <input type=checkbox ><br> 获取选中内容 document selection createRange() duplicate() text 自动完成功能 <input type=text autoplete=on>打开该功能 <input type=text autoplete=off>关闭该功能窗口最大化 <body onload= window resizeTo(window screen width window screen height );window moveTo( ) > 无关闭按钮IE window open( meizz fullscreen= ); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent(//你?as= hehe ))) encodeURIComponent对 : / ; 和 ? 也编码表格行指示 <tr onmouseover= this bgColor= #f f f onmouseout= this bgColor= #ffffff >

　　//各种尺寸

　　s += \\r\\n网页可见区域宽 + document body clientWidth; s += \\r\\n网页可见区域高 + document body clientHeight; s += \\r\\n网页可见区域高 + document body offsetWeight + (包括边线的宽) ; s += \\r\\n网页可见区域高 + document body offsetHeight + (包括边线的宽) ; s += \\r\\n网页正文全文宽 + document body scrollWidth; s += \\r\\n网页正文全文高 + document body scrollHeight; s += \\r\\n网页被卷去的高 + document body scrollTop; s += \\r\\n网页被卷去的左 + document body scrollLeft; s += \\r\\n网页正文部分上 + window screenTop; s += \\r\\n网页正文部分左 + window screenLeft; s += \\r\\n屏幕分辨率的高 + window screen height; s += \\r\\n屏幕分辨率的宽 + window screen width; s += \\r\\n屏幕可用工作区高度 + window screen availHeight; s += \\r\\n屏幕可用工作区宽度 + window screen availWidth; //过滤数字

<input type=text onkeypress= return event keyCode>= &&event keyCode<= ||(this value indexOf( )< ?event keyCode== :false) onpaste= return !clipboardData getData( text ) match(/\\D/) ondragenter= return false >

　　//特殊用途

　　//不缓存

　　//正则匹配

　　匹配中文字符的正则表达式 [\\u e \\u fa ] 匹配双字节字符(包括汉字在内) [^\\x \\xff] 匹配空行的正则表达式 \\n[\\s| ]*\\r 匹配HTML标记的正则表达式 /<( *)> *<\\/\\ >|<( *) \\/>/ 匹配首尾空格的正则表达式 (^\\s*)|(\\s*$)（像vbscript那样的trim函数）匹配Email地址的正则表达式 \\w+([ + ]\\w+)*@\\w+([ ]\\w+)*\\ \\w+([ ]\\w+)* 匹配网址URL的正则表达式//([\\w ]+\\ )+[\\w ]+(/[\\w /?%&=]*)? 以下是例子利用正则表达式限制网页表单里的文本框输入内容用正则表达式限制只能输入中文 onkeyup= value=value replace(/[^\\u E \\u FA ]/g ) onbeforepaste= clipboardData setData( text clipboardData getData( text ) replace(/[^\\u E \\u FA ]/g )) 用正则表达式限制只能输入全角字符 onkeyup= value=value replace(/[^\\uFF \\uFFFF]/g ) onbeforepaste= clipboardData setData( text clipboardData getData( text ) replace(/[^\\uFF \\uFFFF]/g )) 用正则表达式限制只能输入数字 onkeyup= value=value replace(/[^\\d]/g ) onbeforepaste= clipboardData setData( text clipboardData getData( text ) replace(/[^\\d]/g )) 用正则表达式限制只能输入数字和英文 onkeyup= value=value replace(/[\\W]/g ) onbeforepaste= clipboardData setData( text clipboardData getData( text ) replace(/[^\\d]/g )) //消除图像工具栏

　　//无提示关闭

　　function Close() var ua=navigator userAgent var ie=navigator appName== Microsoft Internet Explorer ?true:false if(ie) var IEversion=parseFloat(ua substring(ua indexOf( MSIE )+ ua indexOf( ; ua indexOf( MSIE )))) if(IEversion< ) var str = <object id=noTipClose classid= clsid:ADB A D FF CF AA B A > str += <param name= Command value= Close ></object> ; document body insertAdjacentHTML( beforeEnd str); document all noTipClose Click(); else window opener =null; window close(); else window close() //取得控件得绝对位置( )

　　<script language= JavaScript > function getoffset(e) var t=e offsetTop; var l=e offsetLeft; while(e=e offsetParent) t+=e offsetTop; l+=e offsetLeft; var rec = new Array( ); rec[ ] = t; rec[ ] = l; return rec </script> //获得控件的绝对位置( )

　　oRect = obj getBoundingClientRect(); oRect left oRect //最小化最大化关闭

　　//光标停在文字最后

　　<script language= JavaScript > function cc() var e = event srcElement; var r =e createTextRange(); r moveStart( character e value length); llapse(true); r select(); </script> <input type=text name=text value= onfocus= cc() > //页面进入和退出的特效

　　进入页面<meta equiv= Page Enter content= revealTrans(duration=x transition=y) > 推出页面<meta equiv= Page Exit content= revealTrans(duration=x transition=y) > 这个是页面被载入和调出时的一些特效 duration表示特效的持续时间以秒为单位 transition表示使用哪种特效取值为 : 　　矩形缩小　　矩形扩大　　圆形缩小　　圆形扩大　　下到上刷新　　上到下刷新　　左到右刷新　　右到左刷新　　竖百叶窗　　横百叶窗　　错位横百叶窗　　错位竖百叶窗　　点扩散　　左右到中间刷新　　中间到左右刷新　　中间到上下　　上下到中间　　右下到左上　　右上到左下　　左上到右下　　左下到右上　　横条　　竖条　　 //网页是否被检索

　　<meta name= ROBOTS content= 属性值 > 　　其中属性值有以下一些: 　　属性值为 all : 文件将被检索且页上链接可被查询　　属性值为 none : 文件不被检索而且不查询页上的链接　　属性值为 index : 文件将被检索　　属性值为 follow : 查询页上的链接　　属性值为 noindex : 文件不检索但可被查询链接　　属性值为 nofollow :

　　//打印分页

　　//设置打印

　　WebBrowser ExecWB( ) 打开 Web ExecWB( ) 关闭现在所有的IE窗口并打开一个新窗口 Web ExecWB( ) 保存网页 Web ExecWB( ) 打印 Web ExecWB( ) 打印预览 Web ExecWB( ) 打印页面设置 Web ExecWB( ) 查看页面属性 Web ExecWB( ) 好像是撤销有待确认 Web ExecWB( ) 全选 Web ExecWB( ) 刷新 Web ExecWB( ) 关闭窗体无提示 <style media=print> Noprintdisplay:none;<! 用本样式在打印时隐藏非打印项目 > PageNextpage break after: always;<! 控制分页 > </style> <object id= WebBrowser width= height= classid= CLSID: F A D A B C FD A > </object> <center class= Noprint > <input type=button value=打印 onclick=document all WebBrowser ExecWB( )> <input type=button value=直接打印 onclick=document all WebBrowser ExecWB( )> <input type=button value=页面设置 onclick=document all WebBrowser ExecWB( )> </p> <p> <input type=button value=打印预览 onclick=document all WebBrowser ExecWB( )> </center> //去掉打印时的页眉页脚

　　<script language= JavaScript > var HKEY_Root HKEY_Path HKEY_Key; HKEY_Root= HKEY_CURRENT_USER ; HKEY_Path= \\\\Sofare\\\\Microsoft\\\\Internet Explorer\\\\PageSetup\\\\ ; //设置网页打印的页眉页脚为空 function PageSetup_Null() try var Wsh=new ActiveXObject( WScript Shell ); HKEY_Key= header ; Wsh RegWrite(HKEY_Root+HKEY_Path+HKEY_Key ); HKEY_Key= footer ; Wsh RegWrite(HKEY_Root+HKEY_Path+HKEY_Key ); catch(e) //设置网页打印的页眉页脚为默认值 function PageSetup_Default() try var Wsh=new ActiveXObject( WScript Shell ); HKEY_Key= header ; Wsh RegWrite(HKEY_Root+HKEY_Path+HKEY_Key &w&b页码 &p/&P ); HKEY_Key= footer ; Wsh RegWrite(HKEY_Root+HKEY_Path+HKEY_Key &u&b&d ); catch(e) </script> <input type= button value= 清空页码 onclick=PageSetup_Null()> <input type= button value= 恢复页码 onclick=PageSetup_Default()> //浏览器验证

　　function checkBrowser() this ver=navigator appVersion this dom=document getElementById? : this ie =(this ver indexOf( MSIE )> && this dom)? : ; this ie =(this ver indexOf( MSIE )> && this dom)? : ; this ie =(document all && !this dom)? : ; this ns =(this dom && parseInt(this ver) >= ) ? : ; this ns =(document layers && !this dom)? : ; this mac=(this ver indexOf( Mac ) > ) ? : ; this ope=(navigator userAgent indexOf( Opera )> ); this ie=(this ie || this ie || this ie ) this ns=(this ns || this ns ) this bw=(this ie || this ie || this ie || this ns || this ns || this mac || this ope) this nbw=(!this bw) return this; //计算内容宽和高

　　<SCRIPT language= JavaScript > function test(obj) var range = obj createTextRange(); alert( 内容区宽度: + range boundingWidth + px\\r\\n内容区高度: + range boundingHeight + px ); </SCRIPT> <BODY> <Textarea id= txt height= >sdf</textarea><INPUT type= button value= 计算内容宽度 onClick= test(txt) > </BODY> //无模式的提示框

　　function modelessAlert(Msg) window showModelessDialog( JavaScript:alert(\\ +escape(Msg)+ \\ );window close(); status:no;resizable:no;help:no;dialogHeight:height: px;dialogHeight: px; );

　　//屏蔽按键

　　<HTML> <head> <meta equiv= Content Type content= text/HTML; charset=gb > <noscript><meta equiv= refresh content= ;url=about:noscript ></noscript> <title>屏蔽鼠标右键 Ctrl+N Shift+F Alt+F F F 刷新退格键</title> </head> <body> <script language= JavaScript ><! //屏蔽鼠标右键 Ctrl+N Shift+F F F 刷新退格键 //Author: meizz(梅花雨) function document oncontextmenu()event returnValue=false;//屏蔽鼠标右键 function window onhelp()return false //屏蔽F 帮助 function document onkeydown() if ((window event altKey)&& ((window event keyCode== )|| //屏蔽 Alt+ 方向键 ← (window event keyCode== ))) //屏蔽 Alt+ 方向键 → alert( 不准你使用ALT+方向键前进或后退网页！ ); event returnValue=false; /* 注这还不是真正地屏蔽 Alt+ 方向键因为 Alt+ 方向键弹出警告框时按住 Alt 键不放用鼠标点掉警告框这种屏蔽方法就失效了以后若有哪位高手有真正屏蔽 Alt 键的方法请告知 */ if ((event keyCode== ) || //屏蔽退格删除键 (event keyCode== )|| //屏蔽 F 刷新键 (event ctrlKey && event keyCode== )) //Ctrl + R event keyCode= ; event returnValue=false; if (event keyCode== )event keyCode= ;event returnValue=false; //屏蔽F if (event ctrlKey && event keyCode== ) event returnValue=false; //屏蔽 Ctrl+n if (event shiftKey && event keyCode== )event returnValue=false; //屏蔽 shift+F if (window event srcElement tagName == A && window event shiftKey) window event returnValue = false; //屏蔽 shift 加鼠标左键新开一网页 if ((window event altKey)&&(window event keyCode== )) //屏蔽Alt+F window showModelessDialog( about:blank dialogWidth: px;dialogheight: px ); return false; </script> 屏蔽鼠标右键 Ctrl+N Shift+F Alt+F F F 刷新退格键 </body> </HTML> //屏蔽打印 <style> @media print * display:none </style>

　　//移动的图层拖动

　　 <span style= position:absolute;width: ;height: ;background:red onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>meizz</span> <script language=JavaScript> var Obj; function MouseDown(obj) Obj=obj; Obj setCapture(); Obj l=event x Obj style pixelLeft; Obj t=event y Obj style pixelTop; function MouseMove() if(Obj!=null) Obj style left = event x Obj l; Obj style top = event y Obj t; function MouseUp() if(Obj!=null) Obj releaseCapture(); Obj=null; </script> <div id= myDiv src= / / LOGO gif ondrag= doDrag(); onmouseover= this style cursor= hand onmousedown= doMouseDown(); > <a # onclick= return false ><h >wlee</h ></a> </div> <script language= JavaScript type= text/JavaScript > var MouseX; var MouseY; var ObjX; var ObjY; function doDrag() var myObject=document all myDiv;

　　var x=event clientX; var y=event clientY; myObject style left=x (MouseX ObjX); myObject style top=y (MouseY ObjY); function doMouseDown() MouseX=event clientX; MouseY=event clientY; ObjX=parseInt(document all myDiv style left); ObjY=parseInt(document all myDiv style top);

　　</script> //文档状态改变

　　<iframe src= / / a HTML id= f name= f scrolling= no frameborder= marginwidth= marginheight= ></iframe> <script> var doc=window frames[ f ] document; function s() if (doc readyState== plete ) document all f style height=doc body scrollHeight document all f style width=doc body scrollWidth doc onreadystatechange=s </script>

　　//刷新后不变的文本框

　　<HTML> <HEAD> <META NAME= save CONTENT= history > <STYLE> sHistory behavior:url(#default#savehistory); </STYLE> </HEAD> <BODY> <INPUT class=sHistory type=text id=oPersistInput> </BODY> </HTML>

　　//访问剪贴板

　　( )拖拽访问 event dataTransfer setData( URL oImage src); sImageURL = event dataTransfer getData( URL ) ( )普通访问 window clipboardData setData( Text oSource innerText); window clipboardData getData( Text );

　　//操作COOKIE

　　function SetCookie(sName sValue) okie = sName + = + escape(sValue) + ; ; function GetCookie(sName) var aCookie = okie split( ; ); for (var i= ; i < aCookie length; i++) var aCrumb = aCookie[i] split( = ); if (sName == aCrumb[ ]) return unescape(aCrumb[ ]); function DelCookie(sName) okie = sName + = + escape(sValue) + ; expires=Fri Dec : : GMT; ; //setTimeout增加参数

　　<script> var _st = window setTimeout; window setTimeout = function(fRef mDelay) if(typeof fRef == function ) var argu = Array prototype slice call(arguments ); var f = (function() fRef apply(null argu); ); return _st(f mDelay); return _st(fRef mDelay); function test(x) alert(x); window setTimeout(test fason ); </script>

　　//自定义的apply call

　　Function prototype apply = function (obj argu) if (obj) nstructor prototype _caller = this; var argus = new Array(); for (var i= ;i<argu length;i++) argus[i] = argu[ + i + ] ; var r; eval( r = + (obj ? ( obj _caller( + argus join( ) + ); ) : ( this( + argus join( ) + ); ))); return r; ; Function prototype call = function (obj) var argu = new Array(); for (var i= ;i<arguments length;i++) argu[i ] = arguments[i]; return this apply(obj argu); ;

　　//下载文件

　　function DownURL(strRemoteURL strLocalURL) try var XMLHTTP=new ActiveXObject( Microsoft XMLHTTP ); XMLHTTP open( Get strRemoteURL false); XMLHTTP send(); var adodbStream=new ActiveXObject( ADODB Stream ); adodbStream Type= ;// =adTypeBinary adodbStream Open(); adodbStream write(XMLHTTP responseBody); adodbStream SaveToFile(strLocalURL ); adodbStream Close(); adodbStream=null; XMLHTTP=null; catch(e) nfirm( 下载URL出错! ); //nfirm( 下载完成 );

　　//检验连接是否有效

　　function getXML(URL) var XML = new ActiveXObject( microsoft XML ); XML Open( GET URL false); try XML Send(); catch(e) finally var result = XML responseText; if(result) if(XML Status== ) return(true); else return(false); else return(false); //POST代替FORM

　　<SCRIPT language= VBScript > Function URLEncoding(vstrIn) strReturn = For i = To Len(vstrIn) ThisChr = Mid(vStrIn i ) If Abs(Asc(ThisChr)) < &HFF Then strReturn = strReturn & ThisChr Else innerCode = Asc(ThisChr) If innerCode < Then innerCode = innerCode + &H End If Hight = (innerCode And &HFF )\\ &HFF Low = innerCode And &HFF strReturn = strReturn & % & Hex(Hight ) & % & Hex(Low ) End If Next URLEncoding = strReturn End Function Function bytes BSTR(vIn) strReturn = For i = To LenB(vIn) ThisCharCode = AscB(MidB(vIn i )) If ThisCharCode < &H Then strReturn = strReturn & Chr(ThisCharCode) Else NextCharCode = AscB(MidB(vIn i+ )) strReturn = strReturn & Chr(CLng(ThisCharCode) * &H + CInt(NextCharCode)) i = i + End If Next bytes BSTR = strReturn End Function dim strA oReq strA = URLEncoding( submit =Submit&text =中文 ) set oReq = CreateObject( MSXML XMLHTTP ) oReq open POST false oReq setRequestHeader Content Length Len(strA) oReq setRequestHeader CONTENT TYPE application/x form urlencoded oReq send strA msgbox bytes BSTR(oReq responseBody) </SCRIPT> //readyState是XML返回数据的进度 =载入中 =未初始化 =已载入 =运行中 =完成

　　//组件是否安装 isComponentInstalled( B A B A EC D D B FF A A ponentID ))

　　//检查网页是否存在

　　function CheckURL(URL) var XML = new ActiveXObject( Microsoft XMLHTTP ); XML Open( GET URL false); try XML Send(); var result = XML status; catch(e) return(false); if(result== ) return true; XML = null; return false; //连接数据库

　　<script language= JavaScript > //用 JavaScript 写服务器端连接数据库的代码示例 var conn = new ActiveXObject( ADODB Connection ); conn Open( Provider=SQLOLEDB ; Data Source=localhost; User ID=sa; + Password=; Initial Catalog=pubs ); var rs = new ActiveXObject( ADODB Recordset ); var sql= select * from authors ; rs open(sql conn); sHTML = <table width= % border= > ; sHTML += <tr bgcolor= #f f f ><td>au_id</td><td>au_lname</td><td>au_fname</td><td>phone</td><td>address</td><td> city</td><td>state</td><td>zip</td></tr> ; while(!rs EOF) sHTML += <tr><td> + rs( au_id ) + </td><td> + rs( au_lname ) + </td><td> + rs( au_fname ) + </td><td> + rs( phone ) + </td><td> + rs( address ) + </td><td> + rs( city ) + </td><td> + rs( state ) + </td><td> + rs( zip ) + </td></tr> ; rs moveNext; sHTML += </table> ; document write(sHTML); rs close(); rs = null; conn close(); conn = null; </script> //使用数据岛

<HTML> <body> srno <input type=text datasrc= / /#XMLdate DataFLD=srno size= ><BR> times <input type=text datasrc= / /#XMLdate DataFLD=times size= ><BR> <input id= first TYPE=button value= <<　第一条记录 onclick= XMLdate recordset moveFirst() > <input id= prev TYPE=button value= <上一条记录 onclick= XMLdate recordset movePrevious() > <input id= next TYPE=button value= 下一条记录> onclick= XMLdate recordset moveNext() > <input id= last TYPE=button value= 最后一条记录>> onclick= XMLdate recordset moveLast() > <input id= Add TYPE=button value= 添加新记录 onclick= XMLdate recordset addNew() >

　　<XML ID= XMLdate > <infolist> <info ><srno> </srno><times>null</times></info> <info ><srno> </srno><times> 年月日点分秒</times></info> </infolist> </XML> </body> </HTML> //获得参数

　　<body> <a JavaScript:location href=location href + ?a= &b= >search</a> <script language= JavaScript > <! var a = location search substr( ); if(a length> ) var re = /([^&]*?)\\=([^&]*)/g var s = a match(re); for(var i= ;i<s length;i++) alert(s[i]); alert(s[i] split( = )[ ]); // > </script> </body> //可编辑SELECT

cha138/Article/program/Java/Javascript/201311/25336