决战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>
View Code

 

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>
View Code

 

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>
View Code

 

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>
View Code

 

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>
View Code

 

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>
View Code

 

    希望大神不吝拍砖,有好方法,简单方法,希望提出来,我们共同学习,共同进步!

 

 

你可能感兴趣的:(js)