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>

  • 相关阅读:
    Vue 02
    Vue 初识
    复杂数据类型之函数 对象
    Collections工具类
    遍历集合的方法总结
    使用Iterator迭代器遍历容器元素(List/Set/Map)
    TreeSet的使用和底层实现
    HashSet基本使用
    HashSet底层实现
    TreeMap的使用和底层实现
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5246333.html
Copyright © 2011-2022 走看看