分类目录归档:HTM

javascript 读取xml 数据

<?xml version=”1.0″ encoding=”gb2312″?>   
<treeview>   
<tree id=”p1″>   
<text>山东省</text>   
<target>_blank</target>   
<title>省份</title>   
<link></link>   
<tree id=”p1-1″>   
<text>威海市</text>   
<target>_blank</target>   
<title>城市</title>   
<link></link>   
</tree>   
<tree id=”p1-2″>   
<text>烟台市</text>   
<target>_blank</target>   
<title>城市</title>   
<link></link>   
<node id=”p1-2-1″>   
<text>长夼村</text>   
<target>_blank</target>   
<title>乡镇</title>   
<link>http://www.baidu.com/</link>   
</node>   
</tree>   
<node id=”p1-3″>   
<text>富镇</text>   
<target>_blank</target>   
<title>乡镇</title>   
<link>http://www.baidu.com/</link>   
</node>   
</tree>   
 
<tree id=”p2″>   
<text>河北省</text>   
<target>_blank</target>   
<title>省份</title>   
<link></link>   
<tree id=”p2-1″>   
<text>泊头市</text>   
<target>_blank</target>   
<title>城市</title>   
<link></link>   
<node id=”p2-1-1″>   
<text>郊河</text>   
<target>_blank</target>   
<title>乡镇</title>   
<link>http://www.baidu.com/</link>   
</node>   
</tree>   
<tree id=”p2-2″>   
<text>石家庄</text>   
<target>_blank</target>   
<title>城市</title>   
<link></link>   
</tree>   
</tree>   
 
<tree id=”p3″>   
<text>浙江省</text>   
<target>_blank</target>   
<title>省份</title>   
<link></link>   
<tree id=”p3-1″>   
<text>杭州市</text>   
<target>_blank</target>   
<title>城市</title>   
<link></link>   
<node id=”p3-1-1″>   
<text>某镇</text>   
<target>_blank</target>   
<title>乡镇</title>   
<link>http://www.baidu.com/</link>   
</node>   
</tree>   
<tree id=”p3-2″>   
<text>温州市</text>   
<target>_blank</target>   
<title>城市</title>   
<link></link>   
<node id=”p3-2-1″>   
<text>某镇</text>   
<target>_blank</target>   
<title>乡镇</title>   
<link>http://www.baidu.com/</link>   
</node>   
</tree>   
</tree>   
</treeview>  

 

<?xml version=”1.0″ encoding=”gb2312″?>
<treeview>
<tree id=”p1″>
<text>山东省</text>
<target>_blank</target>
<title>省份</title>
<link></link>
<tree id=”p1-1″>
<text>威海市</text>
<target>_blank</target>
<title>城市</title>
<link></link>
</tree>
<tree id=”p1-2″>
<text>烟台市</text>
<target>_blank</target>
<title>城市</title>
<link></link>
<node id=”p1-2-1″>
<text>长夼村</text>
<target>_blank</target>
<title>乡镇</title>
<link>http://www.baidu.com/</link>
</node>
</tree>
<node id=”p1-3″>
<text>富镇</text>
<target>_blank</target>
<title>乡镇</title>
<link>http://www.baidu.com/</link>
</node>
</tree>

<tree id=”p2″>
<text>河北省</text>
<target>_blank</target>
<title>省份</title>
<link></link>
<tree id=”p2-1″>
<text>泊头市</text>
<target>_blank</target>
<title>城市</title>
<link></link>
<node id=”p2-1-1″>
<text>郊河</text>
<target>_blank</target>
<title>乡镇</title>
<link>http://www.baidu.com/</link>
</node>
</tree>
<tree id=”p2-2″>
<text>石家庄</text>
<target>_blank</target>
<title>城市</title>
<link></link>
</tree>
</tree>

<tree id=”p3″>
<text>浙江省</text>
<target>_blank</target>
<title>省份</title>
<link></link>
<tree id=”p3-1″>
<text>杭州市</text>
<target>_blank</target>
<title>城市</title>
<link></link>
<node id=”p3-1-1″>
<text>某镇</text>
<target>_blank</target>
<title>乡镇</title>
<link>http://www.baidu.com/</link>
</node>
</tree>
<tree id=”p3-2″>
<text>温州市</text>
<target>_blank</target>
<title>城市</title>
<link></link>
<node id=”p3-2-1″>
<text>某镇</text>
<target>_blank</target>
<title>乡镇</title>
<link>http://www.baidu.com/</link>
</node>
</tree>
</tree>
</treeview>

然后:javascript函数实现:(文件名称:tree.htm)
Java代码

<script Language=”JavaScript”>   
var HTML = “”;   
var space = “”;   
var blank = ”   “;   
function getSubject()   
{   
var xmlDoc;   
 
if(window.ActiveXObject)   
{   
//获得操作的xml文件的对象   
xmlDoc = new ActiveXObject(‘Microsoft.XMLDOM’);   
xmlDoc.async = false;   
xmlDoc.load(“tree.xml”);   
if(xmlDoc == null)   
{   
alert(‘您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!’);   
window.location.href=’/Index.aspx’;   
return;   
}   
}   
//解析xml文件,判断是否出错   
if(xmlDoc.parseError.errorCode != 0)   
{   
alert(xmlDoc.parseError.reason);   
return;   
}   
//获得根接点   
var nodes = xmlDoc.documentElement.childNodes;   
//得到根接点下共有子接点个数,并循环   
for(var i=0; i<nodes.length; i++)   
{   
//如果接点名为 tree   
if(nodes(i).nodeName == “tree”)   
{   
readTree(nodes(i));   
}   
//如果接点名为 node   
else if(nodes(i).nodeName == “node”)   
{   
readNode(nodes(i));   
}   
}   
//删除对象   
delete(xmlDoc);   
//显示HTML   
window.show.innerHTML = HTML;   
return;   
}   
//读Tree节点   
function readTree(cI)   
{   
var nodes = cI.childNodes;   
var menuHTML = space;   
menuHTML += blank;   
//得到超级链接   
menuHTML += “<a href='”;   
//如果该节点的连接属性不为空,则连接   
if(cI.selectNodes(“link”)(0).text != “”)   
{   
menuHTML += cI.selectNodes(“link”)(0).text;   
}   
//否则为空链接   
else   
{   
menuHTML += “#”;   
}   
//目标   
if(cI.selectNodes(“target”)(0).text != “”)   
{   
menuHTML += ” target='”+cI.selectNodes(“target”)(0).text;   
menuHTML += “‘”;   
}   
//点击菜单事件,调用divshow(vid)函数   
menuHTML += ” onclick=javascript:divshow(‘”+cI.getAttribute(“id”)+”‘);”;   
//得到节点标题   
menuHTML += ” title='”;   
menuHTML += cI.selectNodes(“title”)(0).text;   
//结束   
menuHTML += “‘>”;   
//得到节点的正文   
menuHTML += cI.selectNodes(“text”)(0).text;   
menuHTML += “</a><br>\n”;   
//将menuHTML设置添加到HTML字符串   
HTML += menuHTML;   
//得到该节点的属性值<span   
HTML += “<div id='”+cI.getAttribute(“id”)+”‘ style=’display:none’>\n”;   
for(var i=0; i<nodes.length; i++)   
{   
var tempImg = “”;   
tempImg += blank;   
if(nodes(i).nodeName == “tree”)   
{   
space += tempImg;   
readTree(nodes(i));   
space = “”;   
}   
else if(nodes(i).nodeName == “node”)   
{   
space += tempImg;   
readNode(nodes(i));   
}   
}   
HTML += “</div>\n”;   
return;   
}   
//读Node节点   
function readNode(cI)   
{   
var nodeHTML = space;   
nodeHTML += blank;   
//设置超级链接   
nodeHTML += “<a href='”;   
//得到连接地址   
nodeHTML += cI.selectNodes(“link”)(0).text;   
//目标   
if(cI.selectNodes(“target”)(0).text != “”)   
nodeHTML += “‘ target='”+cI.selectNodes(“target”)(0).text;   
//得到节点标题   
nodeHTML += “‘ title='”;   
nodeHTML += cI.selectNodes(“title”)(0).text;   
//结束   
nodeHTML += “‘>”;   
//得到节点的正文   
nodeHTML += cI.selectNodes(“text”)(0).text;   
nodeHTML += “</a><br>\n”;   
HTML += nodeHTML;   
//HTML += “<div id='”+cI.getAttribute(“id”)+”‘>”;   
space = “”;   
return;   
}   
//操作对象的显示还是隐藏效果   
function divshow(vid)   
{   
if(document.all[vid].style.display == “none”)   
{   
document.all[vid].style.display = “block”;   
}   
else   
{   
document.all[vid].style.display = “none”;   
}   
return;   
}   
</script>  
  
 

Html代码

<html>   
<head>   
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>   
<title>JS_XML</title>   
 
<style type=”text/css”>   
<!–   
body   
{   
margin-left: 0px;   
margin-top: 0px;   
margin-right: 0px;   
margin-bottom: 0px;   
font-size: 9pt;   
}   
A   
{   
text-decoration:none;   
font-family: “宋体”;   
font-size: 9pt;   
COLOR:#000000;   
}   
–>   
</style>   
 
</head>   
<body bgcolor=”#EEEEEE” leftmargin=”0″ topmargin=”0″>   
<div id=show></div>   
</body>   
<script>   
getSubject()   
</script>   
</html>  

正则表达式格式验证

<?xml version=”1.0″ encoding=”UTF-8″?>
<regex>
<item>
  <id>R1</id>
  <value>/^((\\(\\d{3}\\))|(\\d{3}\\-))?(\\(0\\d{2,3}\\)|0\\d{2,3}-)?[1-9]\\d{6,7}$/</value >
  <text>电话号码</text>
</item>

<item>
  <id>R2</id>
  <value>/^((\\(\\d{3}\\))|(\\d{3}\\-))?1\\d{10}$/</value >
  <text>手机号码</text>
</item>

<item>
  <id>R3</id>
  <value>/^((((1[6-9]|[2-9]\\d)\\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\\d|3[01]))|(((1[6-9]|[2-9]\\d)\\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\\d|30))|(((1[6-9]|[2-9]\\d)\\d{2})-0?2-(0?[1-9]|1\\d|2[0-8]))|(((1[6-9]|[2-9]\\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/</value>
  <text>日期</text>
</item>

<item>
  <id>R4</id>
  <value>/^\\d{15}(\\d{2}[A-Za-z0-9])?$/</value >
  <text>身份证</text>
</item>

<item>
  <id>R5</id>
  <value>/^\\d+(\\.\\d+)?$/</value >
  <text>货币</text>
</item>

<item>
  <id>R6</id>
  <value>/^[1-9]\\d{5}$/</value>
  <text>邮政编码</text>
</item>

<item>
  <id>R7</id>
  <value>/^[1-9]\\d{4,8}$/</value>
  <text>QQ号码</text>
</item>

<item>
  <id>R8</id>
  <value>/^[\\u0391-\\uFFE5]+$/</value>
  <text>中文</text>
</item>

<item>
  <id>R9</id>
  <value>/^(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2}).(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2}).(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2}).(2[0-5]{2}|2[0-4][0-9]|1?[0-9]{1,2})$/</value>
  <text>IP地址</text>
</item>

<item>
  <id>R10</id>
  <value>/^[\\w|\\d]+@(\\w+\\.)+[a-z]{2,3}$/</value >
  <text>电子邮件地址</text>
</item>

<item>
  <id>R11</id>
  <value>/^(https|http|ftp|rtsp|mms):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?^=%&amp;:\\/~\\+#]*[\\w\\-\\@?^=%&amp;\\/~\\+#])?$/</value >
  <text>URL地址</text>
</item>

<item>
  <id>R12</id>
  <value>/^(-[1-9]|[1-9]|(0[.])|(-(0[.])))[0-9]{0,}(([.]*\\d{1,2})|[0-9]{0,})$/</value>
  <text>保留两位小数的数字</text>
</item>

<item>
  <id>R13</id>
  <value>/^\\d+$/</value>
  <text>数字</text>
</item>

<item>
  <id>R14</id>
  <value>/^(-?\\d+)(\\.\\d+)?$/</value >
  <text>浮点数</text>
</item>

<item>
  <id>R15</id>
  <value>/^[-\\+]?\\d+$/</value>
  <text>整数</text>
</item>

<item>
  <id>R16</id>
  <value>/^[0-9]*[1-9][0-9]*$/</value>
  <text>正整数</text>
</item>

<item>
  <id>R17</id>
  <value>/^-[0-9]*[1-9][0-9]*$/</value>
  <text>负整数</text>
</item>

<item>
  <id>R18</id>
  <value>/^\\d+$/</value>
  <text>正整数包括零</text>
</item>

<item>
  <id>R19</id>
  <value>/^0|-[0-9]*[1-9][0-9]*$/</value>
  <text>负整数包括零</text>
</item>

<item>
  <id>R20</id>
  <value>/^[A-Za-z0-9]+$/</value>
  <text>由数字和英文字母组成的字符串</text>
</item>

<item>
  <id>R21</id>
  <value>/^[A-Z0-9]{5,25}$/</value>
  <text>由5-25位的数字或大写字母组成</text>
</item>

<item>
  <id>R22</id>
  <value>/^[A-Za-z]+$/</value>
  <text>由英文字母组成的字符串</text>
</item>

<item>
  <id>R23</id>
  <value>/^[A-Z]+$/</value>
  <text>由大写英文字母组成的字符串</text>
</item>

<item>
  <id>R24</id>
  <value>/^\\w+$/</value>
  <text>由数字、英文字母或者下划线组成的字符串</text>
</item>

<item>
  <id>R25</id>
  <value>/^[^\\s]{1}[^-_\\~!@#\\$%\\^&amp;\\*\\.\\(\\)\\[\\]\\{\\}&lt;&gt;\\?\\\\/|;:+=`,\’\”]*$/</value >
  <text>无符号字符串</text>
</item>
</regex>
  

//范例
function _isvalidok(val)
        {
        var temp = false;
        if(val.indexOf(‘-‘) != -1)
        {
        var _position = val.indexOf(‘-‘);
        var _length = val.length;
        var first = val.substring(0, _position);
        var second = val.substring(_position+1, _length);
        var patrn=/^[0-9]{1,20}$/; 
        var regex_AB = /^[A-Z]+$/;
        var regex_ab = /^[a-z]+$/;
    if (patrn.exec(first) && patrn.exec(second))
    temp = true;
    else if(regex_AB.exec(first) && regex_AB.exec(second) && first.length == 1 && second.length == 1)
    temp = true;
    else if(regex_ab.exec(first) && regex_ab.exec(second) && first.length == 1 && second.length == 1)
    temp = true;
    else
    temp = false;
        }else
        {
        var regex_Aa = /^[A-Za-z]+$/;
        var regex_1 =  /^[0-9]*$/;
        if(regex_Aa.exec(val) || regex_1.exec(val))
        {
        temp = true;
        }else
        {
        temp = false;
        }
        }
        return temp;
        }
 

js常用方法

代码:
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;
}

遍历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)。

 

最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)(转载)

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用 xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.

CSS技巧

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline;    例如:    <#div id=”imfloat”>    相应的css为    #IamFloat{    float:left;    margin:5px;/*IE下理解为10px*/    display:inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 

4 IE与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。    比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:    #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 

5.页面的最小宽度     min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类, 然后CSS这样设计:    #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug    左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.   

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id=”box”>   <div id=”left”></div>   <div id=”right”></div>   </div>

 

7.IE捉迷藏的问题    当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。    有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度; 

① 例如:

<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >

这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)   这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:

.clear{ clear:both;} 

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。  

  例如某一个wrapper如下定义:   

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:   <div id=”page”>   <div id=”left”></div>   <div id=”center”></div>   <div id=”right”></div>    </div>   比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决   

<div id=”page”> 

       <div id=”bg” style=”float:left;width:100%”>  

               <div id=”left”></div>  

              <div id=”center”></div>  

              <div id=”right”></div>  

       </div>  

</div>  

再嵌入一个float left而宽度是100%的DIV解决之

④万能float 闭合(非常重要!)    关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.   

 /* Clear Fix */   

.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }   

 .clearfix { display:inline-block; }   

 /* Hide from IE Mac */   

 .clearfix {display:block;}   

/* End hide from IE Mac */   

 /* end of clearfix */   

或者这样设置:

.hackbox{ display:table; //将对象作为块元素级的表格显示}

11.高度不适应    高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。    例:  

#box {background-color:#eee; }    

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }    

<div id=”box”>     <p>p对象中的内容</p>     </div>    

解决方法:在P对象上下各加2个空的div对象CSS代码:

.1{height:0px;overflow:hidden;}

或者为DIV加上 border属性。

12 .IE6下为什么图片下有空隙产生 解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

13.如何对齐文本与文本输入框 加上 vertical-align:middle;

<style type=”text/css”> <!– input {      width:200px;      height:30px;      border:1px solid red;      vertical-align:middle; } –> </style>

14.web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 div id=”aa”   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器

<style type=”text/css”>

<!–

li {      width:200px;      white-space:nowrap;      text-overflow:ellipsis;      -o-text-overflow:ellipsis;      overflow: hidden;      }

 –>

</style>

16.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd “>

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

<style type=”text/css”>

<!–

html {      scrollbar-face-color:#f6f6f6;      scrollbar-highlight-color:#fff;      scrollbar-shadow-color:#eeeeee;      scrollbar-3dlight-color:#eeeeee;      scrollbar-arrow-color:#000;      scrollbar-track-color:#fff;      scrollbar-darkshadow-color:#fff;      }

–>

</style>

17.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

18.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明

<param name=”wmode” value=”transparent” />

19.怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

<style type=”text/css”>

 <!–

div {      position:absolute;      top:50%;      lef:50%;      margin:-100px 0 0 -100px;      width:200px;      height:200px;      border:1px solid red;      }

 –>

</style> 

FF与IE

1. Div居中问题   div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。 

2.链接(a标签)的边框与背景   a 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

3.超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

Code:

<style type=”text/css”> <!– a:link {} a:visited {} a:hover {} a:active {} –> </style>  

4. 游标手指cursor    cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

5.UL的padding与margin   ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题 

6. FORM标签   这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式

ul,form{margin:0;padding:0;}

给定义死了,所以后面就不会为这个头疼了.

7. BOX模型解释不一致问题   在FF和IE 中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

div {maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important;    

 #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}   

#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)    p[id]{}div[id]{}    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的手段 – !important;    如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下  

.tabd1{    background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/    background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}  

得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过 

10.IE,FF的默认值问题   或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。    我们都知道,浏览器在显示网页的时候,都会根据网页的 css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在 css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。

11.为什么FF下文本无法撑开容器的高度 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min- height:200px;   这里为了照顾不认识min-height的IE6 可以这样定义:

 { height:auto!important; height:200px; min-height:200px; }

12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入&#10;的方法来解决

<style type=”text/css”>
<!–
div {      width:300px;      word-wrap:break-word;      border:1px solid red; }
–>
</style>

<div id=”ff”>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

function toBreakWord(el, intLen)
{     
var ōbj=document.getElementById(el);     
var strContent=obj.innerHTML;     
var strTemp=””;     
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+”&#10;”;

strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=”&#10;”+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById   &&   !document.all)
 toBreakWord(“ff”, 37);
</scrīpt>

13.为什么IE6下容器的宽度和FF解释不同呢

<?xml version=”1.0″ encoding=”gb2312″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd “>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
<!–
div {      cursor:pointer;      width:200px;      height:200px;      border:10px solid red      }
–>
 </style>
<div ōnclick=”alert(this.offsetWidth)”>让FireFox与IE兼容</div>

问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

IE6,IE7,FF   IE7.0 出来了,对CSS的支持又有新问题。浏览器多了,网页兼容性更差了,疲于奔命的还是我们,为解决IE7.0的兼容问题,找来了下面这篇文章:现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!下面是三个浏览器的兼容性收集.

第一种,是CSS HACK的方法   

height:20px; /*For Firefox*/    *height:25px; /*For IE7 & IE6*/    _height:20px; /*For IE6*/   

注意顺序。这样也属于CSS HACK,不过没有上面这样简洁。   

#example { color: #333; } /* Moz */    * html #example { color: #666; } /* IE6 */    *+html #example { color: #999; } /* IE7 */

<!–其他浏览器 –><link rel=”stylesheet” type=”text/css” href=”css.css” />   
<!–[if IE 7]>   
<!– 适合于IE7 –>   
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />  
<![endif]–>   
<!–[if lte IE 6]>   
<!– 适合于IE6及一下 –>   
<link rel=”stylesheet” type=”text/css” href=”ie.css” />   
<![endif]–>

第三种,css filter的办法,以下为经典从国外网站翻译过来的。.    新建一个css样式如下: 

#item {         width: 200px;         height: 200px;         background: red;    }    

新建一个div,并使用前面定义的css的样式:   
<div id=”item”>some text here</div>    
在body表现这里加入lang属性,中文为zh:   
<body lang=”en”>    
现在对div元素再定义一个样式:   
*:lang(en) #item{         background:green !important;    }   
 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

#item:empty {         background: green !important    }    

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种,简洁,兼容性比较好。

 

 

CSS十条速记口诀

如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?

一、IE边框若显若无,须注意,定是高度设置已忘记;

二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

三、三像素文本慢移不必慌,高度设置帮你忙;

四、兼容各个浏览须注意,默认设置行高可能是杀手;

五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

九、IE浮动双边距,请用display:inline拘。

十、列表横向排版,列表代码须紧靠,空隙自消须铭记。

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(“全是字符”);