常用的一些javascript小技巧
阿新 • • 發佈：2018-11-22
常用的一些javascript小技巧
[作者：oror，from藍色理想]
事件源物件
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[索引] |
物件繫結事件
外掛數目
| navigator.plugins |
取變數型別
| typeof($js_libpath) == "undefined" |
下拉框
| 下拉框.options[索引] 下拉框.options.length |
查詢物件
document.getElementsByName("r1"); document.getElementById(id); |
定時
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:[email protected]?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 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
sdfs " |
獲得時間所代表的微秒
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)"> |
獲取選中內容
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對":"、"/"、";" 和 "?"也編碼 |
表格行指示
//各種尺寸
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; |
//不快取
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0"> |
//正則匹配
匹配中文字元的正則表示式： [/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- ./?%&=]*)? |
以下是例子：
利用正則表示式限制網頁表單裡的文字框輸入內容：
//消除影象工具欄
[/html]
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false">
or
<head>
<meta http-equiv="imagetoolbar" content="no">
</head>
[/html]
//取得控制元件得絕對位置(1)
[Ctrl+A 全部選擇 提示：你可先修改部分程式碼，再按執行]
//獲得控制元件的絕對位置(2)
oRect = obj.getBoundingClientRect(); oRect.left oRect. |
//列印分頁
<p style="page-break-after:always">page1</p> <p style="page-break-after:always">page2</p> |
//設定列印
[Ctrl+A 全部選擇 提示：你可先修改部分程式碼，再按執行]
//自帶的列印預覽
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> |
//去掉列印時的頁首頁尾
[Ctrl+A 全部選擇 提示：你可先修改部分程式碼，再按執行]
//無模式的提示框
function modelessAlert(Msg) { window.showModelessDialog("javascript:alert(/""+escape(Msg)+"/");window.close();","","status:no;resizable:no;help:no;dialogHeight:height:30px;dialogHeight:40px;"); } |
//下載檔案
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("下載完成."); } |
//檢驗連線是否有效
function getXML(URL) { var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); xmlhttp.Open("GET",URL, false); try { xmlhttp.Send(); } catch(e){} finally { var result = xmlhttp.responseText; if(result) { if(xmlhttp.Status==200) { return(true); } else { return(false); } } else { return(false); } } } |
//檢查網頁是否存在
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; } |
//禁止FSO
1.登出元件 regsvr32 /u scrrun.dll 2.修改PROGID HKEY_CLASSES_ROOT/Scripting.FileSystemObject Scripting.FileSystemObject 3.對於使用object的使用者，修改HKEY_CLASSES_ROOT/Scripting. |