📄 javascript小技巧 - dooit - 博客园.htm
字号:
<LI><FONT size=2><STRONG>父对象</STRONG> <BR>obj.parentElement(dhtml)
<BR>obj.parentNode(dom)</FONT>
<LI><FONT size=2><STRONG>交换表的行 <BR></STRONG>TableID.moveRow(2,1)</FONT><FONT
size=2><STRONG>
<LI><FONT size=2><STRONG>替换CSS</STRONG> <BR></FONT>document.all.csss.href =
"a.css";<FONT size=2><STRONG>
<LI><FONT size=2><STRONG>并排显示</STRONG> <BR></FONT>display:inline<FONT size=2>
<LI><FONT size=2><STRONG>隐藏焦点 <BR></STRONG>hidefocus=true</FONT>
<LI><FONT size=2><STRONG>根据宽度换行
<BR></STRONG></FONT>style="word-break:break-all"<FONT size=2>
<LI><FONT size=2><STRONG>自动刷新 <BR></STRONG><meta HTTP-EQUIV="refresh"
CONTENT="8;URL=http://c98.yeah.net"></FONT>
<LI><FONT size=2><STRONG>简单邮件 <BR></STRONG><a href="</FONT><A
href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy"><FONT
size=2>mailto:aaa@bbb.com?subject=ccc&body=xxxyyy</FONT></A><FONT
size=2>"> </FONT>
<LI><FONT size=2><STRONG>快速转到位置
<BR></STRONG></FONT>obj.scrollIntoView(true)<FONT size=2>
<LI><FONT size=2><STRONG>锚 <BR></STRONG><a name="first"> <BR><a
href="#first">anchors</a></FONT>
<LI><FONT size=2><STRONG>网页传递参数 <BR></STRONG>location.search();</FONT>
<LI><STRONG>可编辑 <BR></STRONG>obj.contenteditable=true
<LI><FONT size=2><STRONG>执行菜单命令</STRONG> <BR>obj.execCommand</FONT>
<LI><FONT size=2><STRONG>双字节字符</STRONG> <BR>/[^\x00-\xff]/ <BR>汉字
<BR>/[\u4e00-\u9fa5]/</FONT>
<LI><STRONG>让英文字符串超出表格宽度自动换行</STRONG> <BR>word-wrap: break-word; word-break:
break-all;
<LI><STRONG>透明背景</STRONG><FONT size=2> <BR><IFRAME src="1.htm" width=300
height=180 allowtransparency></iframe></FONT>
<LI><FONT size=2><STRONG>获得style内容 <BR></STRONG>obj.style.cssText</FONT>
<LI><FONT size=2><STRONG>HTML标签</STRONG>
<BR>document.documentElement.innerHTML</FONT>
<LI><FONT size=2><STRONG>第一个style标签</STRONG>
<BR>document.styleSheets[0]</FONT>
<LI><FONT size=2><STRONG>style标签里的第一个样式</STRONG>
<BR>document.styleSheets[0].rules[0]</FONT>
<LI><STRONG>防止点击空链接时，页面往往重置到页首端。 <BR></STRONG><a
href="javascript:function()">word</a>
<LI><STRONG>上一网页源</STRONG> <BR>asp:
<BR>request.servervariables("HTTP_REFERER") <BR><FONT size=2>javascript:
<BR>document.referrer </FONT>
<LI><FONT size=2><STRONG>释放内存 <BR></STRONG>CollectGarbage();</FONT>
<LI><STRONG>禁止右键</STRONG> <BR>document.oncontextmenu = function() { return
false;}
<LI><FONT size=2><STRONG>禁止保存</STRONG> <BR><noscript><iframe
src="*.htm"></iframe></noscript> </FONT>
<LI><FONT size=2><STRONG>禁止选取</STRONG><body oncontextmenu=<SPAN
style="COLOR: #ff00ff">"return false"</SPAN> ondragstart=<SPAN
style="COLOR: #ff00ff">"return false"</SPAN> onselectstart =<SPAN
style="COLOR: #ff00ff">"return false"</SPAN> onselect=<SPAN
style="COLOR: #ff00ff">"document.selection.empty()"</SPAN> oncopy=<SPAN
style="COLOR: #ff00ff">"document.selection.empty()"</SPAN> onbeforecopy=<SPAN
style="COLOR: #ff00ff">"return false"</SPAN>onmouseup=<SPAN
style="COLOR: #ff00ff">"document.selection.empty()></SPAN><SPAN
style="COLOR: #ff00ff"> </SPAN></FONT>
<LI><FONT size=2><STRONG>禁止粘贴</STRONG> <BR><input type=text onpaste="return
false"></FONT>
<LI><FONT size=2><STRONG>地址栏图标</STRONG> <BR><link rel="Shortcut Icon"
href="favicon.ico"> <BR>favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下</FONT>
<LI><FONT size=2><STRONG>收藏栏图标</STRONG> <BR><link rel="Bookmark"
href="favicon.ico"> </FONT>
<LI><FONT size=2><STRONG>查看源码</STRONG> <BR><input type=button value=查看网页源代码
onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'"> </FONT>
<LI><FONT size=2><STRONG>关闭输入法</STRONG> <BR><input
style="ime-mode:disabled"> </FONT>
<LI><STRONG>自动全选</STRONG> <BR><input type=text name=text1 value="123"
onfocus="this.select()">
<LI><FONT size=2><STRONG>ENTER键可以让光标移到下一个输入框 <BR></STRONG><input
onkeydown="if(event.keyCode==13)event.keyCode=9"></FONT>
<LI><STRONG>文本框的默认值 <BR></STRONG><input type=text value="123"
onfocus="alert(this.defaultValue)">
<LI><STRONG>title换行 <BR></STRONG>obj.title = "123&#13sdfs&#32"
<LI><FONT size=2><STRONG>获得时间所代表的微秒 <BR></STRONG>var n1 = new
Date("2004-10-10".replace(/-/g, "\/")).getTime()</FONT>
<LI><FONT size=2><STRONG>窗口是否关闭 <BR></STRONG>win.closed </FONT>
<LI><FONT size=2><STRONG>checkbox扁平 <BR></STRONG><input type=checkbox
style="position: absolute; clip:rect(5px 15px 15px 5px)"><br></FONT>
<LI><STRONG>获取选中内容
<BR></STRONG>document.selection.createRange().duplicate().text
<LI><STRONG>自动完成功能 <BR></STRONG><input type=text
autocomplete=on>打开该功能 <BR><input type=text
autocomplete=off>关闭该功能
<LI><FONT size=2><STRONG>窗口最大化</STRONG> <BR><body
onload="window.resizeTo(window.screen.width -
4,window.screen.height-50);window.moveTo(-4,-4)"></FONT>
<LI><FONT size=2><STRONG>无关闭按钮IE <BR></STRONG>window.open("aa.htm", "meizz",
"fullscreen=7"); </FONT>
<LI><STRONG>统一编码/解码
<BR></STRONG>alert(decodeURIComponent(encodeURIComponent("http://你好.com?as=
hehe"))) <BR>encodeURIComponent对":"、"/"、";" 和 "?"也编码
<LI><STRONG>表格行指示 <BR></STRONG><tr onmouseover="this.bgColor='#f0f0f0'"
onmouseout="this.bgColor='#ffffff'">
<P><BR><STRONG>//各种尺寸</STRONG> </P>
<DIV
style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee">s += <SPAN
style="COLOR: #ff00ff">"\r\n网页可见区域宽："</SPAN>+ document.body.clientWidth;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页可见区域高："</SPAN>+ document.body.clientHeight;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页可见区域高："</SPAN>+ document.body.offsetWeight +<SPAN
style="COLOR: #ff00ff">" (包括边线的宽)"</SPAN>;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页可见区域高："</SPAN>+ document.body.offsetHeight +<SPAN
style="COLOR: #ff00ff">" (包括边线的宽)"</SPAN>;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页正文全文宽："</SPAN>+ document.body.scrollWidth;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页正文全文高："</SPAN>+ document.body.scrollHeight;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页被卷去的高："</SPAN>+ document.body.scrollTop;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页被卷去的左："</SPAN>+ document.body.scrollLeft;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页正文部分上："</SPAN>+ window.screenTop;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n网页正文部分左："</SPAN>+ window.screenLeft;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n屏幕分辨率的高："</SPAN>+ window.screen.height;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n屏幕分辨率的宽："</SPAN>+ window.screen.width;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n屏幕可用工作区高度："</SPAN>+ window.screen.availHeight;
<BR>s += <SPAN
style="COLOR: #ff00ff">"\r\n屏幕可用工作区宽度："</SPAN>+ window.screen.availWidth;
</DIV></FONT></FONT></FONT></STRONG></FONT></STRONG></FONT></LI></UL>
<P><FONT size=2><STRONG>//过滤数字</STRONG>
<DIV
style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><input type=text onkeypress=<SPAN
style="COLOR: #ff00ff">"return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)"</SPAN> onpaste=<SPAN
style="COLOR: #ff00ff">"return !clipboardData.getData('text').match(/\D/)"</SPAN> ondragenter=<SPAN
style="COLOR: #ff00ff">"return false"</SPAN>> </DIV></FONT>
<P></P>
<P><FONT size=2><STRONG>//特殊用途</STRONG>
<DIV
style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><input type=button value=导入收藏夹 onclick=<SPAN
style="COLOR: #ff00ff">"window.external.ImportExportFavorites(true,'http:<SPAN
style="COLOR: #008000">//localhost');"</SPAN>>
</SPAN><BR><input type=button value=导出收藏夹 onclick=<SPAN
style="COLOR: #ff00ff">"window.external.ImportExportFavorites(false,'http:<SPAN
style="COLOR: #008000">//localhost');"</SPAN>>
</SPAN><BR><input type=button value=整理收藏夹 onclick=<SPAN
style="COLOR: #ff00ff">"window.external.ShowBrowserUI('OrganizeFavorites', null)"</SPAN>>
<BR><input type=button value=语言设置 onclick=<SPAN
style="COLOR: #ff00ff">"window.external.ShowBrowserUI('LanguageDialog', null)"</SPAN>>
<BR><input type=button value=加入收藏夹 onclick=<SPAN
style="COLOR: #ff00ff">"window.external.AddFavorite('http:<SPAN
style="COLOR: #008000">//www.google.com/', 'google')"</SPAN>>
</SPAN><BR><input type=button value=加入到频道 onclick=<SPAN
style="COLOR: #ff00ff">"window.external.addChannel('http:<SPAN
style="COLOR: #008000">//www.google.com/')"</SPAN>>
</SPAN><BR><input type=button value=加入到频道 onclick=<SPAN
style="COLOR: #ff00ff">"window.external.showBrowserUI('PrivacySettings',null)"</SPAN>>
</DIV></FONT>
<P></P>
<P><FONT size=2><STRONG>//不缓存</STRONG>
<DIV
style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee"><META HTTP-EQUIV=<SPAN
style="COLOR: #ff00ff">"pragma"</SPAN> CONTENT=<SPAN
style="COLOR: #ff00ff">"no-cache"</SPAN>> <BR><META HTTP-EQUIV=<SPAN
style="COLOR: #ff00ff">"Cache-Control"</SPAN> CONTENT=<SPAN
style="COLOR: #ff00ff">"no-cache, must-revalidate"</SPAN>>
<BR><META HTTP-EQUIV=<SPAN
style="COLOR: #ff00ff">"expires"</SPAN> CONTENT=<SPAN
style="COLOR: #ff00ff">"0"</SPAN>> </DIV>
<P></P></FONT>
<P></P>
<P><FONT size=2></FONT></P><BR><FONT size=2><STRONG>//正则匹配</STRONG></FONT>
<P></P><FONT size=2>
<DIV
style="BORDER-RIGHT: #8a8a8a 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #8a8a8a 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; MARGIN: 4px; OVERFLOW: auto; BORDER-LEFT: #8a8a8a 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #8a8a8a 1px solid; FONT-FAMILY: Courier New; BACKGROUND-COLOR: #eeeeee">匹配中文字符的正则表达式： [\u4e00-\u9fa5]
<BR>匹配双字节字符(包括汉字在内)：[^\x00-\xff] <BR>匹配空行的正则表达式：\n[\s| ]*\r
<BR>匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
<BR>匹配首尾空格的正则表达式：(^\s*)|(\s*$)（像vbscript那样的trim函数）
<BR>匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
<BR>匹配网址URL的正则表达式：http:<SPAN
style="COLOR: #008000">//([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
</SPAN><BR>以下是例子： <BR>利用正则表达式限制网页表单里的文本框输入内容： <BR>用正则表达式限制只能输入中文：onkeyup=<SPAN
style="COLOR: #ff00ff">"value=value.replace(/[^\u4E00-\u9FA5]/g,'')"</SPAN> onbeforepaste=<SPAN
style="COLOR: #ff00ff">"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"</SPAN>
<BR>1.用正则表达式限制只能输入全角字符： onkeyup=<SPAN
style="COLOR: #ff00ff">"value=value.replace(/[^\uFF00-\uFFFF]/g,'')"</SPAN> onbeforepaste=<SPAN
style="COLOR: #ff00ff">"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"</SPAN>
<BR>2.用正则表达式限制只能输入数字：onkeyup=<SPAN
style="COLOR: #ff00ff">"value=value.replace(/[^\d]/g,'') "</SPAN>onbeforepaste=<SPAN
style="COLOR: #ff00ff">"clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"</SPAN>
<BR>3.用正则表达式限制只能输入数字和英文：onkeyup=<SPAN
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -