zoukankan      html  css  js  c++  java
  • 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=/+sClass+/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=" 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>
      
  • 相关阅读:
    SQLServer数据库自增长标识列的更新修改操作
    “~/Views/Login/Login.aspx”处的视图必须派生自 ViewPage、ViewPage<TModel>、ViewUserControl 或 ViewUserControl<TModel>。
    关于值类型与列类型不匹配,所需类型是 DataRow"的解决方案
    尝试为文件 F:visual studio 2010kbspaperCMSApp_DataProject.mdf 附加自动命名的数据库,但失败。已存在同名的数据库,或指定的文件无法打开或位于 UNC 共享目录中。
    Django快速开发之投票系统
    super() 的入门使用
    [python]模块及包
    [转]大话后端开发的奇淫技巧大集合
    [.net 多线程]ThreadPool的安全机制
    [.net 多线程]Task
  • 原文地址:https://www.cnblogs.com/zifeiyu/p/3394640.html
Copyright © 2011-2022 走看看