JAvascriptとcss互換性のまとめ
20450 ワード
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