javascript技巧大全套

zoukankan html css js c++ java

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=="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 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)"><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 += " 网页可见区域宽："+ document.body.clientWidth;

s += " 网页可见区域高："+ document.body.clientHeight;

s += " 网页可见区域高："+ document.body.offsetWeight +" (包括边线的宽)";

s += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

s += " 网页正文全文宽："+ document.body.scrollWidth;

s += " 网页正文全文高："+ document.body.scrollHeight;

s += " 网页被卷去的高："+ document.body.scrollTop;

s += " 网页被卷去的左："+ document.body.scrollLeft;

s += " 网页正文部分上："+ window.screenTop;

s += " 网页正文部分左："+ window.screenLeft;

s += " 屏幕分辨率的高："+ window.screen.height;

s += " 屏幕分辨率的宽："+ window.screen.width;

s += " 屏幕可用工作区高度："+ window.screen.availHeight;

s += " 屏幕可用工作区宽度："+ window.screen.availWidth;

//过滤数字

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



//特殊用途

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



//不缓存

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

匹配空行的正则表达式： [s| ]*

匹配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>



//无提示关闭

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 竖条

　　23

//网页是否被检索

<meta name="ROBOTS" content="属性值">

　　其中属性值有以下一些:

　　属性值为"all": 文件将被检索，且页上链接可被查询；

　　属性值为"none": 文件不被检索，而且不查询页上的链接；

　　属性值为"index": 文件将被检索；

　　属性值为"follow": 查询页上的链接；

　　属性值为"noindex": 文件不检索，但可被查询链接；

　　属性值为"nofollow":



//打印分页

<p style="page-break-after:always">page1</p>

<p style="page-break-after:always">page2</p>



//设置打印

<object id="factory" style="display:none" viewastext

  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"

  codebase="http://www.meadroid.com/scriptx/ScriptX.cab#Version=5,60,0,360"

></object>

<input type=button value=页面设置 onclick="factory.printing.PageSetup()">

<input type=button value=打印预览 onclick="factory.printing.Preview()">



<script language=javascript>

function window.onload()

{

   // -- advanced features

   factory.printing.SetMarginMeasure(2) // measure margins in inches

   factory.printing.SetPageRange(false, 1, 3) // need pages from 1 to 3

   factory.printing.printer = "HP DeskJet 870C"

   factory.printing.copies = 2

   factory.printing.collate = true

   factory.printing.paperSize = "A4"

   factory.printing.paperSource = "Manual feed"

   // -- basic features

   factory.printing.header = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页"

   factory.printing.footer = "（自定义页脚）"

   factory.printing.portrait = false

   factory.printing.leftMargin = 0.75

   factory.printing.topMargin = 1.5

   factory.printing.rightMargin = 0.75

   factory.printing.bottomMargin = 1.5

}

function Print(frame) {

  factory.printing.Print(true, frame) // print with prompt

}

</script>

<input type=button value="打印本页" onclick="factory.printing.Print(false)">

<input type=button value="页面设置" onclick="factory.printing.PageSetup()">

<input type=button value="打印预览" onclick="factory.printing.Preview()"><br>

<a href="http://www.meadroid.com/scriptx/docs/printdoc.htm?static" target=_blank>具体使用手册，更多信息，点这里</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>

//去掉打印时的页眉页脚

<script language="JavaScript">

var HKEY_Root,HKEY_Path,HKEY_Key;

HKEY_Root="HKEY_CURRENT_USER";

HKEY_Path="\Software\Microsoft\Internet Explorer\PageSetup\";

//设置网页打印的页眉页脚为空

function PageSetup_Null()

{

try

{

         var Wsh=new ActiveXObject("WScript.Shell");

  HKEY_Key="header";

  Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");

  HKEY_Key="footer";

  Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");

}

catch(e){}

}

//设置网页打印的页眉页脚为默认值

function PageSetup_Default()

{

try

{

  var Wsh=new ActiveXObject("WScript.Shell");

  HKEY_Key="header";

  Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P");

  HKEY_Key="footer";

  Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d");

}

catch(e){}

}

</script>

<input type="button" value="清空页码" onclick=PageSetup_Null()>

<input type="button" value="恢复页码" onclick=PageSetup_Default()>

//浏览器验证

function checkBrowser()

{

   this.ver=navigator.appVersion

   this.dom=document.getElementById?1:0

   this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;

   this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;

   this.ie4=(document.all && !this.dom)?1:0;

   this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

   this.ns4=(document.layers && !this.dom)?1:0;

   this.mac=(this.ver.indexOf('Mac') > -1) ?1:0;

   this.ope=(navigator.userAgent.indexOf('Opera')>-1);

   this.ie=(this.ie6 || this.ie5 || this.ie4)

   this.ns=(this.ns4 || this.ns5)

   this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns5 || this.ns4 || this.mac || this.ope)

   this.nbw=(!this.bw)

   return this;

}

//计算内容宽和高

<SCRIPT language="javascript">

function test(obj)

{

       var range = obj.createTextRange();

       alert("内容区宽度: " + range.boundingWidth

                                                 + "px 内容区高度: " + range.boundingHeight + "px");



}

</SCRIPT>

<BODY>

<Textarea id="txt" height="150">sdf</textarea><INPUT type="button" value="计算内容宽度" onClick="test(txt)">

</BODY>

//无模式的提示框

function modelessAlert(Msg)

{

   window.showModelessDialog("javascript:alert(""+escape(Msg)+"");window.close();","","status:no;resizable:no;help:no;dialogHeight:height:30px;dialogHeight:40px;");

}







//屏蔽按键



<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  <noscript><meta http-equiv="refresh" content="0;url=about:noscript"></noscript>

  <title>屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键</title>

</head>

<body>

<script language="Javascript">

</script>

</body>

//可编辑SELECT

<input type=text name=re_name style="100px;height:21px;font-size:10pt;"><span style="18px;border:0px solid red;"><select name="r00" style="margin-left:-100px;118px; background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">

                <option value="1">11111111<option>

                <option value="2">222222</option>

                <option value="3">333333</option>

              </select>

              </span>

查看全文

相关阅读:
Lc20-Valid Parentheses
Lc262-行程和用户
 Lc197-Rising Temperature
Lc196-删除重复的电子邮箱
 Lc185-部门工资前三高的所有员工
 Lc18-四数之和
 Lc17-电话号码的字母组合
 Netty Java NIO 基本介绍之 Selector，ServerSocketChannel , SocketChannel (二)
Netty（二）工作原理模型
 Netty 异步模型

原文地址：https://www.cnblogs.com/pari-Zhong/p/4135475.html