javascript 小技能(1)

2012-11-08

javascript 小技巧(1)事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcEle

javascript 小技巧(1)
事件源对象 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 document.cookie 菜单事件 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("r1"); document.getElementById(id); 定时 timer=setInterval('scrollwindow()',delay); clearInterval(timer); UNCODE编码 escape() ,unescape 父对象 obj.parentElement(dhtml) obj.parentNode(dom) 交换表的行 TableID.moveRow(2,1) 替换CSS document.all.csss.href = "a.css"; 并排显示 display:inline 隐藏焦点 hidefocus=true 根据宽度换行 style="word-break:break-all" 自动刷新 <meta HTTP-EQUIV="refresh" CONTENT="8;URL=http://c98.yeah.net"> 简单邮件 <a? href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy">? 快速转到位置 obj.scrollIntoView(true) 锚 <a name="first"> <a href="#first">anchors</a> 网页传递参数 location.search(); 可编辑 obj.contenteditable=true 执行菜单命令 obj.execCommand 双字节字符 /[^\x00-\xff]/ 汉字 /[\u4e00-\u9fa5]/ 让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; 透明背景 <IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe> 获得style内容 obj.style.cssText HTML标签 document.documentElement.innerHTML 第一个style标签 document.styleSheets[0] style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时，页面往往重置到页首端。 <a href="javascript:function()">word</a> 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document.referrer 释放内存 CollectGarbage(); 禁止右键 document.oncontextmenu = function() { return false;} 禁止保存 <noscript><iframe src="*.htm"></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" href="favicon.ico"> favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 收藏栏图标 <link rel="Bookmark" href="favicon.ico"> 查看源码 <input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'"> 关闭输入法 <input style="ime-mode:disabled"> 自动全选 <input type=text name=text1 value="123" onfocus="this.select()"> ENTER键可以让光标移到下一个输入框 <input onkeydown="if(event.keyCode==13)event.keyCode=9"> 文本框的默认值 <input type=text value="123" onfocus="alert(this.defaultValue)"> title换行 obj.title = "123&#13sdfs&#32" 获得时间所代表的微秒 var n1 = new Date("2004-10-10".replace(/-/g, "\/")).getTime() 窗口是否关闭 win.closed checkbox扁平 <input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"><br> 获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 <input? type=text? autocomplete=on>打开该功能? <input? type=text? autocomplete=off>关闭该功能??? 窗口最大化 <body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"> 无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) encodeURIComponent对":"、"/"、";" 和 "?"也编码 表格行指示 <tr onmouseover="this.bgColor='#f0f0f0'" 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;??

//过滤数字

//特殊用途

//不缓存

//正则匹配匹配中文字符的正则表达式：?[\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 匹配空行的正则表达式：\n[\s|?]*\r 匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*)?\/>/? 匹配首尾空格的正则表达式：(^\s*)|(\s*$)（像vbscript那样的trim函数）匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w-?./?%&=]*)? 以下是例子：利用正则表达式限制网页表单里的文本框输入内容：用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"?onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" 1.用正则表达式限制只能输入全角字符：?onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')"?onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))" 2.用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,'')?"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" 3.用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'')?"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

//消除图像工具栏

<IMG?SRC="mypicture.jpg"?HEIGHT="100px"?WIDTH="100px"?GALLERYIMG="false">? or <head> <meta?http-equiv="imagetoolbar"?content="no"> </head>

//无提示关闭

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?")+5,ua.indexOf(";",ua.indexOf("MSIE?")))) ??if(IEversion<?5.5) ??{ ???var?str??=?'<object?id=noTipClose?classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">' ???????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() ???} }

//取得控件得绝对位置(1)

//获得控件的绝对位置(2)

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); ?r.collapse(true); ?r.select(); } </script> <input?type=text?name=text1?value="123"?onfocus="cc()">

//页面进入和退出的特效

进入页面<meta?http-equiv="Page-Enter"?content="revealTrans(duration=x,?transition=y)"> 推出页面<meta?http-equiv="Page-Exit"?content="revealTrans(duration=x,?transition=y)">? 这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23: 　　0?矩形缩小? 　　1?矩形扩大? 　　2?圆形缩小　　3?圆形扩大? 　　4?下到上刷新? 　　5?上到下刷新　　6?左到右刷新? 　　7?右到左刷新? 　　8?竖百叶窗　　9?横百叶窗? 　　10?错位横百叶窗? 　　11?错位竖百叶窗　　12?点扩散? 　　13?左右到中间刷新? 　　14?中间到左右刷新　　15?中间到上下　　16?上下到中间? 　　17?右下到左上　　18?右上到左下? 　　19?左上到右下? 　　20?左下到右上　　21?横条? 　　22?竖条? 　　23?

//网页是否被检索

//打印分页

//设置打印

//自带的打印预览

WebBrowser.ExecWB(1,1)?打开? Web.ExecWB(2,1)?关闭现在所有的IE窗口，并打开一个新窗口? Web.ExecWB(4,1)?保存网页? Web.ExecWB(6,1)?打印? Web.ExecWB(7,1)?打印预览? Web.ExecWB(8,1)?打印页面设置? Web.ExecWB(10,1)?查看页面属性? Web.ExecWB(15,1)?好像是撤销，有待确认? Web.ExecWB(17,1)?全选? Web.ExecWB(22,1)?刷新? Web.ExecWB(45,1)?关闭窗体无提示? <style?media=print>? .Noprint{display:none;}? .PageNext{page-break-after:?always;}? </style>? <object??id="WebBrowser"??width=0??height=0??classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2">???? </object>???? ? <center?class="Noprint"?> <input?type=button?value=打印?onclick=document.all.WebBrowser.ExecWB(6,1)>? <input?type=button?value=直接打印?onclick=document.all.WebBrowser.ExecWB(6,6)>? <input?type=button?value=页面设置?onclick=document.all.WebBrowser.ExecWB(8,1)>? </p>? <p>?<input?type=button?value=打印预览?onclick=document.all.WebBrowser.ExecWB(7,1)>? </center>

//去掉打印时的页眉页脚

//浏览器验证

function?checkBrowser() {? ???this.ver=navigator.appVersion? ???this.dom=document.getElementById?1:0? ???this.ie6=(this.ver.indexOf("MSIE?6")>-1?&&?this.dom)?1:0;? ???this.ie5=(this.ver.indexOf("MSIE?5")>-1?&&?this.dom)?1:0;? ???this.ie4=(document.all?&&?!this.dom)?1:0;? ???this.ns5=(this.dom?&&?parseInt(this.ver)?>=?5)??1:0;? ???this.ns4=(document.layers?&&?!this.dom)?1:0;? ???this.mac=(this.ver.indexOf('Mac')?>?-1)??1:0;? ???this.ope=(navigator.userAgent.indexOf('Opera')>-1);? ???this.ie=(this.ie6?||?this.ie5?||?this.ie4)? ???this.ns=(this.ns4?||?this.ns5)? ???this.bw=(this.ie6?||?this.ie5?||?this.ie4?||?this.ns5?||?this.ns4?||?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="150">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:30px;dialogHeight:40px;"); } //屏蔽按键<html> <head> ??<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"> ??<noscript><meta?http-equiv="refresh"?content="0;url=about:noscript"></noscript> ??<title>屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键</title> </head> <body> <script?language="Javascript"><!-- ??//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键 ??//Author:?meizz(梅花雨)?2002-6-18 function?document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键 function?window.onhelp(){return?false}?//屏蔽F1帮助 function?document.onkeydown() { ??if?((window.event.altKey)&& ??????((window.event.keyCode==37)||???//屏蔽?Alt+?方向键?← ???????(window.event.keyCode==39)))???//屏蔽?Alt+?方向键?→ ??{ ?????alert("不准你使用ALT+方向键前进或后退网页！"); ?????event.returnValue=false; ??} ?????/*?注：这还不是真正地屏蔽?Alt+?方向键， ?????因为?Alt+?方向键弹出警告框时，按住?Alt?键不放， ?????用鼠标点掉警告框，这种屏蔽方法就失效了。以后若 ?????有哪位高手有真正屏蔽?Alt?键的方法，请告知。*/ ??if?((event.keyCode==8)??||?????????????????//屏蔽退格删除键 ??????(event.keyCode==116)||?????????????????//屏蔽?F5?刷新键 ??????(event.ctrlKey?&&?event.keyCode==82)){?//Ctrl?+?R ?????event.keyCode=0; ?????event.returnValue=false; ?????} ??if?(event.keyCode==122){event.keyCode=0;event.returnValue=false;}??//屏蔽F11 ??if?(event.ctrlKey?&&?event.keyCode==78)?event.returnValue=false;???//屏蔽?Ctrl+n ??if?(event.shiftKey?&&?event.keyCode==121)event.returnValue=false;??//屏蔽?shift+F10 ??if?(window.event.srcElement.tagName?==?"A"?&&?window.event.shiftKey)? ??????window.event.returnValue?=?false;?????????????//屏蔽?shift?加鼠标左键新开一网页 ??if?((window.event.altKey)&&(window.event.keyCode==115))?????????????//屏蔽Alt+F4 ??{ ??????window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px"); ??????return?false; ??} } </script> 屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键 </body> </html>

//屏蔽打印 <style> @media print{ * {display:none} } </style>

//移动的图层，拖动

1.<span?style='position:absolute;width:200;height:200;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> 2. <div?id="myDiv"?src="logo.gif"?ondrag="doDrag();"?onmouseover="this.style.cursor='hand'"?style="position:absolute;left=100;top=100;"?onmousedown="doMouseDown();"> <a?href="#"?onclick="return?false"><h1>wlecome</h1></a> </div> <script?language="JavaScript"?type="text/javascript"> var?orgMouseX; var?orgMouseY; var?orgObjX; var?orgObjY; function?doDrag() { var?myObject=document.all.myDiv; var?x=event.clientX; var?y=event.clientY; myObject.style.left=x-(orgMouseX-orgObjX); myObject.style.top=y-(orgMouseY-orgObjY); ? } function?doMouseDown() { orgMouseX=event.clientX; orgMouseY=event.clientY; orgObjX=parseInt(document.all.myDiv.style.left); orgObjY=parseInt(document.all.myDiv.style.top); } </script> ?

//文档状态改变

//刷新后不变的文本框

//访问剪贴板

//操作COOKIE

function?SetCookie(sName,?sValue) { ?document.cookie?=?sName?+?"="?+?escape(sValue)?+?";?"; } function?GetCookie(sName) { ?var?aCookie?=?document.cookie.split(";?"); ?for?(var?i=0;?i?<?aCookie.length;?i++) ?{ ?? ??var?aCrumb?=?aCookie[i].split("="); ??if?(sName?==?aCrumb[0])? ??return?unescape(aCrumb[1]); ?} ? } function?DelCookie(sName) { document.cookie?=?sName?+?"="?+?escape(sValue)?+?";?expires=Fri,?31?Dec?1999?23:59:59?GMT;"; }

//setTimeout增加参数

//自定义的apply,call

Function.prototype.apply?=?function?(obj,?argu)?{ ?if?(obj)?obj.constructor.prototype._caller?=?this;? ?var?argus?=?new?Array(); ?for?(var?i=0;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=1;i<arguments.length;i++) ??argu[i-1]?=?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=1;//1=adTypeBinary ??adodbStream.Open(); ??adodbStream.write(xmlHTTP.responseBody); ??adodbStream.SaveToFile(strLocalURL,2); ??adodbStream.Close(); ??adodbStream=null; ??xmlHTTP=null; ?? ?} ?catch(e) ?{ ??window.confirm("下载URL出错!"); ?} ?//window.confirm("下载完成."); }

//检验连接是否有效

//组件是否安装 isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "componentID"))

//检查网页是否存在

function?CheckURL(URL) { ??var?xmlhttp?=?new?ActiveXObject("Microsoft.XMLHTTP"); ??xmlhttp.Open("GET",URL,?false); ??try ??{? ????xmlhttp.Send();? ????var?result?=?xmlhttp.status; ??} ??catch(e)?{return(false);?} ??if(result==200) ??{? ????return?true; ??} ??xmlhttp?=?null; ??return?false; }

热点排行

Bad Request.