1.document.write(“”); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById(“表单中元素的ID号”).name(或value)
6.一个小写转大写的JS: document.getElementById(“output”).value = document.getElementById(“input”).value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:(“”+变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用+号.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],…){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:window.status=”字符”;
21.弹出提示信息:window.alert(“字符”);
22.弹出确认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href=”URL”
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符:+=
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i++){
if (form.elements[i].type == “text”){
form.elements[i].value = “”;
}
}
31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)
35.字符串的定义:var myString = new String(“This is lightsword”);
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf(“String2”)!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在 值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor (Math.random()*(n+1))返回随机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份, dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到 日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分, dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设 置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设 置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds (val)设置秒 [注意:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames[“frameName”].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript:)来开头后面加函数名
48.在老的浏览器中不执行此JS:<!– //–>
49.引用一个文件式的JS:<script type=”text/javascript” src=”aaa.js”></script>
50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>
51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href= “a.html” onclick=”location.href=’b.html’;return false”>dfsadf</a>
52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number, Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:<script>function fullScreen(){ this.moveTo(0,0); this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid(“表单元素”).tabIndex = 1
57.innerHTML的值是表单元素的值:如<p id=”para”>”how are <em>you< /em>”</p>,则innerHTML的值就是:how are <em>you</em>
58.innerTEXT的值和上面的一样,只不过不会把<em>这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:onfocus=”this.blur()”
67.取出该元素在页面中出现的数量:document.all.tags(“div(或其它HTML标记符)”).length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status=’文字’,默认的状态栏文字设置:window.defaultStatus = ‘文字.’;
70.添加到收藏夹:external.AddFavorite(“http://www.k686.com”,”jaskdlf”);
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener…的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status=”内容”
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm(“Are you sure?”)){alert(“ok”);}else{alert(“Not Ok”);}
78.JS中的窗口重定向:window.navigate(“http://www.k686.com”);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt(“message”,”defaultReply”);
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval(“expr”,msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog(“URL”[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue= “we really like you and hope you will stay longer.”;}} window.onbeforeunload=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(www.k686.com),port(80),host(www.k686.com:80),pathname(“/a/a.html”),hash(“#giantGizmo”,指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
89-1.parent.location.reload()刷新父亲对象(用于框架)
89-2.opener.location.reload()刷新父窗口对象(用于单开窗口)
89-3.top.location.reload()刷新最顶端对象(用于多开窗口)
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94.”abc”.charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf(“字符”,起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var
108.isNaN()是JavaScript 的内部函数,对参数进行运算,判断其是否为非数字。若参数为NaN
(注释:非数值值),则返回true;否者返回false;parseInt 也是一个JavaScript 的内部函数,分析一个
字符串,并返回给定基数或底数的一个整数(若没有给定基数,则假定基数为10)。
标签归档:htm
JS面向对象
<html>
<head>
</head>
<body>
<button onclick=”person1.introduce()”>person1</button>
<button onclick=”person2.introduce()”>person2</button>
<button onclick=”person3.introduce()”>person3</button>
<button onclick=”person4.introduce()”>person4</button>
<button onclick=”checkFunc()”>checkFunc</button>
<button onclick=”checkFuncByProto()”>checkFuncByProto</button><br/>
<button onclick=”testCnstrct()”>testCnstrct</button>
<button onclick=”testCnstrctpttp()”>testCnstrctpttp</button>
<button onclick=”testDbproto()”>testDbproto</button>
<button onclick=”JSONFontI()”>JSONFontI</button>
<button onclick=”JSONFontII()”>JSONFontII</button><br/>
<button onclick=”testFactory()”>testFactory</button>
<button onclick=”testAbstractFactory()”>testAbstractFactory</button>
<script>
var name = “1111111111”
/********************************************/
/* 第一种构建对象的办法*/
/* ***推断***,{}即为对象.*/
/********************************************/
var person1 = {};
person1.name = “junzi”;
person1.age = 23;
person1.introduce = function () {
alert(“My name is ” + this.name + “.I’m ” + this.age);
};
/********************************************/
/* 第二种构建对象的办法,类似JSON格式”:”*/
/********************************************/
var person2 = {
name: “junzi”,
age: 23,
introduce: function () {
alert(“My name is ” + this.name + “.I’m ” + this.age);
}
};
/********************************************/
/* 第三种构建对象的办法,与Java中有些相似*/
/********************************************/
var Person = function () {
this.name = “junzi”;
this.age = 23;
this.introduce = function () {
alert(“My name is ” + this.name + “.I’m ” + this.age);
};
};
var person3 = new Person();
/********************************************/
/* 第四种构建对象,与第三种类似,只不过参数通过new 构造传入 */
/********************************************/
var Person = function (name, age) {
this.name = name;
this.age = age;
this.introduce = function () {
alert(“My name is ” + this.name + “.I’m ” + this.age);
};
};
var person4 = new Person(“junzi”,23);
/********************************************/
/* 看看实例之间的关系@@ */
/********************************************/
var person5 = new Person(“chaokong”,23);
function checkFunc(){
alert(person4.introduce==person5.introduce);//结果是false,说明introduce有两个实现分别在4和5中
alert(person4.age==person5.age);// 结果是true,说明基本类型的话之比较数值是否相同
alert(person4.name==person5.name);// 如果两个名字值不同,则为false,***推测***在javascript中的变量比较的是值是否相同,而方法被视为对象.于是下边…
}
/********************************************/
/* 通过prototype的方式 */
/********************************************/
var PersonI = function(name,age){
this.name = name;
this.age = age;
}
/*
* 在JavaScript中,prototype对象是实现面向对象的一个重要机制。
* 每个函数就是一个对象(Function),函数对象都有一个子对象,即prototype对象,类是以函数的形式来定义的。
* prototype表示该函数的原型,也表示一个类的成员的集合。
* 在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。
* 1、该对象被类所引用,只有函数对象才可引用;
* 2、在new实例化后,其成员被实例化,实例对象方可调用。
* 同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。
*/
PersonI.prototype.introduce = function(){
alert(“My name is ” + this.name + “.I’m ” + this.age);
}
var person6 = new PersonI(“junzi”,23);
var person7 = new PersonI(“chaokong”,23);
function checkFuncByProto(){
alert(person6.introduce==person7.introduce);//
alert(person6.age==person7.age);
alert(person6.name==person7.name);
}
/********************************************/
/* 研究研究prototype*/
/********************************************/
/*
* JavaScript中创建一个对象分以下几步:
* <1> var p={}; 也就是说,初始化一个对象p。
* <2> p.__proto__=Person.prototype;
* <3> Person.call(p);也就是说构造p,也可以称之为初始化p。
*/
var PersonII = function () { };
//通过prototype创建一个方法
PersonII.prototype.sayHello = function(){
alert(“hello”);
}
var p = new PersonII();
function testCnstrct(){
alert(p.__proto__ === PersonII.prototype);
}
/*
* 首先var p=new PersonII();可以得出p.__proto__=PersonII.prototype。
* 那么当我们调用p.sayHello()时,首先p中没有sayHello这个属性,
* 于是,他就需要到他的__proto__中去找,也就是PersonII.prototype,
* 而我们在上面定义了PersonII.prototype.sayHello=function(){};
* 于是,就找到了这个方法。
*/
function testCnstrctpttp(){
p.sayHello();
}
/** 继续…原型链 */
PersonII.prototype.age = 23;// 设定PersonII的属性
var Programmer = function () { };// 创建一个新对象Programmer,可以得出pp.__proto__ = Programmer.prototype;
/*
* 设 var tempp = new PersonII();
* ∵ Programmer.prototype = new PersonII();
* ∴ Programmer.prototype = tempp;
*
* ∵ tempp.__proto__ = PersonII.prototype;
* ∴ Programmer.prototype.__proto__ = PersonII.prototype;
* 设 var pp = new Programmer();
* ∴ pp.__proto__ = Programmer.prototype。
* ∴ pp.__proto__.__proto__ = PersonII.prototype。
*
*
* pp中没有sayHello()这个方法,所以到pp.__proto__中查找.
* pp.__proto__(也就是Programmer.prototype,也就是tempp,也就是PersonII(),)也没有sayHello()这个方法,所以到pp.__proto__.__proto__中查找
* pp.__proto__.__proto__也就是PersonII().prototype,在这里存在sayHello()这个方法
*
* age属性是同样的道理,只不过在Programmer.prototype的时候就已经找到age了,所以就不继续往下找了.
*/
/* 这也就是原型链的实现原理。
* 其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,
* 他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!
*/
Programmer.prototype = new PersonII();// ***
Programmer.prototype.writeCode = function () {
alert(“print ‘fuck the js with my jb'”);
};
Programmer.prototype.age = 22;
var pp = new Programmer();
function testDbproto(){
pp.sayHello();
pp.writeCode();
alert(pp.age);
}
/********************************************/
/* JSON格式详细 */
/********************************************/
/* 1. */
var PersonIII = {
create: function (name, age) {
this.name = name;
this.age = age;
},
introduce: function () {
alert(“Hello,My name is ” + this.name + “.I am ” + this.age);
}
}
function JSONFontI(){
/*
* 这样是不行的,因为piii = Person.__proto__,而没有这样的 XXX.__proto___=Person.prototype,所以找不到PersonIII内部的方法
* var piii = new PersonIII()
* piii.create(“junzi”, 23);
* piii.introduce();
*/
PersonIII.create(“junzi”, 23);
PersonIII.introduce();
}
/* 2. */
/* 用X做一个中间变量,使得我们可以访问JSON对象的内部属性。*/
function JSONFontII(){
var x = function(){ };//必须有function()
x.prototype = PersonIII;
var px = new x();
px.create(“junzi”, 23);
px.introduce();
}
/* 3. */
/* 工厂模式 */
var Factory = {
createPersonIII : function (className,name,age) {
var temp = function () {
className.create(name, age);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
function testFactory(){
var person = Factory.createPersonIII(PersonIII,”junzi”,23);
person.introduce();
}
/* 4. */
/* 抽象工厂模式 */
var abstractFactory = {
create: function (className, params) {
var temp = function () {
className.create.apply(this, params);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
function testAbstractFactory(){
var person = abstractFactory.create(PersonIII,[“junzi”,23]);
person.introduce();
}
</script>
</body>
</html>
模拟阴影效果纯CSS圆角矩形
项目上需要个弹出菜单,要求要阴影+圆角。。阴影不敢用PNG格式,客户大多是使用IE6的,用滤镜又不好控制。干脆搞个纯CSS的像素圆角+阴影(模拟)吧,哈哈。
思路是这样的:
代码如下:
CSS
.bBox{width:300px;}
.bBox-t1,.bBox-t2,.bBox-b1,.bBox-b2{height:1px;overflow:hidden; margin:0px;}
.bBox-t1{border:0px;margin:0px 2px 0px 1px;}
.bBox-t2{border-width:0px 1px;border-style:solid;margin-right:1px;}
.bBox-offset{margin:0px;border:0px;}
.bBox-body{border-width:0px 1px;border-style:solid;margin-right:1px;}
.bBox-b2{background:#88CB8C;border-width:0px 2px 0px 0px;border-style:solid;margin-left:1px;}
.bBox-b1{margin:0px 1px 0px 2px;}
.bBox-body *{margin:0px;}
/*边框颜色*/
.bBox-t1,.bBox-b2{background:#88CB8C;}
.bBox-t2,.bBox-body{border-color:#88CB8C;}
/*背景颜色*/
.bBox-t2,.bBox-body{background:#B8E0BA;}
/*阴影颜色*/
.bBox-offset,.bBox-b1{background:#0D7813;}
.bBox-b2{border-color:#0D7813}
/*———————————*/
HTML
<div class=”bBox”>
<div class=”bBox-t1″></div>
<div class=”bBox-t2″></div>
<div class=”bBox-offset”>
<div class=”bBox-body”>
<h1>模拟阴影效果纯CSS圆角矩形</h1>
<ul>
<li>调用方便</li>
<li>支持多浏览器</li>
<li>快捷更换边框、背景及阴影颜色</li>
</ul>
</div>
</div>
<div class=”bBox-b2″></div>
<div class=”bBox-b1″></div>
</div>
效果:
就取名bBox吧~支持ie,firefox,chrome,其他的没试过,替换颜色和调用还是相当方便的。本来想把背景颜色,边框颜色,阴影颜色写在一起,每次只要改3个地方就行,可是bBox-b2实在是太郁闷了,搞不定,只能麻烦点,每次改6个地方了。
JavaScript 的JSON和数组混杂区分
Javascript代码:
var person = { personalInfo:{} , linkmans:[] , accounts:[] , handlers:[] } ;
等我来解释一下:
首先,person 是一个 json ,它包含四个东东:personalInfo , linkmans, accounts, handlers
接着,personalInfo 是一个 json ,
而 这三个 linkmans, accounts, handlers 都分别为 数组
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>
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插入 的方法来解决
<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)+” ”;strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=” ”+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拘。
十、列表横向排版,列表代码须紧靠,空隙自消须铭记。