Writeups

oUl = document.getElementById('ul1');
alert(oUl.childNodes.length); //在标准浏览器下弹出9；在IE6、7弹出4。因为标准浏览器下，文本元素（在这里是换行符）也包含在childNodes里面了。

for (var i=0; i<oUl.childNodes.length; i++){
    oUl.childNodes[i].style.background = 'red'; //在标准浏览器下会报错，因为文本元素（这里是换行符）没有是没有style属性的。
}

//可以通过下面这种方式来解决：

for (var i=0; i<oUl.childNodes.length; i++){
    if (oUl.childNodes[i].nodeType == 1) {
        oUl.childNodes[i].style.background = 'red';
    }
}

for (var i=0; i<oUl.children.length; i++){
    oUl.children[i].style.background = 'red';
    }

oUl = document.getElementById('ul1');
alert(oUl.nodeType); // 弹出1
alert(oUl.childNodes[0].nodeType); //弹出3
alert(oUl.attributes[0].nodeType); //弹出2
alert(oUl.attributes[0].name); //弹出'id'
alert(oUl.attributes.length); //弹出2
alert(oUl.attributes[0].value); //弹出'ul1'

if (oUl.firstElementChild){
    oUl.firstElementChild.style.background = 'red';
} else {
    oUl.firstChild.style.background = 'red';
}

//更为简洁的写法：

var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';

var oUl = document.getElementById('ul1');
var oFirst = oUl.firstElementChild || oUl.firstChild; 
if(oFirst){
    oFirst.style.background = 'red';
} else {
    alert('没有子节点可以设置');
}

oUl.children[0].style.background = 'red';

var oA = document.getElementsByTag('a');
for (var i=0; i<oA.length; i++){
    oA[i].onclick = function(){
        this.parentNode.style.display = 'none';
    }
}

var oDiv3 = document.getElementById('div3');
alert(oDiv3.parentNode.id); //弹出div2
alert(oDiv3.offsetParent.id); //弹出body1

//通过以下方法可以获得一个元素到达页面的绝对距离，通过各级元素与其offsetParent之间的距离累加的方式得到。

var iTop = 0;
var obj = oDiv3;

while(obj){
    iTop += obj.offsetTop;
    obj = obj.offsetParent;
}

function getPos(obj){
    var pos = {left: 0, top: 0};
    while(obj){
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return pos;
}

var oText = document.getElementById('text1');
	var oBtn = document.getElementById('btn');
	var oUl = document.getElementById('ul1');
	
	oBtn.onclick = function() {
		
	    var oLi = document.createElement('li');
		oLi.innerHTML = oText.value;
		
		if ( oUl.children[0] ) {
			oUl.insertBefore( oLi, oUl.children[0] );
		} else {
			oUl.appendChild( oLi );
		}
		
		var oA = document.createElement('a');
		oA.innerHTML = '删除';
		oA.href = 'javascript:;';
		oLi.appendChild( oA );
		
		oA.onclick = function() {
		    oUl.removeChild( this.parentNode );
		}
	}

function getElementsByClassName (parent, tagName, className){
    var aEls = parent.getElementsByTagName(tagName);
    var arr = [];
    
    for(var i=0; i<aEls.length; i++){
        /* 以下注释中的这种方法对于拥有多个class的元素不适用
        if(aEls[i].className == className){
            arr.push(aEls[i]);
        }
        */
        var aClassName = aEls[i].className.split(' ');
        
        for(var j=0; j<aClassName.length; j++){
            if(aClassName[j] == className){
                arr.push(aEls[i]);
                break; //当在某一个元素中找到了对应class马上就进行下一个循环，避免一个元素拥有多个重复class的时候，在数组中添加多次
            }
        }
    }
    
    return arr;
}

function addClass(obj, className){
    if(obj.className == ''){
        obj.className = className;
    } else {
        var arrClassName = obj.className.split(' ');
        var _index ＝ arrIndexOf(arrClassName, className);
        if(_index == -1){
           obj.className += ' ' + className; 
        }
    }
}

function removeClass(obj, className){
    if(obj.className != ''){
        var arrClassName = obj.className.split(' ');
        var _index ＝ arrIndexOf(arrClassName, className);
        if(_index != -1){
            arrClassName.splice(_index, 1);
            obj.className = arrClassName.join(' ');
        }
    }
}

function arrIndexOf(arr, v){
    for(var i=0; i<arr.length; i++){
        if(arr[i] == v){
            return i;
        }
    }
    return -1;
}

    var oTab = document.getElementById('tab1');
    alert(oTab.children[1].children[1].innerHTML); //什么也弹不出来，提示显示oTab.children[1]未定义，这是因为如果在table中没有添加tbody的话，浏览器会自动隐形添加一个tbody出来。因此，写表格结构时，最好添加上tbody。

    var oTab = document.getElementById('tab1');
    // alert(oTab.children[0].children[1].children[1].innerHTML); //这是就可以弹出“小美”
    alert(oTab.tBodies[0].rows[1].cells[1].innerHTML); //弹出小美，更为直观

var data = [
    {id: 1, username: 'leo', sex: '男'},
    {id: 2, username: '小美', sex: '女'},
    {id: 3, username: '王亮', sex: '男'},
    {id: 4, username: '杜鹏', sex: '男'},
];

var oTab = document.getElementById('tab1');
var oTbody = oTab.tBodies[0];

for(var i=0; i<data.length; i++){ //表格的创建
    var oTr = document.createElement('tr');
    
    if(i%2 == 0){ //各行变色
        oTr.style.background = 'white';
    } else {
        oTr.style.background = 'gray';
    }
    
    var oTd = document.createElement('td');
    oTd.innerHTML = data[i].id;
    oTr.appendChild(oTd);
    
    oTd = document.createElement('td');
    oTd.innerHTML = data[i].username;
    oTr.appendChild(oTd);
    
    oTd = document.createElement('td');
    oTd.innerHTML = data[i].sex;
    oTr.appendChild(oTd);
    
    oTd = document.createElement('td');
    // oTd.innerHTML = '&nbsp;'; //如果单元格中的内容为空，那么在IE7及以下，这个td不会被创建，为了好看，给最后一列td里面添加一个空格，这样在IE7下，最后一列td也会被创建
    oTr.appendChild(oTd);
    
    var oA = document.createElement('a');
    oA.innerHTML = '删除';
    oA.href = 'javascript:;';
    oA.onclick = function(){
        oTbody.removeChild(this.parentNode.parentNode);
        
        for(var i=0; i<oTbody.rows.length; i++){
            if(i%2 == 0) {
                oTbody.rows[i].style.background = 'white';
            } else {
                oTbody.rows[i].style.background = 'gray';
            }
        }
    }
    oTd.appendChild(oA);
    
    oTbody.appendChild(oTr);
}

var oForm = document.getElementById('form1');
oForm.text1.onchange = function(){
    alert(this.value); //注意，文本输入框onchange的触发，是在输入完毕之后，鼠标离开该文本框之后触发
}

oForm.sex[0].onchange = function(){
    // alert(1); 
    // alert(this.value);
} //注意：oForm.sex其实是一个元素集合，因为name为sex的单选按钮有两个

oForm.a[0].onchange = function(){
    alert(2);
}

// alert(oForm.city.value);
oForm.city.onchange = function(){
    alert(this.value);
}

oForm.btn.onclick = function(){
    
    //radio, checkbox 判断当前的选项是否被选中
    //alert(oForm.sex[0].checked);
    
    for(var i=0; i<oFrom.sex.length; i++){
        if(oForm.sex[i].checked){
            alert(oForm.sex[i].value + '被选中了');
        } else {
            alert(oForm.sex[i].value + '未被选中');
        }
    }
    
    for(var i=0; i<oFrom.a.length; i++){
        if(oForm.a[i].checked){
            alert(oForm.a[i].value + '被选中了');
        } else {
            alert(oForm.a[i].value + '未被选中');
        }
    }
}

    oForm.onsubmit = function(){
        if(this.text1.value == ''){
            alert('请输入内容');
            return false; //如果没有在文本框中填写任何内容，就写return false，那么点击“提交”按钮，也不会提交到http://www.baidu.com上
        }
    }
    
    /* 让页面等待一秒钟后自动提交
    setTimeout(function(){
        oForm.submit();
    }, 1000) 
    */

oForm.reset = function(){
    var re = confirm('你确定要重置吗？');
    /*
    if(re){
        return true;
    } else {
        return false;
    }
    */
    //上面的代码简写如下：
    return re;
    
    //以上所有代码可以简写为：return confirm('您确定要重置吗？');
}

var aInput = document.getElementsByTagName('input');
var opener = null;

aInput[0].onclick = function(){
    // window.open(); 打开新空白页面
    // window.open('http://www.baidu.com'); 在新窗口打开百度页面
    // window.open('http://www.baidu.com', '_self'); 在本窗口打开百度页面
    
    opener = window.open();
    opener.document.body.style.background = 'red';
}

aInput[1].onclick = function(){
    window.close(); //不同浏览器处理的方式不同，有兼容性问题
}

aInput[2].onclick = function(){
    opener.close(); 
}

if(window.navigator.userAgent.indexOf('MSIE') != -1){ //如果浏览器信息中有MSIE这几个字就代表是IE
    alert('我是ie');
} else {
    alert('我不是ie');
}

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

var i=0;
window.onscroll = function(){
    document.title = i++;
}

var i=0;
window.onresize = function(){
    document.title = i++;
}

var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');

//onfocus：当元素获取到焦点的时候触发
oText.onfocus = function(){
    if(value='请输入内容'){
        this.value = '';
    }
}

//onblur：当元素失去焦点的时候触发
oText.onblur = function(){
    if(this.value == ''){
        this.value = '请输入内容';
    }
}

oText.focus();

oBtn.onclick = function(){
    oText.select();
}

function fn1(){
    alert(event);
}

fn1(); //不是事件调用的函数，因此这时候event没有内容，显示undefined
document.onclick = fn1; //fn1是事件调用的函数，所以event有内容 这种写法在ff下是弹不出东西的

function fn1(ev){
    alert(ev);
}
document.onclick = fn1; //在火狐、标准ie下、chrome下都可以弹出事件对象（非标准ie会弹出undefined）

function fn1(ev) {
    var ev = ev || event;
    alert(ev);
    
    for(var attr in ev){
        console.log(attr + ' = ' + ev[attr]);
    }
}
document.onclick = fn1; //在标准浏览器和非标准浏览器下，都能够正确弹出事件对象

function fn1(ev) {
    var ev = ev || event;
    alert(ev.clientX);
}
document.onclick = fn1; //弹出当前鼠标到可视区左边的距离

    //onmousemove；当鼠标在一个元素上移动的时候触发
    //触发频率不是以像素记，而是间隔时间。在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次
    var oDiv = document.getElementById('div1');
    document.onmousemove = function(){
        var ev = ev || event;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        oDiv.style.left = ev.clientX + 'px';
        oDiv.style.top = scrollTop + ev.clientY + 'px';
    }

var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');

oBtn.onclick = function(ev){
    var ev = ev || event;
    ev.cancelBubble = true; //阻止当前对象的当前事件的冒泡
    oDiv.style.display = 'block';
}
document.onclick = function(){
    /*
    setTimeout(function(){
        oDiv.style.display = 'none';
    }, 1000);
    */
    oDiv.style.display = 'none';
}

var oDiv = document.getElementByid('div1');
oDiv.onmouseover = function(){
    this.style.left = '0px';
}
oDiv.onmouseout = function(){
    this.style.left = '-100px';
}

function fn1(){alert(1);}
function fn2(){alert(2);}
document.onclick = fn1;
document.onclick = fn2; //会覆盖前面绑定的fn1

function fn1(){
    alert(this);
}

//fn1(); //window
fn1.call(); //调用函数 也就是说：fn1() 可视为等同于 fn1.call() 弹出window
fn1.call(1) //弹出1，因为在fn1里面的this变成了1。

function fn1(a + b){
    alert(this);
    alert(a + b);
}
fn1.call(1, 20, 30); //先弹出1，然后弹出50
fn1.call(null, 10, 20); //先弹出window对象，然后弹出30

function bind(obj, evname, fn){
    if(obj.addEventListener){
        obj.addEventListener(evname, fn, false);
    } else {
        obj.attachEvent('on' + evname, function(){
            fn.call(obj);
        })
    }
}

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');

function fn1(){
	alert(this);
}

//通过将addEventListener的第三个参数设置为true，来设置事件捕获
oDiv1.addEventListener('click', fn1, true); //上面这一句告诉oDiv1：如果有一个进去的事件触发了你，你就去执行fn1这个函数
oDiv2.addEventListener('click', fn1, true);
oDiv3.addEventListener('click', fn1, true);

oDiv1.addEventListener('click', function(){
	alert(1);
}, false)
oDiv1.addEventListener('click', function(){
	alert(3);
}, true)
oDiv1.addEventListener('click', function(){
	alert(2);
}, false)
//弹出顺序是：3 -> 2 -> 1

function fn1(){alert(1);}
function fn2(){alert(2);}

document.onclick = fn1;
document.onclick = null; //通过赋值的形式取消了原来的事件绑定函数fn1

document.onkeydown = function(ev){
	var ev = ev || event;
	alert(ev.keyCode);
}

document.onclick = function(ev){
	var ev = ev || event;
	alert(ev.ctrlKey); //当按下ctrl点击的时候，弹出true；没有按ctrl点击的时候，返回false
}

var oText = document.getElementById('text1');
var oUl = document.getElementById('ul1');

/*
oText.onkeydown = function(){
	alert(this.value); //这里会发现，onkeydown的事件触发是在给oText赋值之前，所以这里应该改为onkeyup才行
}
*/

oText.onkeyup = function(ev){
	
	var ev = ev || event;

	if(this.value != ''){

		if(ev.keyCode == 13 && ev.ctrlKey){ //如果同时按住ctrl + 回车 

			var oLi = document.createElement('li');
			oLi.innerHTML = this.value;

			if(oUl.children[0]){
				oUl.insertBefore(oLi, oUl.children[0]);
			} else {
				oUl.appendChild(oLi);
			}

		}
			
	}
}

var oDiv = document.getElementById('div1');

document.onkeydown = function(ev){
	var ev = ev || event;

	switch(ev.keyCode){
		case 37:
			oDiv.style.left = oDiv.offsetLeft - 10 + 'px;'
			break;
		case 38:
			oDiv.style.top = oDiv.offsetTop - 10 + 'px;'
			break;
		case 39:
			oDiv.style.left = oDiv.offsetLeft + 10 + 'px;'
			break;
		case 40:
			oDiv.style.top = oDiv.offsetTop + 10 + 'px;'
			break;
	}
}

document.onkeydown = function(){
	return false; //这样就阻止了点击空格，滚动条向下滚动的默认事件
}
document.oncontextmenu = function(){
	//alert(1);
	return false; //阻止了点击右键，弹出右键菜单的默认行为
}

var oDiv = document.ElementById('div1');

document.oncontextmenu = function(ev){
	var ev = ev || event;
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
	
	oDiv.style.display = 'block';
	
	oDiv.style.left = scrollLeft + ev.clientX + 'px';
	oDiv.style.top = scrollTop + ev.clientY + 'px';

	return false;
}

document.onclick = function(){
    oDiv.style.display = 'none';
}

var oDiv = document.getElementById('div1');

oDiv.onmousedown = function(ev){
    var ev = ev || event;
    var disX = ev.clientX - this.offsetLeft;
    var disY = ev.clientY - this.offsetTop;
    
    document.onmousemove = function(ev){
        var ev = ev || event;
        
        oDiv.style.left = ev.clientX - disX + 'px';
        oDiv.style.top = ev.clientY - disY + 'px';
        
    }
    
    document.onmouseup = function(){
        document.onmousemove = document.onmouseup = null;
    }
}

var aInput = document.getElementsByTagName('input');

aInput[0].setCapture(); //设置全局捕获
aInput[0].onclick = function(){
    alert(1);
}
aInput[0].onclick = function(){
    alert(2);
}

var oDiv = document.getElementById('div1');

oDiv.onmousedown = function(ev){
    var ev = ev || event;
    var disX = ev.clientX - this.offsetLeft;
    var disY = ev.clientY - this.offsetTop;
    
    if(oDiv.setCapture){ //如果浏览器有setCapture这个方法的话
        oDiv.setCapture();//让oDiv将所有后续事件都捕获到自己身上来
    }
    
    document.onmousemove = function(ev){
        var ev = ev || event;
        
        oDiv.style.left = ev.clientX - disX + 'px';
        oDiv.style.top = ev.clientY - disY + 'px';
        
    }
    
    document.onmouseup = function(){
        document.onmousemove = document.onmouseup = null;
        
        //释放全局捕获
        if(oDiv.releaseCapture){
            oDiv.releaseCapture();
        }
    }
    
    return false; //阻止浏览器的默认行为
}

function drag(obj){
    obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;
        
        if(obj.setCapture){
            obj.setCapture();
        }
        
        document.onmousemove = function(ev){
            var ev = ev || event;
            
            obj.style.left = ev.clientX - disX + 'px';
            obj.style.top = ev.clientY - disY + 'px';
            
        }
        
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
            
            if(obj.releaseCapture){
                obj.releaseCapture();
            }
        }
        
        return false;
    }   
}

function drag(obj){
    obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;
        
        if(obj.setCapture){
            obj.setCapture();
        }
        
        document.onmousemove = function(ev){
            var ev = ev || event;
            var L = ev.clientX - disX;
            var T = ev.clientY - disY;
            
            // 限制拖拽范围在页面内
            if(L < 0){
                L = 0;
            } else if( L > document.documentElement.clientWidth - obj.offsetWidth){
                L = document.documentElement.clientWidth - obj.offsetWidth;
            }
            if(T < 0){
                T = 0;
            } else if(T > document.documentElement.clientHeight - obj.offsetHeight){
                T = document.documentElement.clientHeight - obj.offsetHeight;
            }
            
            obj.style.left = L + 'px';
            obj.style.top = T  + 'px';
            
        }
        
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
            
            if(obj.releaseCapture){
                obj.releaseCapture();
            }
        }
        
        return false;
    }   
}

function drag(obj){
    obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;
        
        if(obj.setCapture){
            obj.setCapture();
        }
        
        document.onmousemove = function(ev){
            var ev = ev || event;
            var L = ev.clientX - disX;
            var T = ev.clientY - disY;
            
            // 限制拖拽范围在页面内
            if(L < 100){ //只要把原来的0改为一个范围，例如：100，就实现了磁性吸附的效果
                L = 0;
            } else if( L > document.documentElement.clientWidth - obj.offsetWidth){
                L = document.documentElement.clientWidth - obj.offsetWidth;
            }
            if(T < 100){
                T = 0;
            } else if(T > document.documentElement.clientHeight - obj.offsetHeight){
                T = document.documentElement.clientHeight - obj.offsetHeight;
            }
            
            obj.style.left = L + 'px';
            obj.style.top = T  + 'px';
            
        }
        
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
            
            if(obj.releaseCapture){
                obj.releaseCapture();
            }
        }
        
        return false;
    }   
}

function drag(obj){
    obj.onmousedown = function(ev){
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;
        
        if(obj.setCapture){
            obj.setCapture();
        }
        
        document.onmousemove = function(ev){
            var ev = ev || event;
            var L = ev.clientX - disX;
            var T = ev.clientY - disY;
            
            //被拖动的元素的四条边
            var L1 = L;
            var R1 = L + obj.offsetWidth;
            var T1 = T;
            var B1 = T + obj.offsetHeight;
            
            //被碰撞的元素的四条边(这个例子里面是img元素)
            var L2 = oImg.offsetLeft;
            var R2 = L2 + oImg.offsetWidth;
            var T2 = oImg.offsetTop;
            var B2 = T2 + oImg.offsetHeight;
            
            if(R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2){
                oImg.src = '1.jpg';
            } else {
                oImg.src = '2.jpg';
            }
            
            obj.style.left = L + 'px';
            obj.style.top = T  + 'px';
            
        }
        
        document.onmouseup = function(){
            document.onmousemove = document.onmouseup = null;
            
            if(obj.releaseCapture){
                obj.releaseCapture();
            }
        }
        
        return false;
    }   
}

var oDiv = document.getElementById('div1');

oDiv.onmousedown = function(ev){
    var ev = ev || event;
    var disW = this.offsetWidth;
    var disX = ev.clientX;
    var disL = this.offsetLeft;
    var b = '';
    
    if(disX > disL + disW - 10){
        b = 'right';
    }
    if(disX < disL + 10){
        b = 'left';
    }
    
    document.onmousemove = function(ev){
        var ev = ev || event;
        switch(b){
            case 'left':
                oDiv.style.width = disW - (ev.clientX - disX) + 'px';
                oDiv.style.left = disL + (ev.clientX - disX) + 'px';
                break;
            case 'right':
                oDiv.style.width = disW + (ev.clientX - disX) + 'px';
                break
        }
    }
    document.onmouseup = function(){
        document.onmousemove = document.onmouseup = null;
    }
    return false;
}

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;

oDiv2.onmousedown = function(ev){
    var ev = ev || event;
    var disY = ev.clientY - this.offsetTop;
    
    document.onmousemove = function(ev){
        var ev = ev || event;
        var T = ev.clientY - disY;
        
        if(T < 0){
            T = 0;
        } else if(T > iMaxTop){
            T = iMaxTop;
        }
        oDiv2.style.top = T + 'px';
        
        var iScale = T / iMaxTop;
        oDiv3.style.height = 500 * iScale + 'px';
    }
    document.onmouseup = function(){
        document.onmousemove = document.onmouseup = null;
    }
    
    return false;
}

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');
var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;

oDiv2.onmousedown = function(ev){
    var ev = ev || event;
    var disY = ev.clientY - this.offsetTop;
    
    document.onmousemove = function(ev){
        var ev = ev || event;
        var T = ev.clientY - disY;
        
        if(T < 0){
            T = 0;
        } else if(T > iMaxTop){
            T = iMaxTop;
        }
        oDiv2.style.top = T + 'px';
        
        var iScale = T / iMaxTop;
        oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px';
    }
    document.onmouseup = function(){
        document.onmousemove = document.onmouseup = null;
    }
    
    return false;
}

var oDiv = document.getElementById('div1');

oDiv.onmousewheel = fn;

if(oDiv.addEventListener){
    oDiv.addEventListener('DOMMouseScroll', fn, false);
}

function fn(ev){
    var ev = ev || event;
    
    var b = true;
    if(ev.wheelDelta){
        b = ev.wheelDelta > 0 ? true : false;
    } else {
        b = ev.wheelDelta > 0 ? false : true;
    }
    
    if(b){
        this.style.height = this.offsetHeight - 10 + 'px';
    } else {
        this.style.height = this.offsetHeight + 10 + 'px';
    }
    
    if(ev.preventDefault){
        ev.preventDefault();
    }
    
    return false;
}

//document.cookie = '名字=值;expires=' + 字符串格式的时间;
var oDate = new Date();
oDate.setDate( oDate.getDate() + 5 ); //5天以后
//oDate.toGMTString(); //将日期对象转换为字符串格式

//内容最好编码存放，encodeURI
//alert(encodeURI('你好'));
//alert(decodeURI('%E4%BD%A0%E5%A5%BD'));

document.cookie = 'username =' + encodeURI('leo\n你好') + ' leo;expires=' + oDate.toGMTString();
document.cookie = 'age = 32';
alert(decodeURI(document.cookie));

function getCookie(key){
    var arr1 = document.cookie.split('; ');
    for(var i=; i<arr1.length; i++){
        var arr2 = arr1[i].split('=');
        if(arr2[0] == key){
            return decodeURI(arr2[1]);
        }
    }
}

alert(getCookie('age'));

function setCookie(key, value, t){
    var oDate = new Date();
    oDate.setDate( oDate.getDate() + t );
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}

setCookie('sex', '男', 10);

function removeCookie(key){
    setCookie(key, '', -1);
}

removeCookie('username');

var oUsername = document.getElementById('username');
var oLogin = document.getElementById('login');
var oDel = document.getElementById('del');

if(getCookie('username')）{
    oUsername.value = getCookie('username');
}

oLogin.onclick = function(){
    alert('登陆网站成功');
    setCookie('username', oUsername.value, 5);
}

oDel.onclick = function(){
    removeCookie('username');
    oUsername.value = '';
}

function getCookie(key){
    var arr1 = document.cookie.split('; ');
    for(var i=; i<arr1.length; i++){
        var arr2 = arr1[i].split('=');
        if(arr2[0] == key){
            return decodeURI(arr2[1]);
        }
    }
}

function setCookie(key, value, t){
    var oDate = new Date();
    oDate.setDate( oDate.getDate() + t );
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}

function removeCookie(key){
    setCookie(key, '', -1);
}