一、Javascript遍历整个页面控件事例：
function checkall(val)
{
for(var i=0;i<document.all.length;i++)
{
//<input type="text" /> tagName="INPUT" type="text"
//<input type="checkbox" /> tagName="INPUT" type="checkbox"
//<select /> tagName="SELECT" type="select-one"
//<input type="file" /> tagName="INPUT" type="file"
//<textarea /> tagName="TEXTAREA" type="textarea"
if(document.all(i).tagName == "SELECT" && document.all(i).type == "select-one" && document.all(i).id != "dropAll")
{
document.all(i).options[val].selected = true;
}
}
}
{
for(var i=0;i<document.all.length;i++)
{
//<input type="text" /> tagName="INPUT" type="text"
//<input type="checkbox" /> tagName="INPUT" type="checkbox"
//<select /> tagName="SELECT" type="select-one"
//<input type="file" /> tagName="INPUT" type="file"
//<textarea /> tagName="TEXTAREA" type="textarea"
if(document.all(i).tagName == "SELECT" && document.all(i).type == "select-one" && document.all(i).id != "dropAll")
{
document.all(i).options[val].selected = true;
}
}
}
二、设置某<input>控件为只读
document.getElementById("inputId").readOnly = true;
三、Javascript常用系统功能函数
//整型转换
var i = parseInt("12");
//字符型转换
var i = 12;
var s = i.toString();
var i = parseInt("12");
//字符型转换
var i = 12;
var s = i.toString();
四、客户端即时显示所选图片示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
<!--
function showImg(e)
{
var image=new Image();
image.src=e.value;
document.getElementById("s").style.display = "";
}
//-->
</script>
</head>
<body>
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
<img id="s" style="display:none" />
<input type="file" name="file" onchange="showImg(this);" />
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
<!--
function showImg(e)
{
var image=new Image();
image.src=e.value;
document.getElementById("s").style.display = "";
}
//-->
</script>
</head>
<body>
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
<img id="s" style="display:none" />
<input type="file" name="file" onchange="showImg(this);" />
</form>
</body>
</html>
五、window.open()
window.open(sUrl [, sName] [, sFeatures] [, bReplace]);
|
sURL
|
可选。字符串--指定新的文档的URL地址。如果没有指定这一项，那么将会是一个空的（about:blank）。 | |
|
sName
|
可选。字符串--新生成窗口的名字。可以用作form或者a中Target的值。 | |
|
_blank
|
sURL被加载到一个新的未命名的窗口。 | |
|
_media
|
sURL被加载到一个媒体栏中。（仅适合IE6以及以后版本浏览器） | |
|
_parent
|
sURL被加载到目前框架的上层框架上。如果没有上层框架，则此项的值与_self的值相同。 | |
|
_search
|
sURL被打开在浏览器的查找窗口。（仅适合IE5以及以后的浏览器） | |
|
_self
|
sURL在当前的窗口上打开，覆盖以前的内容。 | |
|
_top
|
sURL可能会加载到任何框架支架(Frameset)上，如果没有定义Frameset，此项值与_self的值相同。 | |
|
sFeatures
|
可选。字符串--列出对象表并用逗号分开。每一项都有自己的值，他们将被分开（如："fullscreen=yes, toolbar=yes"）。下面是被支持的各种特性。 | |
| channelmode = { yes | no | 1 | 0 } | 是否在窗口中显示阶梯模式。默认为no。 | |
| directories = { yes | no | 1 | 0 } | 是否在窗口中显示各种按钮。默认为yes。 | |
| fullscreen = { yes | no | 1 | 0 } | 是否用全屏方式显示浏览器。默认为no。使用这一特性时需要非常小心。因为这一属性可能会隐藏浏览器的标题栏和菜单，你必须提供一个按钮或者其他提示来帮助使用者关闭这一浏览窗口。ALT+F4可以关闭窗口。一个全屏窗口必须使用阶梯(channelmode)模式。 | |
| height = number | 指定窗口的高度，单位是像素。最小值是100。 | |
| left = number | 指定窗口距左边框的距离，单位是像素。值必须大于或者等于0。 | |
| location = { yes | no | 1 | 0 } | 指定是否在窗口中显示地址栏。默认为yes。 | |
| menubar = { yes | no | 1 | 0 } | 指定是否在窗口中显示菜单栏。默认为yes。 | |
| resizable = { yes | no | 1 | 0 } | 指定是否在窗口中显示可供用户调整大小的句柄。默认为yes。 | |
| scrollbars = { yes | no | 1 | 0 } | 指定是否在窗口中显示横向或者纵向滚动条。默认为yes。 | |
| status = { yes | no | 1 | 0 } | 指定是否在窗口中显示状态栏。默认为yes。 | |
| titlebar = { yes | no | 1 | 0 } | 指定是否在窗口中显示标题栏。在非调用HTML Application或者一个对话框的情况下，这一项将被忽略。默认为yes。 | |
| toolbar = { yes | no | 1 | 0 } | 指定是否在窗口中显示工具栏，包括如前进、后退、停止等按钮。默认为yes。 | |
| top = number | 指定窗口顶部的位置，单位是像素。值必须大于或者等于0。 | |
| width = number | 指定窗口的宽度，单位是像素。最小值是100。 | |
|
bReplace
|
可选。当sURL被加载到同一窗口时，这个布尔型变量指定是否这个sURL新建立一个条目，或者是加到目前该窗口的历史记录上。 | |
|
true
|
sURL覆盖当前文档的历史纪录。 | |
|
false
|
sURL在历史记录中建立一个新的条目。 | |
//Examplewindow.open("url","_blank","width=300,height=300,location=no,menubar=no,scrollbars=no,status=no,titlebar=no,toolbar=no");
六、鼠标指向时全选功能
<input type="text" name="test" onMouseOver="this.select();" value="测试" />
七、复制到我的剪帖板功能
function copyH()
{
obj=Form1.txtHtml;
obj.select();
js=obj.createTextRange();
js.execCommand("Copy");
}
{
obj=Form1.txtHtml;
obj.select();
js=obj.createTextRange();
js.execCommand("Copy");
}
八、截取文件扩展名
function getEx(str)
{
var begin = str.lastIndexOf(".");
var end = str.length;
return str.substring(begin,end).toUpperCase();
}
{
var begin = str.lastIndexOf(".");
var end = str.length;
return str.substring(begin,end).toUpperCase();
}
九、一个AJAX应用实例
<!--
//XMLHttpRequest对象
var http_request;
//创建XMLHttpRequest对象公用函数
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{ //创建针对IE的 XMLHttpRequest对象
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{ //创建针对其它浏览器的 XMLHttpRequest对象
http_request = new XMLHttpRequest();
}
//适应不同服务器响应的header
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
//用当前时间作随机数
function getRandom()
{
var result = new Date();
return result.getTime();
}
/*使用示例
创建XMLHttpRequest对象
createXMLHttpRequest();
指定接收服务器响应的函数
http_request.onreadystatechange = getPassportResult;
请求的方式，地址，是否异步
http_request.open('POST', '/Passport/UserLogin.aspx?Random='+getRandom(), true);
http_request.open('GET', '/Passport/UserLogin.aspx?Random='+getRandom(), true);
发送POST请求
var txt = "Account="+account+"&Password="+password;
http_request.setRequestHeader("content-length",txt.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(txt);
发送GET请求
http_request.send(null);
服务端返回参数
0 (未初始化) 1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成)
if(http_request.readyState == 4)
if(http_request.status == 200)
获取服务端数据
Header区
http_request.getResponseHeader("Result")
Body区
var temp = http_request.responseText;
XML
var xmlDoc = http_request.responseXML;
*/
-->
//XMLHttpRequest对象
var http_request;
//创建XMLHttpRequest对象公用函数
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{ //创建针对IE的 XMLHttpRequest对象
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{ //创建针对其它浏览器的 XMLHttpRequest对象
http_request = new XMLHttpRequest();
}
//适应不同服务器响应的header
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
//用当前时间作随机数
function getRandom()
{
var result = new Date();
return result.getTime();
}
/*使用示例
创建XMLHttpRequest对象
createXMLHttpRequest();
指定接收服务器响应的函数
http_request.onreadystatechange = getPassportResult;
请求的方式，地址，是否异步
http_request.open('POST', '/Passport/UserLogin.aspx?Random='+getRandom(), true);
http_request.open('GET', '/Passport/UserLogin.aspx?Random='+getRandom(), true);
发送POST请求
var txt = "Account="+account+"&Password="+password;
http_request.setRequestHeader("content-length",txt.length);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(txt);
发送GET请求
http_request.send(null);
服务端返回参数
0 (未初始化) 1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成)
if(http_request.readyState == 4)
if(http_request.status == 200)
获取服务端数据
Header区
http_request.getResponseHeader("Result")
Body区
var temp = http_request.responseText;
XML
var xmlDoc = http_request.responseXML;
*/
-->
十、获取SELECT控件选中值
//获取选中值
document.getElementById("SelectId").value
//获取选中文本
document.getElementById("SelectId").options[document.getElementById("SelectId").selectedIndex].text
document.getElementById("SelectId").value
//获取选中文本
document.getElementById("SelectId").options[document.getElementById("SelectId").selectedIndex].text
十一、关闭子窗口并刷新父窗口
window.alert('添加成功！');window.opener.location.href='Program.aspx';window.close();
十二、查找控件
//设置为不可操作
document.getElementById("btn1").disabled = true;
form0.drop1.disabled = true;
//设置为只读
form0.txt1.readOnly = true;
document.getElementById("btn1").disabled = true;
form0.drop1.disabled = true;
//设置为只读
form0.txt1.readOnly = true;
十三、获取客户端MAC地址
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<object id="locator" classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" viewastext></object>
<object id="foo" classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223"></object>
<script type="text/javascript">
<!--
var service = locator.ConnectServer();
var m;
service.Security_.ImpersonationLevel=3;
service.InstancesOfAsync(foo, 'Win32_NetworkAdapterConfiguration');
//-->
</script>
<script type="text/javascript" event="OnObjectReady(objObject,objAsyncContext)" for="foo">
<!--
if(objObject.MACAddress != null && objObject.MACAddress != "undefined")
m = objObject.MACAddress;
//-->
</script>
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" event="OnCompleted(hResult,pErrorObject, pAsyncContext)" for="foo">
window.alert("本机MAC地址为：" + m.toUpperCase());
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<object id="locator" classid="CLSID:76A64158-CB41-11D1-8B02-00600806D9B6" viewastext></object>
<object id="foo" classid="CLSID:75718C9A-F029-11d1-A1AC-00C04FB6C223"></object>
<script type="text/javascript">
<!--
var service = locator.ConnectServer();
var m;
service.Security_.ImpersonationLevel=3;
service.InstancesOfAsync(foo, 'Win32_NetworkAdapterConfiguration');
//-->
</script>
<script type="text/javascript" event="OnObjectReady(objObject,objAsyncContext)" for="foo">
<!--
if(objObject.MACAddress != null && objObject.MACAddress != "undefined")
m = objObject.MACAddress;
//-->
</script>
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" event="OnCompleted(hResult,pErrorObject, pAsyncContext)" for="foo">
window.alert("本机MAC地址为：" + m.toUpperCase());
</script>
</body>
</html>
十四、设为首页
<a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://08118.gx.chinamobile.com/');return(false);">设为首页</a>
十五、Javascript实现剩余字符数显示。（兼容IE与Firefox浏览器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<textarea id="txt" name="txt"></textarea>
</p>
<p>
你已输入<span id="ttl1" style="font-weight:bold;">0</span>个字符，还可以输入<span id="ttl2" style="font-weight:bold;">70</span>个字符。
<script language="javascript" type="text/javascript">
<!--
if(navigator.userAgent.indexOf("MSIE") > 0)
{
//支持IE
document.getElementById('txt').attachEvent("onpropertychange",checkLength);
}
if(navigator.userAgent.indexOf("Firefox") > 0)
{
//支持Firefox
document.getElementById('txt').addEventListener("input",checkLength,false);
}
function checkLength()
{
var e = document.getElementById("txt");
var maxLength = 70;
if(e.value.length <= parseInt(maxLength))
{
document.getElementById("ttl1").innerHTML = e.value.length;
document.getElementById("ttl2").innerHTML = (parseInt(maxLength) - parseInt(e.value.length)).toString();
}
else
{
window.alert("您输入的字符超过最大长度限制！");
e.focus();
}
}
//-->
</script>
</p>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<textarea id="txt" name="txt"></textarea>
</p>
<p>
你已输入<span id="ttl1" style="font-weight:bold;">0</span>个字符，还可以输入<span id="ttl2" style="font-weight:bold;">70</span>个字符。
<script language="javascript" type="text/javascript">
<!--
if(navigator.userAgent.indexOf("MSIE") > 0)
{
//支持IE
document.getElementById('txt').attachEvent("onpropertychange",checkLength);
}
if(navigator.userAgent.indexOf("Firefox") > 0)
{
//支持Firefox
document.getElementById('txt').addEventListener("input",checkLength,false);
}
function checkLength()
{
var e = document.getElementById("txt");
var maxLength = 70;
if(e.value.length <= parseInt(maxLength))
{
document.getElementById("ttl1").innerHTML = e.value.length;
document.getElementById("ttl2").innerHTML = (parseInt(maxLength) - parseInt(e.value.length)).toString();
}
else
{
window.alert("您输入的字符超过最大长度限制！");
e.focus();
}
}
//-->
</script>
</p>
</form>
</body>
</html>
十六、客户端内容安全
<body oncontextmenu="window.event.returnValue=false" onkeypress="window.event.returnValue=false" onkeydown="window.event.returnValue=false" onkeyup="window.event.returnValue=false" ondragstart="window.event.returnValue=false" onselectstart="event.returnValue=false">不能点右键，不用选择(CTRL+A)，不能复制!</body>十七、Iframe自适应高
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
//自适应高
function changeIframe()
{
if(top != self)
{
window.parent.document.getElementById("parentIframeID").height = document.body.scrollHeight;
}
}
//-->
</script>
</head>
<body onload="changeIframe();">
some iframe content
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
//自适应高
function changeIframe()
{
if(top != self)
{
window.parent.document.getElementById("parentIframeID").height = document.body.scrollHeight;
}
}
//-->
</script>
</head>
<body onload="changeIframe();">
some iframe content
</body>
</html>
