欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Web中常用的Javascript技巧 博客分类: javascript  

程序员文章站 2024-03-19 12:26:10
...

 

事件源对象 
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.getElementById(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- ./?%&=]*)? 

利用正则表达式限制网页表单里的文本框输入内容:


//消除图像工具栏
[/html]
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false"> 
or 
<head> 
<meta http-equiv="imagetoolbar" content="no"> 
</head> 
[/html]
//取得控件得绝对位置(1)

<script language="javascript"> <br/>function getoffset(e) <br/>{ <br/> var t=e.offsetTop; <br/> var l=e.offsetLeft; <br/> while(e=e.offsetParent) <br/> { <br/> t+=e.offsetTop; <br/> l+=e.offsetLeft; <br/> } <br/> var rec = new Array(1); <br/> rec[0] = t; <br/> rec[1] = l; <br/> return rec <br/>} <br/></script> <br/>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 
//获得控件的绝对位置(2) 


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


//打印分页


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


//设置打印

<object id="factory" style="display:none" viewastext <br/> classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" <br/> codebase="http://www.meadroid.com/scriptx/ScriptX.cab#Version=5,60,0,360" <br/>></object> <br/><input type=button value=页面设置 onclick="factory.printing.PageSetup()"> <br/><input type=button value=打印预览 onclick="factory.printing.Preview()"> <br/> <br/><script language=javascript> <br/>function window.onload() <br/>{ <br/> // -- advanced features <br/> factory.printing.SetMarginMeasure(2) // measure margins in inches <br/> factory.printing.SetPageRange(false, 1, 3) // need pages from 1 to 3 <br/> factory.printing.printer = "HP DeskJet 870C" <br/> factory.printing.copies = 2 <br/> factory.printing.collate = true <br/> factory.printing.paperSize = "A4" <br/> factory.printing.paperSource = "Manual feed" <br/> // -- basic features <br/> factory.printing.header = "居左显示&b居中显示&b居右显示页码,第&p页/共&P页" <br/> factory.printing.footer = "(自定义页脚)" <br/> factory.printing.portrait = false <br/> factory.printing.leftMargin = 0.75 <br/> factory.printing.topMargin = 1.5 <br/> factory.printing.rightMargin = 0.75 <br/> factory.printing.bottomMargin = 1.5 <br/>} <br/>function Print(frame) { <br/> factory.printing.Print(true, frame) // print with prompt <br/>} <br/></script> <br/><input type=button value="打印本页" onclick="factory.printing.Print(false)"> <br/><input type=button value="页面设置" onclick="factory.printing.PageSetup()"> <br/><input type=button value="打印预览" onclick="factory.printing.Preview()"><br> <br/><a href="http://www.meadroid.com/scriptx/docs/printdoc.htm?static" target=_blank>具体使用手册,更多信息,点这里</a> <br/>

[Ctrl+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="http://www.blog.com.cn/打印 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"> <br/>var HKEY_Root,HKEY_Path,HKEY_Key; <br/>HKEY_Root="HKEY_CURRENT_USER"; <br/>HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; <br/>//设置网页打印的页眉页脚为空 <br/>function PageSetup_Null() <br/>{ <br/> try <br/> { <br/> var Wsh=new ActiveXObject("WScript.Shell"); <br/> HKEY_Key="header"; <br/> Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); <br/> HKEY_Key="footer"; <br/> Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,""); <br/> } <br/> catch(e){} <br/>} <br/>//设置网页打印的页眉页脚为默认值 <br/>function PageSetup_Default() <br/>{ <br/> try <br/> { <br/> var Wsh=new ActiveXObject("WScript.Shell"); <br/> HKEY_Key="header"; <br/> Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P"); <br/> HKEY_Key="footer"; <br/> Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d"); <br/> } <br/> catch(e){} <br/>} <br/></script> <br/><input type="button" value="清空页码" onclick=PageSetup_Null()> <br/><input type="button" value="恢复页码" onclick=PageSetup_Default()> <br/>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 
//无模式的提示框 


function modelessAlert(Msg) 

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




//下载文件 


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("下载完成."); 



//检验连接是否有效 


function getXML(URL) 

var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); 
xmlhttp.Open("GET",URL, false); 
try 

xmlhttp.Send(); 

catch(e){} 
finally 

var result = xmlhttp.responseText; 
if(result) 

if(xmlhttp.Status==200) 

return(true); 

else 

return(false); 


else 

return(false); 


}


//检查网页是否存在 


function Checkurl(http://www.blog.com.cn/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; 
}



//禁止FSO 


1.注销组件 
regsvr32 /u scrrun.dll 
2.修改PROGID 
HKEY_CLASSES_ROOT\Scripting.FileSystemObject 
Scripting.FileSystemObject 
3.对于使用object的用户,修改HKEY_CLASSES_ROOT\Scripting. 

补充:

1、触发事伯提交表单

示例1:

<script language="javascript">
function TJsub() {
if(confirm('您确定要提交本表单吗?'))
return document.form1.action ="test.php?action=set";
frm1.submit();
else return false;
}
</script>

<form name="form1" method="post">
<input type="text" name="text1" value="测试文字1">
<input type="text" name="text2" value="测试文字2" onClick="TJsub()>
<input type="submit" name="submit1" value="提 交"">
</form>

2、onchange与onclick的事件触发

onchange大多用在下拉列表的触发事件中,重点在“改变”即触发事件。如页面的跳转等。而onclick强调“点击”,即点击即触发事件,用途广泛。

用法比较简单,就不做示例了。

3、“onblur”当焦点离开文本控件时,触发动作。它常常于自动获得焦点一起使用

4、自动获得焦点

示例4:

<body bgcolor="#FFFFFF" onload="document.form1.text2.focus()">
<form name="form1" method="post">
<input type="text" name="text1" value="测试文字1">
<input type="text" name="text2" value="测试文字2" onClick="TJsub()>
<input type="submit" name="submit1" value="提 交"">
</form>
</body>

5、回车移动焦点(onkeydown="if(event.KeyCode == 13)event.KeyCode=9")

示例5:

<form name="form1" method="post">
<input type="text" name="text1" value="测试文字1" onkeydown="if(event.KeyCode == 13)event.KeyCode=9">
<input type="text" name="text2" value="测试文字2" onkeydown="if(event.KeyCode == 13)event.KeyCode=9">
<input type="submit" name="submit1" value="提 交"">
</form>

6、锁定文本框(readonly)

示例6:

<form name="form1" method="post">
<input type="text" name="text1" value="测试文字1" readonly>
<input type="text" name="text2" value="测试文字2" readonly>
<input type="submit" name="submit1" value="提 交"">
</form>

7、文本框中自动将小写字母转换大写

示例7:

<form name="form1" method="post">
<input type="text" name="text1" value="sample" style="font-variant:Small-caps" >
<input type="text" name="text2" style="font-variant:Small-caps" >
<input type="submit" name="submit1" value="提 交"">
</form>

8、当脚本将焦点定位到一个文本框后,怎么将光标定位文本框里字符串未尾

示例8:

<SCRIPT> 
function setCaretAtEnd (field) { 
if (field.createTextRange) { 
var r = field.createTextRange(); 
r.moveStart('character', field.value.length); 
r.collapse(); 
r.select(); 


</SCRIPT> 
<FORM NAME="aForm"> 
<INPUT TYPE="text" NAME="userName" VALUE="測試文字" ONFOCUS="setCaretAtEnd(this)" > 
<INPUT TYPE="text" NAME="userAge" VALUE="測試文字" ONFOCUS="setCaretAtEnd(this)" > 
</FORM>