本文汇总了多种网页操作技巧，包括事件处理、元素选择、样式修改、表单控制、页面交互等，提供了丰富的代码实例，帮助开发者高效进行网页开发。
- 事件源对象 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.youkuaiyun.com/'">
- 关闭输入法 <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 += "\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;
//过滤数字
//特殊用途
//不缓存
//正则匹配
匹配中文字符的正则表达式： [\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>
//无提示关闭
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.
//最小化,最大化,关闭
//光标停在文字最后
<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
//网页是否被检索
//打印分页
//设置打印
<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\r\n内容区高度: " + 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" ><!--
//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键
//Author: meizz(梅花雨) 2002-6-18 function document.oncontextmenu(){event.returnValue=
false ;}
//屏蔽鼠标右键 function window.onhelp(){
return
false }
//屏蔽F1帮助 function document.onkeydown() {
if ((window.event.altKey)&& ((window.event.keyCode==37)||
//屏蔽 Alt+ 方向键 ← (window.event.keyCode==39)))
//屏蔽 Alt+ 方向键 → { alert(
"不准你使用ALT+方向键前进或后退网页！" ); event.returnValue=
false ; }
/* 注：这还不是真正地屏蔽 Alt+ 方向键， 因为 Alt+ 方向键弹出警告框时，按住 Alt 键不放， 用鼠标点掉警告框，这种屏蔽方法就失效了。以后若 有哪位高手有真正屏蔽 Alt 键的方法，请告知。*/
if ((event.keyCode==8) ||
//屏蔽退格删除键 (event.keyCode==116)||
//屏蔽 F5 刷新键 (event.ctrlKey && event.keyCode==82)){
//Ctrl + R event.keyCode=0; event.returnValue=
false ; }
if (event.keyCode==122){event.keyCode=0;event.returnValue=
false ;}
//屏蔽F11
if (event.ctrlKey && event.keyCode==78) event.returnValue=
false ;
//屏蔽 Ctrl+n
if (event.shiftKey && event.keyCode==121)event.returnValue=
false ;
//屏蔽 shift+F10
if (window.event.srcElement.tagName ==
"A" && window.event.shiftKey) window.event.returnValue =
false ;
//屏蔽 shift 加鼠标左键新开一网页
if ((window.event.altKey)&&(window.event.keyCode==115))
//屏蔽Alt+F4 { window.showModelessDialog(
"about:blank" ,
"" ,
"dialogWidth:1px;dialogheight:1px" );
return
false ; } } </script> 屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键 </body> </html>
//屏蔽打印 <style> @media print{ * {display:none} } </style>
//移动的图层，拖动
1.<span style='position:absolute;width:200;height:200;background:red' onmousedown=MouseDown(
this ) onmousemove=MouseMove() onmouseup=MouseUp()>meizz</span> <script language=javascript>
var Obj;
function MouseDown(obj) { Obj=obj; Obj.setCapture(); Obj.l=event.x-Obj.style.pixelLeft; Obj.t=event.y-Obj.style.pixelTop; }
function MouseMove() {
if (Obj!=
null ) { Obj.style.left = event.x-Obj.l; Obj.style.top = event.y-Obj.t; } }
function MouseUp() {
if (Obj!=
null ) { Obj.releaseCapture(); Obj=
null ; } } </script> 2. <div id=
"myDiv" src=
"logo.gif" ondrag=
"doDrag();" onmouseover=
"this.style.cursor='hand'" style=
"position:absolute;left=100;top=100;" onmousedown=
"doMouseDown();" > <a href=
"#" onclick=
"return false" ><h1>wlecome</h1></a> </div> <script language=
"JavaScript" type=
"text/javascript" >
var orgMouseX;
var orgMouseY;
var orgObjX;
var orgObjY;
function doDrag() {
var myObject=document.all.myDiv;
var x=event.clientX;
var y=event.clientY; myObject.style.left=x-(orgMouseX-orgObjX); myObject.style.top=y-(orgMouseY-orgObjY); }
function doMouseDown() { orgMouseX=event.clientX; orgMouseY=event.clientY; orgObjX=parseInt(document.all.myDiv.style.left); orgObjY=parseInt(document.all.myDiv.style.top); } </script>
//文档状态改变
<iframe src=
"a.html" id=
"f" name=
"f" scrolling=
"no" frameborder=0 marginwidth=0 marginheight=0></iframe> <script>
var doc=window.frames[
"f" ].document;
function s(){
if (doc.readyState==
"complete" ){ document.all.f.style.height=doc.body.scrollHeight document.all.f.style.width=doc.body.scrollWidth } } doc.onreadystatechange=s </script>
//刷新后不变的文本框
//访问剪贴板
//操作COOKIE
function SetCookie(sName, sValue) { document.cookie = sName +
"=" + escape(sValue) +
"; " ; }
function GetCookie(sName) {
var aCookie = document.cookie.split(
"; " ); for (
var i=0; i < aCookie.length; i++) {
var aCrumb = aCookie[i].split(
"=" );
if (sName == aCrumb[0])
return unescape(aCrumb[1]); } }
function DelCookie(sName) { document.cookie = sName +
"=" + escape(sValue) +
"; expires=Fri, 31 Dec 1999 23:59:59 GMT;" ; }
//setTimeout增加参数
<script>
var _st = window.setTimeout; window.setTimeout =
function (fRef, mDelay) {
if (typeof fRef == '
function '){
var argu =
Array .prototype.slice.call(arguments,2);
var f = (
function (){ fRef.apply(
null , argu); });
return _st(f, mDelay); }
return _st(fRef,mDelay); }
function test(x){ alert(x); } window.setTimeout(test,1000,'fason'); </script>
//自定义的apply,call
Function.prototype.apply =
function (obj, argu) {
if (obj) obj.constructor.prototype._caller =
this ;
var argus =
new
Array (); for (
var i=0;i<argu.length;i++) argus[i] =
"argu[" + i +
"]" ;
var r; eval(
"r = " + (obj ? (
"obj._caller(" + argus.join(
"," ) +
");" ) : (
"this(" + argus.join(
"," ) +
");" )));
return r; }; Function.prototype.call =
function (obj) {
var argu =
new
Array (); for (
var i=1;i<arguments.length;i++) argu[i-1] = arguments[i];
return
this .apply(obj, argu); };
//下载文件
function DownURL(strRemoteURL,strLocalURL) { try {
var xmlHTTP=
new
ActiveXObject (
"Microsoft.XMLHTTP" ); xmlHTTP.open(
"Get" ,strRemoteURL,
false ); xmlHTTP.send();
var adodbStream=
new
ActiveXObject (
"ADODB.Stream" ); adodbStream.Type=1;
//1=adTypeBinary adodbStream.Open(); adodbStream.write(xmlHTTP.responseBody); adodbStream.SaveToFile(strLocalURL,2); adodbStream.Close(); adodbStream=
null ; xmlHTTP=
null ; }
catch (e) { window.confirm(
"下载URL出错!" ); }
//window.confirm("下载完成." ); }
//检验连接是否有效
//组件是否安装 isComponentInstalled("{6B053A4B-A7EC-4D3D-4567-B8FF8A1A5739}", "componentID"))
//检查网页是否存在
function CheckURL(URL) {
var xmlhttp =
new
ActiveXObject (
"Microsoft.XMLHTTP" ); xmlhttp.Open(
"GET" ,URL,
false ); try { xmlhttp.Send();
var result = xmlhttp.status; }
catch (e) {
return (
false ); }
if (result==200) {
return
true ; } xmlhttp =
null ;
return
false ; }
扫一扫
2006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
