<html><head><script type="text/javascript">/**W3C DOM•obj.addEventListener(evtype,fn,useCapture)——W3C提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，不带on前缀，fn是事件处理函数，如果useCapture是true，则事件处理函数在捕获阶段被执行，否则在冒泡阶段执行•obj.removeEventListener(evtype,fn,useCapture)——W3C提供的删除事件处理函数的方法微软IE方法•obj.attachEvent(evtype,fn)——IE提供的添加事件处理函数的方法。obj是要添加事件的对象，evtype是事件类型，带on前缀，fn是事件处理函数，IE不支持事件捕获•obj.detachEvent(evtype,fn,)——IE提供的删除事件处理函数的方法，evtype包含on前缀**/function addEvent(obj,evtype,fn,useCapture){if(obj.attachEvent){obj.attachEvent("on"+evtype,fn);//IE//alert("IE");}else{obj.addEventListener(evtype,fn,useCapture);//FF}} var _closeWin = function(){ document.getElementsByTagName("button")[0].disabled = false;}var _clickP = function(){var p = document.getElementsByTagName("p")[0];p.innerHTML = "Change";//p.style.backgroundImage = url(IMG_20130119_144221.jpg);}function generate(){var _code = document.getElementById("_code").value;var btn = document.getElementsByTagName("button")[0];btn.disabled = true;var mywin = window.open("","_blank",'width=500,height=400,left=200,top=200');mywin.document.write(_code);//alert(_code);addEvent(mywin,"unload",_closeWin,true);//onunloadaddEvent(document.getElementsByTagName("p")[0],"click",_clickP,true);//mywin.onunload = _closeWin;}function clearCodes(){var code = document.getElementById("_code");code.value = "";}//window.onload = generate;</script></head><body> <div id="_content"><textarea id = "_code" cols= "80" rows = "50">Code</textarea><button onclick="generate();">generate</button><button onclick="clearCodes();" >clear</button><p>OK!</p></div></body></html>
<html><head><style type="text/css"> p.ct{border-style: double;}span.ct{padding:2px;background-color:#EAEAEA;border-style:outset;border-color:#000000;cursor:pointer;//color:#EAEAEA;}</style></head><body><script type="text/javascript"> function test(){ var _d = document.getElementById("_d"); var len = _d.childNodes.length; //alert(len); var spanArr = []; for(var i = 0; i<len;i++){ if(_d.childNodes[i].nodeName=="SPAN"){ spanArr.push(_d.childNodes[i]); } }_d.insertBefore(spanArr[1],spanArr[0]); }</script> <p class = "ct">aaabbbbcccc</p><div id = "_d"><span id="g1" class = "ct" onclick="test();"> GO1 </span><span id="g2" class = "ct"> GO2 </span><span id="g3" class = "ct"> GO3 </span></div></body></html><html><head><style type="text/css">#d1{padding:40px;border: 4px solid #E9E8EB;background-color:#FFEE97;}#d2{position:relative;top:20px;left:30px;padding:40px;border: 4px solid #E9E8EB;background-color:#FFEE97;}#d3{padding:40px;border: 4px solid #E9E8EB;background-color:#FFEE97;}</style></head<body><br/><span id="d1"> D1</span ><span id="d2"> D2</span ><span id="d3"> D3</span ></body></html>
<!DOCTYPE HTML><html><head><style type="text/css">#customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; }#customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; }#customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; }.alt { color:#000000; background-color:#EAF2D3; }</style><script>(function(){ function addEvent(obj, evtype, fn, useCapture) { if (obj.attachEvent) { obj.attachEvent("on" + evtype, fn); //IE } else { obj.addEventListener(evtype, fn, useCapture); //FF } }function getEventObj(e) { var evl = e || window.event; var obj = evl.srcElement || evl.target; return obj; }var allObjs = [];function selectObj(e){var td = getEventObj(e);td.style.cursor = "text";if(allObjs.legth>0){allObjs = [];}else{allObjs.push(td);}}function selectTD(){for(var obj in allObjs){obj.className = "alt";}}function load(){var tdObjs = document.getElementsByTagName("td");for(var i = 0,len = tdObjs.length;i<len;i++){addEvent(tdObjs[i],'mouseover',selectObj,true);addEvent(tdObjs[i],'mouseup',selectTD,true);}}window.onload = load;})();</script></head><body><table id="customers"><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Apple</td><td>Steven Jobs</td><td>USA</td></tr><tr><td>Baidu</td><td>Li YanHong</td><td>China</td></tr><tr><td>Google</td><td>Larry Page</td><td>USA</td></tr><tr><td>Lenovo</td><td>Liu Chuanzhi</td><td>China</td></tr><tr><td>Microsoft</td><td>Bill Gates</td><td>USA</td></tr><tr><td>Nokia</td><td>Stephen Elop</td><td>Finland</td></tr></table></body></html>
