zoukankan      html  css  js  c++  java
  • 封装getByClass(JS获取class的方法封装为一个函数)

    JS获取class的方法一:

    普通版:

    <script type="text/javascript">
    function getByClass(oParent, sClass)
    {
     var aEle=oParent.getElementsByTagName('*');
     var aResult=[];
     var i=0;
     
     for(i=0;i<aEle.length;i++)
     {
      if(aEle[i].className==sClass)
      {
       aResult.push(aEle[i]);
      }
     }
     
     return aResult;
    }

    </script>

    JS获取class的方法二:

    完美版:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    function getByClass(oParent, sClass)
    {
     var aEle=oParent.getElementsByTagName('*');
     var aResult=[];
     var re=new RegExp('\\b'+sClass+'\\b', 'i');
     var i=0;
     
     for(i=0;i<aEle.length;i++)
     {
      //if(aEle[i].className==sClass)
      //if(aEle[i].className.search(sClass)!=-1)
      if(re.test(aEle[i].className))
      {
       aResult.push(aEle[i]);
      }
     }
     
     return aResult;
    }

    window.onload=function ()
    {
     var oUl=document.getElementById('ul1');
     var aBox=getByClass(oUl, 'box');
     var i=0;
     
     for(i=0;i<aBox.length;i++)
     {
      aBox[i].style.background='red';
     }
    };
    </script>
    </head>

    <body>
    <ul id="ul1">
     <li></li>
     <li class="box active"></li>
     <li class="box"></li>
     <li></li>
     <li></li>
     <li class="box"></li>
    </ul>
    </body>
    </html>

  • 相关阅读:
    C++中析构函数为什么要是虚函数
    依赖注入(IOC)
    ParseInt()与NaN()
    仿windows关机效果
    类似Tab的效果
    飞来飞去的广告
    Sql Server 三种连接
    JS日期处理
    绚丽的注册效果
    JS图片自动切换
  • 原文地址:https://www.cnblogs.com/leejersey/p/2593723.html
Copyright © 2011-2022 走看看