代码:
function strlen(str)
{
var i;
var len;
len = 0;
for (i=0;i<>
{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
/*
* 判断是否为数字,是则返回true,否则返回false
*/代码
function f_check_number(obj)
{
if (/^\d+$/.test(obj.value))
{
return true;
}
else
{
f_alert(obj,”请输入数字”);
return false;
}
}
/*
* 判断是否为自然数,是则返回true,否则返回false
*/代码
function f_check_naturalnumber(obj)
{
var s = obj.value;
if (/^[0-9]+$/.test( s ) && (s > 0))
{
return true;
}
else
{
f_alert(obj,”请输入自然数”);
return false;
}
}
/*
* 判断是否为整数,是则返回true,否则返回false
*/代码
function f_check_integer(obj)
{
if (/^(\+|-)?\d+$/.test( obj.value ))
{
return true;
}
else
{
f_alert(obj,”请输入整数”);
return false;
}
}
/*
* 判断是否为实数,是则返回true,否则返回false
*/代码
function f_check_float(obj)
{
if (/^(\+|-)?\d+($|\.\d+$)/.test( obj.value ))
{
return true;
}
else
{
f_alert(obj,”请输入实数”);
return false;
}
}
/*
用途:检查输入字符串是否只由汉字组成
如果通过验证返回true,否则返回false
*/代码
function f_check_zh(obj){
if (/^[\u4e00-\u9fa5]+$/.test(obj.value)) {
return true;
}
f_alert(obj,”请输入汉字”);
return false;
}
/*
* 判断是否为小写英文字母,是则返回true,否则返回false
*/代码
function f_check_lowercase(obj)
{
if (/^[a-z]+$/.test( obj.value ))
{
return true;
}
f_alert(obj,”请输入小写英文字母”);
return false;
}
/*
* 判断是否为大写英文字母,是则返回true,否则返回false
*/代码
function f_check_uppercase(obj)
{
if (/^[A-Z]+$/.test( obj.value ))
{
return true;
}
f_alert(obj,”请输入大写英文字母”);
return false;
}
/*
* 判断是否为英文字母,是则返回true,否则返回false
*/代码
function f_check_letter(obj)
{
if (/^[A-Za-z]+$/.test( obj.value ))
{
return true;
}
f_alert(obj,”请输入英文字母”);
return false;
}
/*
用途:检查输入字符串是否只由汉字、字母、数字组成
输入:
value:字符串
返回:
如果通过验证返回true,否则返回false
*/代码
function f_check_ZhOrNumOrLett(obj){ //判断是否是汉字、字母、数字组成
var regu = “^[0-9a-zA-Z\u4e00-\u9fa5]+$”;
var re = new RegExp(regu);
if (re.test( obj.value )) {
return true;
}
f_alert(obj,”请输入汉字、字母或数字”);
return false;
}
/*
用途:校验ip地址的格式
输入:strIP:ip地址
返回:如果通过验证返回true,否则返回false;
*/代码
function f_check_IP(obj)
{
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/; //匹配IP地址的正则表达式
if(re.test( obj.value ))
{
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
}
f_alert(obj,”请输入合法的计算机IP地址”);
return false;
}
/*
用途:检查输入对象的值是否符合端口号格式
输入:str 输入的字符串
返回:如果通过验证返回true,否则返回false
*/代码
function f_check_port(obj)
{
if(!f_check_number(obj))
return false;
if(obj.value < 65536)
return true;
f_alert(obj,”请输入合法的计算机IP地址端口号”);
return false;
}
/*
用途:检查输入对象的值是否符合网址格式
输入:str 输入的字符串
返回:如果通过验证返回true,否则返回false
*/代码
function f_check_URL(obj){
var myReg = /^((http:[/][/])?\w+([.]\w+|[/]\w*)*)?$/;
if(myReg.test( obj.value )) return true;
f_alert(obj,”请输入合法的网页地址”);
return false;
}
/*
用途:检查输入对象的值是否符合E-Mail格式
输入:str 输入的字符串
返回:如果通过验证返回true,否则返回false
*/代码
function f_check_email(obj){
var myReg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(myReg.test( obj.value )) return true;
f_alert(obj,”请输入合法的电子邮件地址”);
return false;
}
/*
要求:一、移动电话号码为11或12位,如果为12位,那么第一位为0
二、11位移动电话号码的第一位和第二位为”13″
三、12位移动电话号码的第二位和第三位为”13″
用途:检查输入手机号码是否正确
输入:
s:字符串
返回:
如果通过验证返回true,否则返回false
*/代码
function f_check_mobile(obj){
var regu =/(^[1][3][0-9]{9}$)|(^0[1][3][0-9]{9}$)/;
var re = new RegExp(regu);
if (re.test( obj.value )) {
return true;
}
f_alert(obj,”请输入正确的手机号码”);
return false;
}
/*
要求:一、电话号码由数字、”(“、”)”和”-“构成
二、电话号码为3到8位
三、如果电话号码中包含有区号,那么区号为三位或四位
四、区号用”(“、”)”或”-“和其他部分隔开
用途:检查输入的电话号码格式是否正确
输入:
strPhone:字符串
返回:
如果通过验证返回true,否则返回false
*/代码
function f_check_phone(obj)
{
var regu =/(^([0][1-9]{2,3}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0][1-9]{2,3}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/;
var re = new RegExp(regu);
if (re.test( obj.value )) {
return true;
}
f_alert(obj,”请输入正确的电话号码”);
return false;
}
/* 判断是否为邮政编码 */
代码
function f_check_zipcode(obj)
{
if(!f_check_number(obj))
return false;
if(obj.value.length!=6)
{
f_alert(obj,”邮政编码长度必须是6位”);
return false;
}
return true;
}
/*
用户ID,可以为数字、字母、下划线的组合,
第一个字符不能为数字,且总长度不能超过20。
*/代码
function f_check_userID(obj)
{
var userID = obj.value;
if(userID.length > 20)
{
f_alert(obj,”ID长度不能大于20″);
return false;
}
if(!isNaN(userID.charAt(0)))
{
f_alert(obj,”ID第一个字符不能为数字”);
return false;
}
if(!/^\w{1,20}$/.test(userID))
{
f_alert(obj,”ID只能由数字、字母、下划线组合而成”);
return false;
}
return true;
}
/*
功能:验证身份证号码是否有效
提示信息:未输入或输入身份证号不正确!
使用:f_check_IDno(obj)
返回:bool
*/代码
function f_check_IDno(obj)
{
var aCity={11:”北京”,12:”天津”,13:”河北”,14:”山西”,15:”内蒙古”,21:”辽宁”,22:”吉林”,23:”黑龙江”,31:”上海”,32:”江苏”,33:”浙江”,34:”安徽”,35:”福建”,36:”江西”,37:”山东”,41:”河南”,42:”湖北”,43:”湖南”,44:”广东”,45:”广西”,46:”海南”,50:”重庆”,51:”四川”,52:”贵州”,53:”云南”,54:”西藏”,61:”陕西”,62:”甘肃”,63:”青海”,64:”宁夏”,65:”新疆”,71:”台湾”,81:”香港”,82:”澳门”,91:”国外”};
var iSum = 0;
var info = “”;
var strIDno = obj.value;
var idCardLength = strIDno.length;
if(!/^\d{17}(\d|x)$/i.test(strIDno)&&!/^\d{15}$/i.test(strIDno))
{
f_alert(obj,”非法身份证号”);
return false;
}
//在后面的运算中x相当于数字10,所以转换成a
strIDno = strIDno.replace(/x$/i,”a”);
if(aCity[parseInt(strIDno.substr(0,2))]==null)
{
f_alert(obj,”非法地区”);
return false;
}
if (idCardLength==18)
{
sBirthday=strIDno.substr(6,4)+”-“+Number(strIDno.substr(10,2))+”-“+Number(strIDno.substr(12,2));
var d = new Date(sBirthday.replace(/-/g,”/”))
if(sBirthday!=(d.getFullYear()+”-“+ (d.getMonth()+1) + “-” + d.getDate()))
{
f_alert(obj,”非法生日”);
return false;
}
for(var i = 17;i>=0;i –)
iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 – i),11);
if(iSum%11!=1)
{
f_alert(obj,”非法身份证号”);
return false;
}
}
else if (idCardLength==15)
{
sBirthday = “19” + strIDno.substr(6,2) + “-” + Number(strIDno.substr(8,2)) + “-” + Number(strIDno.substr(10,2));
var d = new Date(sBirthday.replace(/-/g,”/”))
var dd = d.getFullYear().toString() + “-” + (d.getMonth()+1) + “-” + d.getDate();
if(sBirthday != dd)
{
f_alert(obj,”非法生日”);
return false;
}
}
return true;
}
/*
功能:判断是否为日期(格式:yyyy年MM月dd日,yyyy-MM-dd,yyyy/MM/dd,yyyyMMdd)
提示信息:未输入或输入的日期格式错误!
使用:f_check_date(obj)
返回:bool
*/代码
function f_check_date(obj)
{
var date = Trim(obj.value);
var dtype = obj.eos_datatype;
var format = dtype.substring(dtype.indexOf(“(“)+1,dtype.indexOf(“)”)); //日期格式
var year,month,day,datePat,matchArray;
if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2})$/.test(format))
datePat = /^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2})$/;
else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)$/.test(format))
datePat = /^(\d{4})年(\d{1,2})月(\d{1,2})日$/;
else if(format==”yyyyMMdd”)
datePat = /^(\d{4})(\d{2})(\d{2})$/;
else
{
f_alert(obj,”日期格式不对”);
return false;
}
matchArray = date.match(datePat);
if(matchArray == null)
{
f_alert(obj,”日期长度不对,或日期中有非数字符号”);
return false;
}
if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2})$/.test(format))
{
year = matchArray[1];
month = matchArray[3];
day = matchArray[4];
} else
{
year = matchArray[1];
month = matchArray[2];
day = matchArray[3];
}
if (month < 1 || month > 12)
{
f_alert(obj,”月份应该为1到12的整数”);
return false;
}
if (day < 1 || day > 31)
{
f_alert(obj,”每个月的天数应该为1到31的整数”);
return false;
}
if ((month==4 || month==6 || month==9 || month==11) && day==31)
{
f_alert(obj,”该月不存在31号”);
return false;
}
if (month==2)
{
var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));
if (day>29)
{
f_alert(obj,”2月最多有29天”);
return false;
}
if ((day==29) && (!isleap))
{
f_alert(obj,”闰年2月才有29天”);
return false;
}
}
return true;
}
/*
功能:校验的格式为yyyy年MM月dd日HH时mm分ss秒,yyyy-MM-dd HH:mm:ss,yyyy/MM/dd HH:mm:ss,yyyyMMddHHmmss
提示信息:未输入或输入的时间格式错误
使用:f_check_time(obj)
返回:bool
*/代码
function f_check_time(obj)
{
var time = Trim(obj.value);
var dtype = obj.eos_datatype;
var format = dtype.substring(dtype.indexOf(“(“)+1,dtype.indexOf(“)”)); //日期格式
var datePat,matchArray,year,month,day,hour,minute,second;
if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2}) (HH:mm:ss)$/.test(format))
datePat = /^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
else if(/^(y{4})(年)(M{1,2})(月)(d{1,2})(日)(HH时mm分ss秒)$/.test(format))
datePat = /^(\d{4})年(\d{1,2})月(\d{1,2})日(\d{1,2})时(\d{1,2})分(\d{1,2})秒$/;
else if(format == “yyyyMMddHHmmss”)
datePat = /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/;
else
{
f_alert(obj,”日期格式不对”);
return false;
}
matchArray = time.match(datePat);
if(matchArray == null)
{
f_alert(obj,”日期长度不对,或日期中有非数字符号”);
return false;
}
if(/^(y{4})(-|\/)(M{1,2})\2(d{1,2}) (HH:mm:ss)$/.test(format))
{
year = matchArray[1];
month = matchArray[3];
day = matchArray[4];
hour = matchArray[5];
minute = matchArray[6];
second = matchArray[7];
} else
{
year = matchArray[1];
month = matchArray[2];
day = matchArray[3];
hour = matchArray[4];
minute = matchArray[5];
second = matchArray[6];
}
if (month < 1 || month > 12)
{
f_alert(obj,”月份应该为1到12的整数”);
return false;
}
if (day < 1 || day > 31)
{
f_alert(obj,”每个月的天数应该为1到31的整数”);
return false;
}
if ((month==4 || month==6 || month==9 || month==11) && day==31)
{
f_alert(obj,”该月不存在31号”);
return false;
}
if (month==2)
{
var isleap=(year % 4==0 && (year % 100 !=0 || year % 400==0));
if (day>29)
{
f_alert(obj,”2月最多有29天”);
return false;
}
if ((day==29) && (!isleap))
{
f_alert(obj,”闰年2月才有29天”);
return false;
}
}
if(hour<0 || hour>23)
{
f_alert(obj,”小时应该是0到23的整数”);
return false;
}
if(minute<0 || minute>59)
{
f_alert(obj,”分应该是0到59的整数”);
return false;
}
if(second<0 || second>59)
{
f_alert(obj,”秒应该是0到59的整数”);
return false;
}
return true;
}
/*判断当前对象是否可见*/
代码
function isVisible(obj){
var visAtt,disAtt;
try{
disAtt=obj.style.display;
visAtt=obj.style.visibility;
}catch(e){}
if(disAtt==”none” || visAtt==”hidden”)
return false;
return true;
}
/*判断当前对象及其父对象是否可见*/
代码
function checkPrVis(obj){
var pr=obj.parentNode;
do{
if(pr == undefined || pr == “undefined”) return true;
else{
if(!isVisible(pr)) return false;
}
}while(pr=pr.parentNode);
return true;
}
/* 弹出警告对话框,用户点确定后将光标置于出错文本框上, 并且将原来输入内容选中。*/
代码
function f_alert(obj,alertInfo)
{
var caption = obj.getAttribute(“eos_displayname”);
if(caption == null)
caption = “”;
alert(caption + “:” + alertInfo + “!”);
obj.select();
if(isVisible(obj) && checkPrVis(obj))
obj.focus();
}
/**
* 检测字符串是否为空
*/代码
function isNullOrEmpty(str)
{
str = Trim(str);
if(str.length == 0) {
return true;
}
else {
return false
}
}
//去左空格
function LTrim(str){
return str.replace(/^\s*/g,””);
}
//去右空格
function RTrim(str){
return str.replace(/\s*$/g,””);
}//去首尾空格
function Trim(str){
return str.replace(/^\s*|\s*$/g,””);
}//get parameter value from ‘get’ url, strurl: window.parent.location.href or window.location.href, para: keyName
function getPara(para, strurl){
if (strurl.indexOf(“?”) == -1) {
//Do nothing.
return null;
}
else {
//get the string after ‘?’
var urlQuery = strurl.split(“?”);
if(urlQuery[1].indexOf(“&”)==-1){//only one parameter
if (urlQuery[1].indexOf(“=”) == -1) {
//no parameter value
//Do nothing
return null;
}
else{
var keyValue = urlQuery[1].split(“=”);
var key = keyValue[0];
var value = keyValue[1];
if(key==para){
return value;
}
}
}
else{
// analyse parameters
var urlTerms = urlQuery[1].split(“&”);
for (var i = 0; i < urlTerms.length; i++){
var keyValue = urlTerms[i].split(“=”);
var key = keyValue[0];
var value = keyValue[1];
if(key==para){
return value;
}
}
}
}
return null;
}// 功能: 1)去除字符串前后所有空格
// 2)去除字符串中所有空格(包括中间空格,需要设置第2个参数为:g)
function Trim(str,is_global)
{
var result;
result = str.replace(/(^\s+)|(\s+$)/g,””);
if(is_global.toLowerCase()==”g”)
result = result.replace(/\s/g,””);
return result;
}
标签归档:void
遍历json
<script language=”javascript”>
function e()
{
var json=[{“kl_id”:”2″,”kl_title”:”Test date”,”kl_content”:”Test date”,”kl_type”:”1″,”id”:”1″},{“kl_id”:”2″,”kl_title”:”Test”,”kl_content”:”Test”,”kl_type”:”1″,”id”:”2″}]
var str = “”;
for (var one in json)
{
for(var key in json[one])
{
str += json[one][key]+ “,”;
}
}
document.form.txtName.value = str;
}
</script>
javascript:void(0)
JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression
expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。 (实现版本 Navigator 3.0 )
你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。
下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。
<A HREF=”javascript:void(0)”>单击此处什么也不会发生</A>
下面的代码创建了一个超级链接,用户单击时会提交表单。
<A HREF=”javascript:void(document.form.submit())”>单击此处提交表单</A>
那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),所以在使用void(0)之前,最好先想一想这个页面是否需要整体刷新。
—————————————————————————-
使用javascript的时候,通常我们会通过类似:<a href=”#” onclick=”javascript:方法”>提交</a> 的方式,通过一个伪链接来调用javascript方法。这种方法有一个问题是:虽然点击该链接的时候不会跳转页面,但是滚动条会往上滚,解决的办法是返 回一个false。
如下所示:
<a href=”#” onclick=”javascript:方法;return false;”>提交</a><a href=”javascript:void(0)” onclick=”javascript:方法;return false;”>提交</a>
还有一个方法是 #this
a href=”#this” onclick=”javascript:方法”
—————————————————————————-
#包含了一个位置信息
默认的锚点是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接
这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首
而javascript:void(0) 则不是如此
所以调用脚本的时候最好用void(0) 或者<input onclick> <div onclick>等
打开新窗口链接的几种办法
1.window.open(‘url’)
2.用自定义函数
<script>
function openWin(tag,obj)
{
obj.target=”_blank”;
obj.href = “Web/Substation/Substation.aspx?stationno=”+tag;
obj.click();
}
</script><a href=”javascript:void(0)” onclick=”openWin(3,this)”>株洲</a>
3.window.location.href=””
总结:1)链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放 等,所以,最安全的办法还是使用“#”。为防止点击链接后跳转到页首,onclick事件return false即可。2)在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新,不需要整体刷新时可以用void(0)。
innerHTML 和 pasteHTML 区别
innerHTML 是一个属性 ,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它
pasteHTML() 是一个方法 ,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上
例:
<Script Language=”JavaScript”>
function addLink(){
var oRange = document.selection.createRange();
if(oRange.text!=”){
var oUrl = window.prompt(‘链接网址…’,’https://www.nopost.cn/’);
var oHtml = ‘<a href=’+oUrl+’ target=_blank>’+oRange.text+'</a>’;
oRange.pasteHTML(oHtml);
}else{
window.alert(‘您没有选择加链接的文字!’);
}
DOM常用操作
1、获取对象
document.getElementById(ID)
//获得指定ID值的对象
document.getElementsByName(Name)
//获得指定Name值的对象数组,常用获取radio,checkbox
2、坐标
var oRect=obj.getBoundingClientRect();
x=oRect.left
y=oRect.top
3、获取窗口大小,分辨率
Java代码
document.body.clientWidth
document.body.clientHeight
获得窗口大小(包含Border、Scroll等元素)
document.body.offsetWidth
document.body.offsetHeight
分辨率
creen.width,creen.height.
具体解释如下:
scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)
clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
scrollHeight: 获取对象的滚动高度。
offsetHeight:获取对象相对于版面或由父坐标
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
offsetLeft:获取对象相对于版面或由
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
offsetTop 属性指定的父坐标的计算顶端位置
offsetParent 属性指定的父坐标的高度
offsetParent 属性指定的父坐标的计算左侧位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height
例:如页面过长,想让id=”view1″的节点显示出来。
var currentDom=document.getElementById(“view1”).getBoundingClientRect();
if(currentDom.top>window.document.body.clientHeight){
window.document.body.scrollTop=currentDom.top;
}
document.body.clientWidth
document.body.clientHeight
获得窗口大小(包含Border、Scroll等元素)
document.body.offsetWidth
document.body.offsetHeight
分辨率
creen.width,creen.height.
具体解释如下:
scrollWidth是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)
clientWidth是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
scrollHeight: 获取对象的滚动高度。
offsetHeight:获取对象相对于版面或由父坐标
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
offsetLeft:获取对象相对于版面或由
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
offsetTop 属性指定的父坐标的计算顶端位置
offsetParent 属性指定的父坐标的高度
offsetParent 属性指定的父坐标的计算左侧位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width – border
clientHeight = height – border
offsetWidth = width
offsetHeight = height
例:如页面过长,想让id=”view1″的节点显示出来。
var currentDom=document.getElementById(“view1”).getBoundingClientRect();
if(currentDom.top>window.document.body.clientHeight){
window.document.body.scrollTop=currentDom.top;
}
4、dom加载顺序
1.HTML解析完毕
2.外部脚本和样式表加载完毕
3.脚本在文档内解析并执行
4.HTML DOM完全构造起来
5.图片和外部内容加载
6.网页完成加载
监听DOM加载状态
这项技术在不堵塞浏览器加载的情况下尽可能快地检查HTML DOM文档是否已经加载了执行所必须的属性。
document
document.getElementById
document.getElementsByTagName
document.body
检查这几个对象可以获知DOM的加载状态
以下代码监听DOM何时加载完毕(来自《精通JavaScript》)
Java代码
Java代码
function domReady(func) {
// 假如DOM已经加载,马上执行函数
if (domReady.done) return func();
// 假如我们已经增加了一个函数
if (domReady.timer) {
// 把它加入到待执行函数清单中
domReady.ready.push(func);
}
else {
// 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数
// addEvent函数为由Dean Edwards编写的著名函数
addEvent(window, “load”, isDOMReady );
// 初始化待执行函数的数组
domReady.ready[ func ];
// 尽可能快地检查DOM是否已可用
domReady.timer = setInterval(isDOMReady, 13);
}
};
//检查DOM是否已可操作
function isDOMReady() {
// 如果我们能判断出DOM已可用,忽略
if (domReady.done) return false;
// 检查若干函数和元素是否可用
if (document && document.getElementsByTagName && document.getElementById && document.body) {
// 如果可用,我们可以停止检查
clearInterval(douReady.timer);
domReady.timer = null;
// 执行所有正等待的函数
for (var i = 0; i < domReady.ready.length; i++)
domReady.ready[i]();
// 记录我们在此已经完成
domReady.ready = null;
domReady.done = true;
}
}
function domReady(func) {
// 假如DOM已经加载,马上执行函数
if (domReady.done) return func();
// 假如我们已经增加了一个函数
if (domReady.timer) {
// 把它加入到待执行函数清单中
domReady.ready.push(func);
}
else {
// 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数
// addEvent函数为由Dean Edwards编写的著名函数
addEvent(window, “load”, isDOMReady );
// 初始化待执行函数的数组
domReady.ready[ func ];
// 尽可能快地检查DOM是否已可用
domReady.timer = setInterval(isDOMReady, 13);
}
};
//检查DOM是否已可操作
function isDOMReady() {
// 如果我们能判断出DOM已可用,忽略
if (domReady.done) return false;
// 检查若干函数和元素是否可用
if (document && document.getElementsByTagName && document.getElementById && document.body) {
// 如果可用,我们可以停止检查
clearInterval(douReady.timer);
domReady.timer = null;
// 执行所有正等待的函数
for (var i = 0; i < domReady.ready.length; i++)
domReady.ready[i]();
// 记录我们在此已经完成
domReady.ready = null;
domReady.done = true;
}
}
5、增加对象
Java代码
/*创建新层*/
var div_view=document.createElement(“div”);
也可这样创建 document.createElement(“<div></div>”);
设置样式:div_view.className=””;
设置ID:div_view.id=”div1″;
设置div显示内容:div_view.innerHTML=”test”;
innerHTML即div里的内容。例<div id=”div1″>test1</div>,div1.innerHTML则是”test1″
outerHTML则是整个div。例div1.outerHTMl是”<div id=div1>test1</div>”.
注意,innerHTML和outerHTML均会把”,’去掉。
/*创建table,插入行,列*/
var table=document.createElement(“table”);
var trow=table.insertRow();插入行到最后。
var trow=table.insertRow(1);插入到第2行。
var rowLength=table.rows.length;获取table的总行数
var tcell=row.insertCell();插入一列
tcell.innerHTML=”insert row”;设置列内容
其他的创建方式类似。
document.body.appendChild(div_view);把层添加到body中,这样才会在页面中显示增加的层。
/*创建新层*/
var div_view=document.createElement(“div”);
也可这样创建 document.createElement(“<div></div>”);
设置样式:div_view.className=””;
设置ID:div_view.id=”div1″;
设置div显示内容:div_view.innerHTML=”test”;
innerHTML即div里的内容。例<div id=”div1″>test1</div>,div1.innerHTML则是”test1″
outerHTML则是整个div。例div1.outerHTMl是”<div id=div1>test1</div>”.
注意,innerHTML和outerHTML均会把”,’去掉。
/*创建table,插入行,列*/
var table=document.createElement(“table”);
var trow=table.insertRow();插入行到最后。
var trow=table.insertRow(1);插入到第2行。
var rowLength=table.rows.length;获取table的总行数
var tcell=row.insertCell();插入一列
tcell.innerHTML=”insert row”;设置列内容
其他的创建方式类似。
document.body.appendChild(div_view);把层添加到body中,这样才会在页面中显示增加的层。
6、frame
window.frames[“frameName”]获取frame的window对象
7、select
Java代码
当前选中的option:select.options[select.selectedIndex]
所有options:select.options.返回的是option[]数组
增加option
方法1:option1=new Option(text,value);
select.add(option1);
方法2:option2=document.createElement(“option”);
option2.value=value;
option2.text=text;
select.add(option2);
删除option
select.remove(option1);
删除所有option
select.options.length=0;
Javascript常用的一些小技巧
1. oncontextmenu=”window.event.returnValue=false” 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table
2. <body onselectstart=”return false”> 取消选取、防止复制
3. onpaste=”return false” 不准粘贴
4. oncopy=”return false;” oncut=”return false;” 防止复制
5. <link rel=”Shortcut Icon” href=”favicon.ico”> IE地址栏前换成自己的图标
6. <link rel=”Bookmark” href=”favicon.ico”> 可以在收藏夹中显示出你的图标
7. <input style=”ime-mode:disabled”> 关闭输入法
8. 永远都会带着框架
程序代码
<script language=”JavaScript”><!–
if (window == top)top.location.href = “frames.htm”; //frames.htm为框架网页
// –></script>
9. 防止被人frame
程序代码
<SCRIPT LANGUAGE=JAVASCRIPT><!–
if (top.location != self.location)top.location=self.location;
// –></SCRIPT>
10. 网页将不能被另存为
<noscript><*** src=”/*.html>”;</***></noscript>
11. <input type=button value=”/查看网页源代码
程序代码
onclick=”window.location = “view-source:”+ http://www.nopost .com”>
12. 删除时确认
程序代码
<a href=””javascript :if(confirm(“确实要删除吗?”))location=”boos.asp?&areyou=删除&page=1″”>删除</a>
13. 取得控件的绝对位置
程序代码
//Javascript
<script language=”Javascript”>
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert(“top=”+t+”/nleft=”+l);
}
</script>
//VBScript
<script language=”VBScript”><!–
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>”BODY”
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox “top=”&t&chr(13)&”left=”&l,64,”得到控件的位置”
end function
–></script>
14. 光标是停在文本框文字的最后
程序代码
<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()”>
15. 判断上一页的来源
javascript :
document.referrer
16. 最小化、最大化、关闭窗口
程序代码
<object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Minimize”></object>
<object id=hh2 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Maximize”></object>
<OBJECT id=hh3 classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″>
<PARAM NAME=”Command” value=”/Close”></OBJECT>
<input type=button value=”/最小化 onclick=hh1.Click()>
<input type=button value=”/blog/最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE
17.屏蔽功能键Shift,Alt,Ctrl
程序代码
<script>
function look(){
if(event.shiftKey)
alert(“禁止按Shift键!”); //可以换成ALT CTRL
}
document.onkeydown=look;
</script>
18. 网页不会被缓存
程序代码
<META HTTP-EQUIV=”pragma” CONTENT=”no-cache”>
<META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”>
<META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>
或者<META HTTP-EQUIV=”expires” CONTENT=”0″>
19.怎样让表单没有凹凸感?
程序代码
<input type=text style=”””border:1 solid #000000″>
或
<input type=text style=”border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000″></textarea>
20.<div><span>&<layer>的区别?
<div>(division)用来定义大段的页面元素,会产生转行
<span>用来定义同一行内的元素,跟<div>的唯一区别是不产生转行
<layer>是ns的标记,ie不支持,相当于<div>
21.让弹出窗口总是在最上面:
<body onblur=”this.focus();”>
22.不要滚动条?
程序代码
让竖条没有:
<body style=”overflow:scroll;overflow-y:hidden”>
</body>
让横条没有:
<body style=”overflow:scroll;overflow-x:hidden”>
</body>
两个都去掉?更简单了
<body scroll=”no”>
</body>
23.怎样去掉图片链接点击后,图片周围的虚线?
<a href=”#” onFocus=”this.blur()”><img src=”/logo.jpg” border=0></a>
24.电子邮件处理提交表单
程序代码
<form name=”form1″ method=”post” action=mailto:****@***.com
enctype=”text/plain”>
<input type=submit>
</form>
25.在打开的子窗口刷新父窗口的代码里如何写?
window.opener.location.reload()
26.如何设定打开页面的大小
<body onload=”top.resizeTo(300,200);”>
打开页面的位置<body onload=”top.moveBy(300,200);”>
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
程序代码
<STYLE>
body
{background-image:url(/logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
28. 检查一段字符串是否全由数字组成
程序代码
<script language=”Javascript”><!–
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(“1232142141”))
alert(checkNum(“123214214a1”))
// –></script>
29. 获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight
30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert(“含有汉字”);
else alert(“全是字符”);