决战JS（二）
紧接着上次的《决战JS》，分析总结一些比较实用的DEMO与新手分享，望大神拍砖。
demo5.点击隐藏:
要实现这个功能只需要知道在onclick事件中加入对父节点的样式dislay设置为none就完全足够了。实现的效果是当用户点击“hide this”时，该链接的父节点的样式自动隐藏。对于网上的很多广告或通知之类的用这种实现，只需将ul,li换为div，然后再稍作修改，实现方法是比较轻松。
<html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function() { var aA=document.getElementsByTagName('a');//用getElementsTagName获取标签<a>,类型为数组 var oUl=document.getElementById('ul1'); for(var i=0;i<aA.length;i++) { aA[i].onclick=function(){//添加onclick事件 this.parentNode.style.display='none';//将父节点的样式display设置为none }; } }; </script> </head> <body> <ul id="ul1"> <li>aaaaaa <a href="javascript:;">hide this</a></li> <li>bbbbbb <a href="javascript:;">hide this</a></li> <li>cccccc <a href="javascript:;">hide this</a></li> <li>dddddd <a href="javascript:;">hide this</a></li> <li>eeeeee <a href="javascript:;">hide this</a></li> </ul> </body> </html>
demo6. 类分享模块:
实现这个DEMO最需要掌握的就是定时器的使用和js实现一些简单的运动。这里采取的定位方式是相对定位，详细的分析代码分析已经附在代码的末尾。然而，这两个运动函数由于只有部分的区别，完全可以将其合并为同一个函数，直接将速度定义，实现方法为：判断div1的左边（offsetLeft）是否大于目标坐标（最开始在样式表中设置的），如果大于，那么将速度设为-10，否则设为10，实现时需要更改函数的参数。这次更新《决战JS》 应博友要求加上注释，确实节约了阅读成本。再次感谢博友的意见。
<!DOCTYPE HTML> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title>share</title> <style> #div1 {width:150px;height:200px;background:red;position:absolute;left:-150px;} #div1 span{position:absolute;width:20px;height:60px;line-height:20px;background:blue;right:-20px;top:70px;} </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); //取元素div1 oDiv.onmouseover=function() //对div1加上onmouseover事件 {startmove();}; oDiv.onmouseout=function()//对div1加上onmouseout事件 {startmove2();}; }; var timer=null; function startmove(){ //实现鼠标在div上移动过程 var oDiv=document.getElementById('div1'); clearInterval(timer); //在实现之前需要关闭所有的定时器 timer=setInterval(function(){ if(oDiv.offsetLeft==0){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+10+'px';//在此设定的运动速度是10px } },30); } function startmove2(){//实现鼠标在div1上移出过程 var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ if(oDiv.offsetLeft==-150){//在style样式中定义的是-150px，隐藏起来 clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft-10+'px';//速度为负，向左运动 } },30); } </script> </head> <body> <div id="div1"> <p><a href="http://itred.cnblogs.com">ITRED的博客</a></p> <p><a href="http://itred.cnblogs.com">ITRED的博客</a></p> <p><a href="http://itred.cnblogs.com">ITRED的博客</a></p> <span>分享到</span> </div> </body> </html>
demo7 .删除元素：
实现这个和前面实现的隐藏类似。这里只是为了体现removeChild的用法。
其实现过程就只需要会一句话，即仅仅一条代码就可实现：oUl.removeChild(this.parentNode);关于实现过程的解析见代码后的注释。
<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title></title> </head> <script> window.onload=function(){ //load事件，取元素---->模板 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><a href="http://itred.cnblogs.com">前往itRed的博客</a><a href="javascript:;">删除</a></li> <li><a href="http://itred.cnblogs.com">itRed的博客</a><a href="javascript:;">删除</a></li> <li><a href="http://itred.cnblogs.com">前往itRed</a><a href="javascript:;">删除</a></li> <li><a href="http://itred.cnblogs.com">前往博客</a><a href="javascript:;">删除</a></li> <li><a href="http://itred.cnblogs.com">itRed</a><a href="javascript:;">删除</a></li> </ul> </body> </html>
demo8.创建元素：
本DEMO以创建ul中的li元素为例。简单分析关于创建li元素的过程和步骤。然后再来进行扩展。实现这个DEMO需要掌握两点知识，其一是应用document.createElement(‘ ’)语句来创建自己需要的元素标签，即在括号中需要填写自己想要实现的标签名称；其二是将创建好的元素放到应该放得位置，通过语句appendChil()实现。
<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title>创建元素</title> </head> <script> window.onload=function(){//模板，onload事件,然后获取需要的元素 var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function(){ var oLi=document.createElement('li'); //创建标签为li的元素 oUl.appendChild(oLi);//将创建好的标签元素添加到oUl中，使其能够在页面中显示出来 }; }; </script> <body> <input type="button" id="btn1" value="创建li元素"/> <ul id="ul1"> </ul> </body> </html>
demo9.类微博，博客等留言版：
知道如何创建元素之后，就是将该文本框放在相应位置，但用户进行留言，发帖时，就将该内容加到相应的位置上面。根据DEMO 8 可轻松实现本DEMO。
<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title></title> </head> <script> window.onload=function(){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function(){ var oLi=document.createElement('li');//加入标签元素---创建 oLi.innerHTML=oTxt.value; //将用户输入在文本框中的值添加到innerHTML中 oUl.appendChild(oLi);//在父级上添加子节点 }; }; </script> <body> <input type="text" id="txt1"/> <input type="button" id="btn1" value="创 建"> <ul id="ul1"> </ul> </body> </html>
demo10.对DEMO 9进行优化：
DEMO 9中虽然能够实现所需的效果，但是添加内容时，总是从下面开始添加，与我们实际在网站中看到的有一定的差距。因此，我们需要对此进行优化。思路其实很简单：当用户在添加内容时，我们只需要做一下判断，但用户第一个输入，好，那么就直接添加子节点就行；否则说明ul里面的li已经有了内容，我们可利用insertBefore在第0个元素之前插入。详细实现过程，见代码注释。
<html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title></title> </head> <script> window.onload=function(){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function(){ var oLi=document.createElement('li');//加入标签元素---创建 oLi.innerHTML=oTxt.value; //将用户输入在文本框中的值添加到innerHTML中 var aLi=oUl.getElementsByTagName('li'); //获取ul中的li，存放在数组aLi中 if(aLi.length>0){ //对li的个数进行判断 oUl.insertBefore(oLi,aLi[0]); //如果存在li,那么只需要运用insertBefore在前面插入新的内容 }else{ oUl.appendChild(oLi);//否则直接添加子节点 } }; }; </script> <body> <input type="text" id="txt1"/> <input type="button" id="btn1" value="创 建"> <ul id="ul1"> </ul> </body> </html>
希望大神不吝拍砖，有好方法，简单方法，希望提出来，我们共同学习，共同进步！
