天天看點

Web中常用的Javascript技巧(1)

< doctype html public -wcdtd xhtml stricten httpwwwworgtrxhtmldtdxhtml-strictdtd> 事件源對象 

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.getelementbyidx(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="***" 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="http://www.blog.com.cn/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="http://www.blog.com.cn/*.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="http://www.blog.com.cn/123" onfocus="this.select()"> 

enter鍵可以讓光标移到下一個輸入框

<input onkeydown="if(event.keycode==13)event.keycode=9">

文本框的預設值

<input type=text value="http://www.blog.com.cn/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)"> 

擷取選中内容 

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- ./?%&=]*)? 

以下是例子:  #javascript/ajax專欄