仿querySeletor 相容IE 67

帥哥天下9發表於2018-07-13
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>仿Jquery查詢</title>
 </head>
 <body>
 <div  id="box" class="box">
    <ul  id="ulBox"  class="ulBox"  >
        <li></li>
        <li></li>
        <li></li>
    </ul>
 </div>
 <script type="text/javascript" src="DomUtil.js"></script>
   <script type="text/javascript">
          function $(str){
             /*#box .ulBox li*/
                /*
                 var currentEle=document;
                  先取到#box  然後得到#box元素 
                  儲存在currentEle中
                  然後在#box元素下取到.ulBox 
                  考慮到類不是一個 所以一般取第一個操作就行
                   $(".box")[0]
                   儲存在currentEle中
                  然後在ul.box 下取到 li
                   儲存在currentEle中
                  每次查到元素 都要儲存在一個變數中以便下次搜尋時用

                 符串是用空格分開的
                 所以可以用 str.split(" ")分成好幾個在遍歷操作;
                  */
            
             
                    currentEle=document;//儲存每次查詢的元素節點
               var      arr=str.split(" ");//把字串按空格分開變成陣列
               var      len=arr.length;
               for(var i=0;i<len;i++)
               {
                      var  firstSign = arr[i].substr(0,1);

                 if(firstSign!="." && firstSign!="#" )
                      {
                      
                           var      name=arr[i].substr(0);

                      }
                 else{
                           var      name =arr[i].substr(1);
                      }
                      
               
               switch(firstSign)
               {
                
                    case "." : currentEle=getElementsByClassName(name)[0];
                    break;
                    case "#" : currentEle=currentEle.getElementById(name);
                    break;
                    default : currentEle=currentEle.getElementsByTagName(name);
                
               }

         }

             return currentEle;
             }
     
     console.log($(".box .ulBox li"));
     
   </script>
 </body>
</html>

 

相關文章