zoukankan      html  css  js  c++  java
  • 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: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="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- ./?%&=]*)? 


    以下是例子: 
  • 相关阅读:
    JDBC 复习4 批量执行SQL
    JDBC 复习3 存取Oracle大数据 clob blob
    Oracle复习
    Linux命令(1)grep
    JDBC 复习2 存取mysql 大数据
    JDBC 复习1 DBUtil
    php 环境搭建问题
    Windows 批处理 bat 开启 WiFi 菜单选项 设置ID PWD
    Bat 批处理启动和停止Oracle 服务
    docker 学习1 WSL docker ,Windows docker
  • 原文地址:https://www.cnblogs.com/netcorner/p/2912548.html
Copyright © 2011-2022 走看看