getByClass--js 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .demo05{
            background-color: #000;
            height:60px;
            width: 40px;
            -webkit-border-radius:20px/30px;
            -moz-border-radius:20px/30px;
            border-radius:20px/30px;

        }
        .mouse{ transform-origin:10px 0;border-top: transparent;border-bottom: transparent;border-right: #000;-ms-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);width: 0; height: 0; border-width:20px 10px 20px 0; border-style: solid; }


        *{margin:0;padding:0;}

        .wrap{font-size:0;list-style:none;display:block;text-align:center;}

            /* hack for chrome */
        li{font-size:13px;vertical-align:top;display:inline-block;*display:inline;*zoom:1;}

        #test{margin-bottom:30px;}
        #test li{text-align:left;width:130px;height:130px;padding:20px;background:#ffc;border:1px solid #f30;}
        #test p{margin-bottom:10px;}
        #test .button{display:block;width:60px;height:25px;line-height:25px;text-align:center;background:#f30;color:#fff;white-space:nowrap;}

        .nav{border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:2px 0;margin-bottom:10px;background:#f7f7f7;}
        .nav li{background:#333;padding:8px 10px;border:3px solid #fff;}
        .nav a{color:#fff;text-decoration:none;}

    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        /*function getByClass(oParent,sClass){
            var parent=document.getElementsByTagName(oParent);
            var parentEle=parent[0].getElementsByTagName("*"),
                resultArr=[];
            for(var i=0;i<parentEle.length;i++){
                if(parentEle[i].className==sClass){ //只匹配class='sClass'的情况
                    resultArr.push(parentEle[i]);
                }
            }
            return resultArr;
        }*/
        function getByClass(oParent,sClass){
            var parent=document.getElementsByTagName(oParent);
            var parentEle=parent[0].getElementsByTagName("*"),
                resultArr=[],
                /*pattern=/\b+sClass+\b/i;*/
                pattern=new RegExp('\\b'+sClass+'\\b');
            for(var i=0;i<parentEle.length;i++){
                if(pattern.test(parentEle[i].className)){
                    resultArr.push(parentEle[i]);
                }
            }
            return resultArr;
        }
        window.onload=function(){
            console.log(getByClass("body","wrap").length);
        }
    </script>
</head>
<body id="box">
  <div class="demo05"></div>
<div class="mouse"></div>
<ul><li>woshili1</li><li>woshili1</li><li>woshili1</li><li>woshili1</li><li>woshili1</li><li>woshili1</li></ul>

  <ul id="test" class="wrap">
      <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> <a class="button">button</a></li>
      <li><p>sed do eiusmod tempor incididunt ut</p> <a class="button">button</a></li>
      <li><p>fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p></p> <a class="button">button</a></li>
  </ul>

  <ul class="nav wrap" id="ul1">
      <li><a href="#">item 1</a></li>
      <li><a href="#">item 2</a></li>
      <li><a href="#">item 3</a></li>
      <li><a href="#">item 4</a></li>
      <li><a href="#">item 5</a></li>
  </ul>

  <ul class="nav wrap">
      <li><a href="#">item 1</a></li>
      <li><a href="#">item 2</a></li>
      <li><a href="#">item 3</a></li>
  </ul>

  <ul class="nav wrap">
      <li><a href="#">item 1</a></li>
  </ul>
  <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
      <tr>
          <td style="border:1px solid #39F;"> </td>
          <td style="border:1px solid #39F;"> </td>
      </tr>
      <tr>
          <td style="border:1px solid #39F;"> </td>
          <td style="border:1px solid #39F;"> </td>
      </tr>
  </table>
  <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#6699FF">
      <tr>
          <td bgcolor="#FFFFFF"> </td>
          <td bgcolor="#FFFFFF"> </td>
      </tr>
      <tr>
          <td bgcolor="#FFFFFF"> </td>
          <td bgcolor="#FFFFFF"> </td>
      </tr>
  </table>
<input type="text" value="请输入关键词" style="width: 300px; height: 30px; border: 1px solid #ccc; color: #ccc; font-size: 14px;">
  <input type="submit" style="border: 0; background-color: #f89406; color: #fff; padding: 8px 30px; font-size: 14px;" value="搜索">
</body>
</html>
　　

 

posted @ 2013-10-29 16:56  叶知秋红  阅读(455)  评论(0)    收藏  举报