1.子节点childNodes：
<!DOCTYPE html> <html> <head> <title>childNodes</title> </head> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById('ul1'); //alert(oUl.childNodes.length); for(var i=0;i<oUl.childNodes.length;i++){ /*if(oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background='red'; }*/ oUl.children[i].style.background='red'; } } </script> <body> <ul id="ul1"> <li></li> <li></li> <li></li> </ul> </body> </html>
2.父节点parentNodes
<!DOCTYPE html> <html> <head> <title>ParentNpdes</title> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById('ul1'); var aA=document.getElementsByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onclick=function(){ this.parentNode.style.display='none';
//设置a的父节点li为隐藏 } } } </script> </head> <body> <ul id="ul1"> <li>gfhfhghgh<a href="javascript:;">hide</a></li> <li>hhhh<a href="javascript:;">hide</a></li> <li>hhbb<a href="javascript:;">hide</a></li> <li>erere<a href="javascript:;">hide</a></li> <li>gggg<a href="javascript:;">hide</a></li> </ul> </body>
3.className
<!DOCTYPE html> <html> <head> <title>className</title> </head> <script type="text/javascript"> function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*');//all elements var aResult=[];//save the find elements for(var i=0;i<aEle.length;i++){ if(aEle[i].className==sClass){ aResult.push(aEle[i]); } } return aResult; } window.onload=function(){ var oUl=document.getElementById('ul1'); var aOn=getByClass(oUl,'on'); for(var i=0;i<aOn.length;i++){ aOn[i].style.background='yellow'; } } </script> <body> <ul id="ul1"> <li></li> <li class="on"></li> <li></li> <li class="on"></li> <li></li> </ul> </body> </html>
4.removeChild方法
<!DOCTYPE html> <html> <head> <title>removeChild</title> </head> <script type="text/javascript"> window.onload=function(){ var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); for(var i=0;i<aA.length;i++){ aA[i].onclick=function(){ oUl.removeChild(this.parentNode); } } } </script> <body> <ul id="ul1"> <li>ssss <a href="javascript:;">remove</a></li> <li>tryyy <a href="javascript:;">remove</a></li> <li>kkkk <a href="javascript:;">remove</a></li> <li>ggg <a href="javascript:;">remove</a></li> <li>hjjhk <a href="javascript:;">remove</a></li> </ul> </body> </html>
5.使用函数，便于获取css样式
<!DOCTYPE html> <html> <head> <title>css function</title> <style type="text/css"> #div1{width:200px;height: 200px;background: red;} </style> <script type="text/javascript"> //获取哪个，哪个样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function css(obj,attr,value){ if(arguments.length==2){ return getStyle(obj,attr); }else if(arguments.length==3){ obj.style[attr]=value; } } window.onload=function(){ var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div1'); oBtn.onclick=function(){ css(oDiv,'background','green'); alert(css(oDiv,'width')); } } </script> </head> <body> <input type="button" id="btn" value="type"> <div id="div1"></div> </body> </html>
6.创建DOM元素
<!DOCTYPE html> <html> <head> <title>create Dom elements</title> </head> <script type="text/javascript"> window.onload=function(){ var OBtn=document.getElementById('btn'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); OBtn.onclick=function(){ var oLi=document.createElement('li'); //oUl.appendChild(oLi);创建li元素 var aLi=oUl.getElementsByTagName('li');//获取所有的li元素 oLi.innerHTML=oTxt.value;//写入文字 if(aLi.length==0){ oUl.appendChild(oLi);//如果ali的长度为0，则新添加一个li元素 }else{ oUl.insertBefore(oLi,aLi[0]);//如果不为0，则在li前面添加新的li元素
} } } </script> <body> <input type="text" id="txt1"> <input id="btn" type="button" value="createli"> <ul id="ul1"></ul> </body> </html>
7.JS的json运用
<!DOCTYPE html> <html> <head> <title>json</title> </head> <script type="text/javascript"> var obj={a:5,b:6,c:'abc',d:[1,2,3,4]}; //var arr=[{a:5,b:12},{a:6,b:19}]; //alert(obj.d[0]); //alert(arr[1].b); var attr=''; for(attr in obj){ alert(attr+'='+obj[attr]); } </script> <body> </body> </html>
如果是Json只能用 for...... in;如果是array可以用for循环和for...in，一般array用for循环
8.JS操作键盘，keycode
1.运用数字所在的键盘值，来设置输入值只为数字
<!DOCTYPE html> <html> <head> <title>Only Input Number</title> </head> <script type="text/javascript"> window.onload=function(){ var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function(ev){ var oEvent=ev||event; //alert(oEvent.keyCode); //0---48 9----57 small keyboard 0---96 9----105 if (oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)&&(oEvent.keyCode<96||oEvent.keyCode>105)) { return false; } }; }; </script> <body> <input type="text" id="txt1"> </body> </html>
2.利用键盘上的上下左右键控制物体的运动
<!DOCTYPE html> <html> <head> <title>keycode-div</title> <style type="text/css"> #div1{width:100px;height: 100px;background: #ccc;position: absolute;} </style> <script type="text/javascript"> document.onkeydown=function(ev){ var oEvent=ev||event; var oDiv=document.getElementById('div1'); //alert(oEvent.keyCode); //← 37→ 39 ↓ 40 ↑38 if(oEvent.keyCode==37){ oDiv.style.left=oDiv.offsetLeft-10+'px'; }else if(oEvent.keyCode==39){ oDiv.style.left=oDiv.offsetLeft+10+'px'; }else if(oEvent.keyCode==38){ oDiv.style.top=oDiv.offsetTop-10+'px'; }else if(oEvent.keyCode==40){ oDiv.style.top=oDiv.offsetTop+10+'px'; } } </script> </head> <body> <div id="div1"></div> </body> </html>
3.使用KeyCode控制输入的值只能是数字
<!DOCTYPE html> <html> <head> <title>Only Input Number</title> </head> <script type="text/javascript"> window.onload=function(){ var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function(ev){ var oEvent=ev||event; //alert(oEvent.keyCode); //0---48 9----57 small keyboard 0---96 9----105 if (oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)&&(oEvent.keyCode<96||oEvent.keyCode>105)) { return false; } }; }; </script> <body> <input type="text" id="txt1"> </body> </html>
5.使用keycode的ctrl+enter提交留言
<!DOCTYPE html> <html> <head> <title>ctrl+enter submit the messages </title> </head> <script type="text/javascript"> window.onload=function(){ var oBtn=document.getElementById('btn'); var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); oBtn.onclick=function(){ oTxt1.value+=oTxt2.value+' '; oTxt2.value=''; }; oTxt2.onkeydown=function(ev){ var oEvent=ev||event; if(oEvent.ctrlKey&&oEvent.keyCode==13){ oTxt1.value+=oTxt2.value+' '; oTxt2.value=''; } } } </script> <body> <textarea id="txt1" rows="10" cols="40"></textarea><br/> <input type="text" id="txt2"> <input id="btn" type="button" value="Note"> </body> </html>
9.利用window的scrollTop去判断物体所在的位置和弹出自定义的右键菜单
<!DOCTYPE html> <html> <head> <title>siderbarAd</title> <style type="text/css"> #div1{width:100px;height:100px;position: absolute;right: 0;background: red;} </style> <script type="text/javascript"> window.onresize=window.onload=window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2; oDiv.style.top=scrollTop+t+'px'; } </script> </head> <body style="height: 2000px;"> <div id="div1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>弹出自定义的右键菜单</title> <style type="text/css"> *{margin:0;padding: 0;} #ul1{width: 100px;background: #ccc;border:1px solid black;position: absolute;display: none;} </style> <script type="text/javascript"> document.oncontextmenu=function(ev){ var oEvent=ev||event; var oUl=document.getElementById('ul1'); var scrollTop=document.documentElementscrollTop||document.body.scrollTop; var scrollLeft=document.documentElementscrollLeft||document.body.scrollLeft; oUl.style.display="block"; oUl.style.left=oEvent.clientX+scrollLeft+'px'; oUl.style.top=oEvent.clientY+scrollTop+'px'; return false; }; document.onclick=function(){ var oUl=document.getElementById('ul1'); oUl.style.display='none'; }; </script> </head> <body> <ul id="ul1"> <li>Login</li> <li>Back to home</li> <li>Logout</li> <li>add in VIP</li> <li>cancel</li> </ul> </body> </html>