javascript小技巧[轉]

時間  2019-11-20
標籤 javascript 技巧 欄目 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 
    document.cookie    
  • 菜單事件 
    document.oncontextmenu    
  • 建立元素 
    document.createElement("span");     
  • 根據鼠標得到元素： 
    document.elementFromPoint(event.x,event.y).tagName
    document.elementFromPoint(event.x,event.y).appendChild(ms)     
  • 窗體圖片 
    document.images[index]    
  • 窗體事件綁定 
    document.onmousedown=scrollwindow;    
  • 元素 
    document.窗體.elements[索引]    
  • 對象綁定事件 
    document.all.xxx.detachEvent('onclick',a);    
  • 插件數目 
    navigator.plugins    
  • 取變量類型 
    typeof($js_libpath) == "undefined"    
  • 下拉框 
    下拉框.options[index] 
    下拉框.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.css.href = "a.css";    
  • 並排顯示 
    display:inline    
  • 隱藏焦點 
    hidefocus=true    
  • 根據寬度換行 
    style="word-break:break-all"
  • 自動刷新 
    <meta HTTP-EQUIV="refresh" CONTENT="5;URL=http://hi.baidu.com/atoat/">    
  • 簡單郵件 
    <a  href=atoat
  • 快速轉到位置 
    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’」>    

    //各類尺寸 javascript

    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;   

     

//過濾數字css

<input type=text onkeypress=「return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf(’.')<0?event.keyCode==46:false)」 onpaste=「return !clipboardData.getData(’text’).match(/\D/)」 ondragenter=「return false」> html

 

//特殊用途java

<input type=button value=導入收藏夾 onclick=「window.external.ImportExportFavorites(true,’http://localhost’);」> 
<input type=button value=導出收藏夾 onclick=「window.external.ImportExportFavorites(false,’http://localhost’);」> 
<input type=button value=整理收藏夾 onclick=「window.external.ShowBrowserUI(’OrganizeFavorites’, null)」> 
<input type=button value=語言設置   onclick=「window.external.ShowBrowserUI(’LanguageDialog’, null)」> 
<input type=button value=加入收藏夾 onclick=「window.external.AddFavorite(’http://www.google.com/’, ’google’)」> 
<input type=button value=加入到頻道 onclick=「window.external.addChannel(’http://www.google.com/’)」> 
<input type=button value=加入到頻道 onclick=「window.external.showBrowserUI(’PrivacySettings’,null)」> web

 

//不緩存正則表達式

<META HTTP-EQUIV=「pragma」 CONTENT=「no-cache」> 
<META HTTP-EQUIV=「Cache-Control」 CONTENT=「no-cache, must-revalidate」> 
<META HTTP-EQUIV=「expires」 CONTENT=「0″> 緩存

 

 

//正則匹配 cookie

 

匹配中文字符的正則表達式： [\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,'’))」 app

//消除圖像工具欄dom

<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) 



<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(1); 
 rec[0]  = t; 
 rec[1] = l; 
 return rec 
}  
</script> 

//得到控件的絕對位置(2) 

 

oRect = obj.getBoundingClientRect(); 
oRect.left 
oRect. 

//最小化,最大化,關閉

<object id=min classid=「clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>  
<param name=「Command」 value=「Minimize」></object>  
<object id=max classid=「clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>  
<param name=「Command」 value=「Maximize」></object>  
<OBJECT id=close classid=「clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″>  
<PARAM NAME=「Command」 value=「Close」></OBJECT>  
<input type=button value=最小化 onclick=min.Click()>  
<input type=button value=最大化 onclick=max.Click()>  
<input type=button value=關閉 onclick=close.Click()>  

 

//光標停在文字最後 

 

<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 豎條  from: http://hi.baidu.com/atoat/item/f7d7c1c31154d847a9ba94ba

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程