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

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

巴特西

决战JS（二）

最新文章

热门文章