?
XHTML和HTML之间的区别
1.XHTML 元素一定要被正确的嵌套使用。
2 XHTML 文件一定要有正确的组织格式。
<html>
<head> ... </head>
<body> ... </body>
</html>
3 标签名字一定要用小写字母。
因为 XHTML文档是XML应用程序， XML 对大小写是敏感的
4 所有的 XHTML 元素一定要关闭,独立的一个标签我们也要结束用 />来结束。
5 XHTML的一些其他语法要求： 属性名字必须小写。如：
正确的代码：
<dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
1. getYear()方法
var year= new Date().getYear();
document.write(year);//ie = 2011" ff和chrome=111，因为在ff里面 getYear 返回的是 "当前年份-1900" 的值。
【兼容处理】通过 getFullYear getUTCFullYear 去调用:
var year = new Date().getFullYear();document.write(year); //2011
动态设置表单元素的float属性的区别：
var test = document.getElementById("test");
test.style.float="right";//chrome
test.style.styleFloat="right";//IE
test.style.cssFloat = "right";//FF
word-break:break-all;//div内容超过div宽度，则把文字切碎换行。
word-wrap:break-word; //配合使用 表示吧单词切断了。
min-width: 80px;
min-height: 35px;
max-width:400px;
margin-left:auto;margin-right:auto; //非IE浏览器实现居中，IE需要加上text-algin:center;
overflow:auto; //自动出现滚动条
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A Code: <style type="text/css">
a:link {color:blue;} a:hover {color:yellow;} a:active {color:red;} a:visited {color:green;}
{margin:0;padding:0;}浏览器大都有自己的默认值，手动设置为0就能解决大部分问题
div{margin:30px!important;margin:28px;} 为了兼容FF，可以为FF提供自己的样式，使用!important,注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别,
Object.style.background=
background-color:color/blue,#FFFFF;
background-image:url(images/a.jif);
background-repeat:’no-repeat/repeat-x/repeat-y/repeat;
background-attachment: scroll/fixed;
background-position: (top,left)/(23px,34px)/(12%,30%)
width:auto !important;width:100px;height:auto;max-width:400px;
非IE浏览器支持width=auto,但是IE不识别，所以使用import，同时max-width样式IE也不识别。
滤镜：
IE：filter:alpha(opacity=30,style=1)">
opacity=30 表示滤镜为30%,style有效值为 1 2 3 4
IE复杂?滤镜效果：
<div style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0');
widht:100px; height:100px;"></div>
FF: opacity: .1 表示滤镜为10%（也可以写0.1）
事件兼容写法：var e = e||window.event;
Event.x的兼容性写法：var x = event.clinetX; IE and FF 等 都有
但是clientX和event.x有细微?差别，
更标的写法：Var x = event.x?event.x:event.pageX;
事件源兼容写法：(取得事件触发的dom的tagName)
var event = e ||window.event;
var srcDom = event.srcElement || event.target
alert(srcDom.tagName)
window.open()的参数and说明
channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。
注意：参数之间使用，号分隔，这个区别于样式的写法 demo：
window.open("a.htm","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")
FF圆角： -moz-border-radius:4px，
Date对象的getDate()的兼容性写法：var y =now.getFullYear();
FF 和chrome里面 getYear 返回的是 "当前年份-1900" 的值。
给DOM对象设置属性一律使用setAttribute方法。
设置DOM对象的样式
IE和FF都支持object.className，所以可以这样写：
var myObject = document.getElementById("header");
myObject.className="classValue"
获取键盘值的兼容性写法：
<input id="txt" onkeydown="dotest(event)">
function dotest(e){
var event = e||window.event;
var code = e.which || e.keyCode;
alert(code)
}
注意：在调用dotest方法的时候需要传递event参数，而且，参数的名称必须是event
例如：<input id="txt" onkeydown="dotest(event)">
如果<input id="txt" onkeydown="dotest(e)"> 则失效
备用：同时按住alt ctrl shift等
altKey，ctrlKey，shiftKey：顾名思义，这些属性是指鼠标事件发生的时候，是否同时按住了Alt、Ctrl或者Shift键，返回的是一个布尔值。
事件绑定的兼容性写法：
var divDom = document.getElementById("box");
//divDom.onclick = function(){alert('aaaaaaaa')}
// 这种写法虽然兼容，但是新的onclick方法覆盖了原始的onclick方法。
if(divDom.attachEvent){
divDom.attachEvent("onclick",function(){
//这种写法仅IE兼容 注意：IE事件方法加上on
alert("IE")
})
}else{
divDom.addEventListener("click",function(){
//FF chrome等等兼容,注意：FF等等事件不加on
alert("FF")
},false) //这个参数必须加，但是什么作用还不清楚???
}
对应的移除事件监听分别为：detachEvent 和removeEventListener
测试了，但是没有成功的移除事件监听？？？？？？？？
childNodes在IE和FF下的区别：
<ul id="main"> <li>1</li> <li>2</li> <li>3</li></ul> <input type=button value="click me!"
onclick="alert(document.getElementById('main').childNodes.length)">
IE下返回3，但是FF和Chrome返回6，(网友说使用#text判断)
清空一个select的options的兼容性写法：
sel.options.length = 0; //将options的长度置为0就可以了。
标准户：给每个图片加上alt属性，alt：当照片不存在或者load错误时的提示。
其中FF做得最好，如果图片不存在完全用alt的文本填充，IE下还有一块破碎的图片显示，但是也有文本题是，而chrome则什么文字都没有；
FF图片缓存问题：
有的网友说，FF下有图片缓存的问题，要想动态设置图片的src，最好使用随机数的方法：
<img onclick= "this.src='a.gif?'+Math.random()" src="b.gif" alt="图片缺失"/>
经测试，FF下并么有发现有图片缓存问题(可能是没有触发)，按照上边加?号的写法图片也正常显示，先记录下来吧，或许将来用得到。
获得事件的前一个事件对象和后一个事件对象：（获取tagName为例）
Html代码：
<input id="txt"
onmouseover="goin(event)" onmouseout="goout(event)">
<span>aaaaaaaaaaaaaaaaa</span>
JS代码：
function goin(e){
var event = e||window.event;
var src = event.target || event.srcElement;
if(event.fromElement){
alert("IE from "+event.fromElement.tagName);
}else{
alert("FF from "+event.relatedTarget.tagName);
}
}
function goout(e){
var event = e||window.event;
var src = event.target || event.srcElement;
if(event.fromElement){
alert("IE TO "+event.toElement.tagName);
}else{
alert("FF to "+event.relatedTarget.tagName);
}
}
（一）IE Event对象的主要属性和方法
在IE中有一个专门负责事件处理的对象Event，这个对象负责对事件的处理，含有很多的属性和方法，通过这些方法和属性的调用，就能完成很多的事件处理。
type：事件的类型，就是HTML标签属性中，没有“on”前缀之后的字符串，例如“Click”就代表单击事件。
srcElement：事件源，就是发生事件的元素。
button：声明了被按下的鼠标键，是一个整数。1代表鼠标左键，2代表鼠标右键，4代表鼠标的中间键，如果按下了多个鼠标键，就把这些值加在一起，所以3就代表左右键同时按下。
clientX/clientY：是指事件发生的时候，鼠标的横、纵坐标，返回的是整数，它们的值是相对于包容窗口的左上角生成的。
offsetX/offsetY：鼠标指针相对于源元素的位置，可以确定单击Image对象的哪个象素。
altKey，ctrlKey，shiftKey：顾名思义，这些属性是指鼠标事件发生的时候，是否同时按住了Alt、Ctrl或者Shift键，返回的是一个布尔值。
keyCode：返回keydown和keyup事件发生的时候，按键的代码以及keypress事件的Unicode字符。
fromElement、toElement前者是指代mouseover事件移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素。
cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素。
returnValue：一个布尔值属性，设置为false的时候可以组织浏览器执行默认的事件动作，相当于<a href=”#” onclick=”ProcessMethod();return false;” />。
attachEvent()和detachEvent()方法：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素。
差别：12. body 对象
火狐的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
脚本延迟：
在<script>元素中设置defer属性（如下面的例子所示），实际上与上一节中介绍的把<script>元素放在页面最底部的效果是一样的。
<script type="text/javascript" defer="defer" src="example1.js"></script>
Noscript的使用：
浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下，浏览器不会呈现<noscript>中的内容。
<body>
<noscript>
<p>本页面需要浏览器支持（启用）JavaScript。
</noscript>
</body>
第二季：
2.IE中事件的起泡：IE中事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如，<div>标签包含了<a>，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行<a>标签的onclick事件处理函数，再执行<div>的事件处理函数。如果希望<a>的事件处理函数执行完毕之后，不希望执行上层的<div>的onclick的事件处理函数了，那么就把cancelBubble设置为false即可
<div onclick="alert('div')">
<a href="#" onclick="alert('A');event.cancelBubble=true;">abc</a>
</div>
以上代码只会弹出A,不会弹出div，因为
3.二级DOM标准中的Event
和IE不同的是，W3C DOM中的Event对象并不是window全局对象下面的属性，换句话说，event不是全局变量。通常在DOM二级标准中，event作为发生事件的文档对象的属性。Event含有两个子接口，分别是UIEvent和MutationEvent，这两个子接口实现了Event的所有方法和属性，而MouseEvent接口又是UIEvent的子接口，所以实现了UIEvent和Event的所有方法和属性。下面，我们就看看Event、UIEvent和MouseEvent的主要属性和方法。
1.Event
type：事件类型，和IE类似，但是没有“on”前缀，例如单击事件只是“click”。
target：发生事件的节点。
currentTarget：发生当前正在处理的事件的节点，可能是Target属性所指向的节点，也可能由于捕捉或者起泡，指向Target所指节点的父节点。
eventPhase：指定了事件传播的阶段。是一个数字。
timeStamp：事件发生的时间。
bubbles：指明该事件是否起泡。
cancelable：指明该事件是否可以用preventDefault()方法来取消默认的动作。
preventDefault()方法：取消事件的默认动作；
stopPropagation()方法：停止事件传播。
2.UIEvent
view：发生事件的window对象。
detail：提供事件的额外信息，对于单击事件、mousedown和mouseup事件都代表的是点击次数。
3.MouseEvent
button：一个数字，指明在mousedown、mouseup和单击事件中，鼠标键的状态，和IE中的button属性类似，但是数字代表的意义不一样，0代表左键，1代表中间键，2代表右键。
altKey、ctrlKey、shiftKey、metaKey：和IE相同，但是IE没有最后一个。
clientX、clientY：和IE的含义相同，但是在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上document.body.scrollLeft和document.body.scrollTop。
screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要。
relatedTarget：和IE中的fromElement、toElement类似，除了对于mouseover和mouseout有意义外，其他的事件没什么意义。
（三）兼容于两种主流浏览器的拖动DOM元素的例子
好了，刚才讲了这么多DOM编程和IE中的事件，那么如何编写兼容IE和Mozilla Firefox两种主流浏览器的拖拽程序呢？代码如下：
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event
//全局属性，否则就用DOM二级标准的Event对象。
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
学习3
获得浏览器的可用高度和宽度的兼容性写法：
var WHGeter={
getWidth : function(){
return document.body.clientWidth;
},
getHeight : function(){
return document.body.clientHeight;
}
};
var srcDom = e.target || e.srcElement;
alert(srcDom.tagName)
父级节点的兼容性写法：
Var paent = aDom.parentNode; //parentElement火狐不支持，chrome支持
事件委托的兼容性写法：例如
Document.body.onload = function(){doLoad();} (最好写这个)
或者：Document.body.onload = doLoad();(也可以实现)
但是不赞成：Document.body.onload = doLoad;因为FF和Chrome不支持
禁止用户选中文本的兼容性方法：FF使用css样式，IE使用JS
<div style="-moz-user-select:none;"
onselectstart="return false;">aaaaaaaaaaaaaaaaaaaaa</div>
FF下实现圆角效果：-moz-border-radius:4px;border:1px solid red;
取消body的滚动条的兼容性写法(使用样式)style="overflow:hidden;"
只有IE认识scroll="no"，FF和Chrome都不认识。
创建文本节点并插入
var dom = getDom("mydiv");
var node = document.createTextNode("Hello world");
dom.insertBefore(node,getDom("mytxt"));//将文本插入在容器中指定元素(mytxt)的前边
//dom.appendChild(node);//将文本插入容器的最后边。replaceChild
JS读取CSS样式主义的问题：
只有写在DOM元素的style中的属性才是可读的，通过css控制的样式JS并不能读出来。
div{color:red; }<div style=" height:100px;"></div>
其中，JS可读取的是height，var h = div.style.height;// h = 100
但是color读不到。Var color = div.style.color;// color = “”（空）
DOM元素的克隆cloneNode():
var dom = getDom("mytxt");
var newDom= dom.cloneNode();
getDom("mydiv").appendChild(newDom);
克隆的dom元素和原始的对象一摸一样，但是不是一个引用，而是一个新的引用。所以，var newDom = dom 和 var newDom = dom.cloneNode()完全不同,因为后者的指针已经变了。克隆后，id一样，不要忘记用 setAttribute(“id” , “ another_id “);改变新的节点的ID。
JS移除DOM元素：removeChild
var dom = getDom("mytxt");
dom.parentNode.removeChild(dom); 使用父节点parentNode进行删除
第四季：
判断一个DOM元素是否有子元素：
<div style="border:1px solid red;height:3000px;" id="mydiv">
aaaa<br/>
<div>
<input/>
<img>
</div>
<input/>
</div>
var dom = getDom("mydiv");
dom.hasChildNodes(); 或者dom.childNodes.length
获取某一个DIV中的node的兼容性写法：
var dom = getDom("mydiv");
var arr = dom.childNodes;
var counter = 0;
for(var i=0;i<arr.length;i++){
if("#text"!==arr[i].nodeName){
counter ++;
JSLogger.log(arr[i].nodeName)
}
}
JSLogger.log("counter = "+counter)
重要：DOM的直接包含的元素包括文字和标签和换行，而，文本，结尾标签和换行的nodeName都等于#text,所以要通过nodeName判断一下。
打印一个元素后边平级的所有有效的节点：(不算包含?)
var dom = getDom("mydiv2");
var next = dom.nextSibling; // previousSibling 上一个平级节点
while(next){
if("#text"!==next.nodeName){
//打印容器的nodeName
JSLogger.log(next. parentNode.nodeName) ;
}
next = next.nextSibling;
}
网页输入HTML代码的最简单的写法：
var dom = getDom("mydiv").cloneNode(true);//true表示克隆内容
var html = dom.innerHTML.replace(/</g,"<").replace(/>/g,">");//正则
JSLogger.log(dom);
去掉A标签点击后的虚线
<a href="#" hidefocus="true">点击后么有虚线</a>
<a href="#">点击后有虚线</a>
通过cloneNode方法添加新的Tr
<table>
<tbody id="mytbody">
<tr>
<td>111</td>
<td><input type="button"value="add" onclick="add(this)"></td>
</tr>
</tbody>
</table>
<script>
function add(tdObj){
var tbody = document.getElementById("mytbody");
//JSLogger.log(tdObj.parentElement.parentElement);//仅IE支持
//全兼容写法
var newTr = tdObj.parentNode.parentNode.cloneNode(true);
tdObj.parentNode.innerHTML="";
mytbody.appendChild(newTr);
}
</script
“===”（“！==”）在JavaScript 中称为恒等（非恒等）运算符，在该运算符下进行比较运算是不会自动进行类型转换，并且只有类型和值都相等的情况下才视为相等。
下面讲讲如何将其他类型转换成boolean 类型：(两次非)
逻辑与逻辑或，和 短路与短路或
function iftrue(){
JSLogger.log("iftrue")
return true;
}
function iffalse(){
JSLogger.log("iffalse");
return false;
}
if(iftrue() && iffalse()){
JSLogger.log("true");//iftrue,iffasle
}
if(iffalse() && iftrue()){
JSLogger.log("true");//iffasle
}
if(iffalse() || iftrue()){
JSLogger.log("true");//iffasle iftrue true
}
if(iftrue() || iffalse()){
JSLogger.log("true");//iftrue true
}
//总结：&&短路与，只要出现false，就不继续往下走了
// ||短路或，只要出现true，就不继续往下走了
// | and & 前后条件都会进行。
Callee和caller的使用
function fool1(v1,v2){
JSLogger.log("fool1");
fool2(v1);
}
function fool2(v1){
JSLogger.log("fool2");
fool3();
}
function fool3(){
var foo = arguments.callee;
while(foo && (foo!=window)){//避免死循环的关键
JSLogger.log("调用参数：");
var args = foo.arguments;
for(var i=0;i<args.length;i++){
JSLogger.log("args["+i+"] = "+args[i]);
}
foo = foo.caller;
}
}
fool1(1,2,3,4);
输出结果：
fool1
fool2
调用参数：
调用参数：
args[0] = 1
调用参数：
args[0] = 1
args[1] = 2
args[2] = 3
args[3] = 4
简化：
function fool1(){
JSLogger.log("fool1 ");
JSLogger.log(arguments[0]);
fool2();
}
function fool2(){
JSLogger.log("fool2 ");
var caller = arguments.callee.caller;
JSLogger.log(caller.arguments[0]);
}
fool1("Tom");
输出结果：
fool1
Tom
fool2
Tom
Call 和 apply的使用
function User(name){
this.Name = name;
}
function test(){
if(this==window){
JSLogger.log("window 调用");
}else{
JSLogger.log("this.Name = "+this.Name);
}
}
test();//window 调用
var u1 = new User("Tom");
var u2 = new User("Jack");
test.call(u1);// this.Name = Tom
test.apply(u2);// this.Name = Jack
<script language="javascript" defer="defer">
alert("up");//defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。
//虽然up在上边，但是设置了defer，所以会向下解析，等到文档全部解析结束之后再回回来再执行alert("up")
//所以，运行结果是先弹出 down,然后弹出up
</script>
<script type="text/javascript">
//兼容XHTML的写法
//<![CDATA[
alert("down")
//]]>
//保证让相同代码在XHTML中正常运行的第二个方法，就是用一个CData 片段来包含JavaScript代码。在XHTML（XML）中，CData 片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容。因此，在CData 片段中就可以使用任意字符--小于号当然也没有问题，而且不会导致语法错误。
//在兼容XHTML的浏览器中，这个方法可以解决问题。但实际上，还有不少浏览器不兼容XHTML，因而不支持CData 片段。怎么办呢？再使用JavaScript注释将CData标记注释掉就可以了：
</script>
var temp =[]
function test(){
var arr = ["a","b","c"]
for(var i=0;i<arr.length;i++){
var o={};
var v = arr[i];
o.say = function(str){
return function(){
JSLogger.log(str)
}
}(v);
temp.push(o);
}
}
test();
temp[0].say();
var v ="BBB";//全局变量
(function (v){
v ="AAAA";//毕包中重新赋值
alert(v);//AAAA
})(v);
alert(v);//BBBB 毕包中的操作不会影响包外