<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);//onunload
addEvent(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 οnclick="generate();">generate</button>
<button οnclick="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" οnclick="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>