1.事件onkeydown onkeyup 連等,可用oninput 事件當(dāng)輸入時(shí)(高級(jí)瀏覽器好用)
處理兼容:
onpropertychange(當(dāng)屬性改變的時(shí)候,兼容低版本ie),不適用于ie9,處理ie9使用變態(tài)方法:定時(shí)器。微博統(tǒng)計(jì)數(shù)字代碼展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oT=document.getElementById('t1');
var oSp=document.getElementById('sp1');
var timer=null;
if(window.navigator.userAgent.indexOf('MSIE 9.0')!=-1){
oT.onfocus=function(){
timer=setInterval(function(){
oSp.innerHTML=oT.value.length;
},100);
};
oT.onblur=function(){
clearInterval(timer);
};
}else{
oT.oninput=oT.onpropertychange=function(){
oSp.innerHTML=this.value.length;
document.title=this.value.length;
};
}
};
</script>
</head>
<body>
<input type="text" id="t1" value="" />
<span id="sp1">0</span>
</body>
</html>
2.DOM操作的增刪改查:
增:obj.appendChild(創(chuàng)建的元素);
刪:obj.removeChild(創(chuàng)建的元素);
改:obj.innerHTNL='';
查:obj.parentNode();結(jié)構(gòu)父級(jí)
obj.offsetParent();定位父級(jí)
示例:簡易留言板
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var oBtn=document.getElementById('btn');
var oT=document.getElementById('txt');
oBtn.onclick=function(){
//創(chuàng)建li
var oLi=document.createElement('li');
//li里添加內(nèi)容
oLi.innerHTML=''+oT.value+'<a href="javascript:;">刪除</a>';
//往ul添加
if(oUl.children.length){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
//清除value
oT.value='';
var oA=oLi.children[0];
oA.onclick=function(){
oUl.removeChild(oLi);
};
};
};
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="留言" id="btn"/>
<ul id="ul1">
<!--<li>1111<a href="javascript:;">刪除</a></li>-->
</ul>
</body>
</html>