javascript技巧大全

来源:互联网 发布:ipad必备软件 编辑:程序博客网 时间:2024/04/27 06:30
  • 事件源对象
    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;  

  • //过滤数字


    //特殊用途


    //不缓存



    //正则匹配



    //无提示关闭


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

     


    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">

     


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

     


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

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

    匹配中文字符的正则表达式: [/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>
    原创粉丝点击