$符号的封装

-<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<div></div>
<div></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div></div>
<div></div>
<div></div>
<div id="last"></div>
</body>
</html>
<script>
   //function $(id) {return document.getElementById(id)}  //id选择器

   function getClass(classname)   //  类的写法
   {
       //判断支持否
       if(document.getElementsByClassName)
       {
           return document.getElementsByClassName(classname);
       }
       var arr = []; //用于返回 数组
       var dom = document.getElementsByTagName("*");
       for(var i=0;i<dom.length;i++)  // 遍历所有的 盒子
       {
           var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组
           //  ["demo","test"];
           for(var j=0;j<txtarr.length;j++)  // 遍历 通过类名分割的数组
           {
               if(txtarr[j] == classname)
               {
                   arr.push(dom[i]); // 我们要的是 div
               }
           }
       }
       return arr;
   }

   // $("#demo")   $(".one")   $("div")
    //封装自己的$
    function $(str) {
        var s = str.charAt(0);   //  一个s 的变量 存放是 符号  #  .
        var ss = str.substr(1);  // demo
        switch(s)
        {
            case "#":
                return document.getElementById(ss);
            break;
            case ".":
                return getClass(ss);
            break;
            default :
                return document.getElementsByTagName(str);
        }
    }


  $("#demo").style.backgroundColor = "purple";
  $("#last").style.backgroundColor = "purple";
   var test = $(".one");
    for(var i=0;i<test.length;i++)
    {
        test[i].style.backgroundColor = "blue";
    }

</script>

   - 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  > 
 
  < 
  head 
  lang= 
  "en" 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  title 
  ></ 
  title 
  > 
 
  < 
  style 
  > 
 
  div { 
 
  width: 
  100px; 
 
  height: 
  100px; 
 
  background-color: pink; 
 
  margin: 
  10px; 
 
   } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  id= 
  "demo" 
  ></ 
  div 
  > 
 
  < 
  div 
  ></ 
  div 
  > 
 
  < 
  div 
  ></ 
  div 
  > 
 
  < 
  div 
  class= 
  "one" 
  ></ 
  div 
  > 
 
  < 
  div 
  class= 
  "one" 
  ></ 
  div 
  > 
 
  < 
  div 
  class= 
  "one" 
  ></ 
  div 
  > 
 
  < 
  div 
  ></ 
  div 
  > 
 
  < 
  div 
  ></ 
  div 
  > 
 
  < 
  div 
  ></ 
  div 
  > 
 
  < 
  div 
  id= 
  "last" 
  ></ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  > 
 
  < 
  script 
  > 
 
  //function $(id) {return document.getElementById(id)} //id选择器 
 
  function getClass(classname) 
  // 类的写法 
 
   { 
 
  //判断支持否 
 
  if(document.getElementsByClassName) 
 
   { 
 
  return document.getElementsByClassName(classname); 
 
   } 
 
  var arr = []; 
  //用于返回 数组 
 
  var dom = document.getElementsByTagName( 
  "*"); 
 
  for( 
  var i= 
  0;i<dom.length;i++) 
  // 遍历所有的 盒子 
 
   { 
 
  var txtarr = dom[i].className.split( 
  " "); 
  // 分割类名 并且 转换为数组 
 
  // ["demo","test"]; 
 
  for( 
  var j= 
  0;j<txtarr.length;j++) 
  // 遍历 通过类名分割的数组 
 
   { 
 
  if(txtarr[j] == classname) 
 
   { 
 
   arr.push(dom[i]); 
  // 我们要的是 div 
 
   } 
 
   } 
 
   } 
 
  return arr; 
 
   } 
 
  // $("#demo") $(".one") $("div") 
 
  //封装自己的$ 
 
  function $(str) { 
 
  var s = str.charAt( 
  0); 
  // 一个s 的变量 存放是 符号 # . 
 
  var ss = str.substr( 
  1); 
  // demo 
 
  switch(s) 
 
   { 
 
  case 
  "#": 
 
  return document.getElementById(ss); 
 
  break; 
 
  case 
  ".": 
 
  return getClass(ss); 
 
  break; 
 
  default : 
 
  return document.getElementsByTagName(str); 
 
   } 
 
   } 
 
   $( 
  "#demo").style.backgroundColor = 
  "purple"; 
 
   $( 
  "#last").style.backgroundColor = 
  "purple"; 
 
  var test = $( 
  ".one"); 
 
  for( 
  var i= 
  0;i<test.length;i++) 
 
   { 
 
   test[i].style.backgroundColor = 
  "blue"; 
 
   } 
 
  < 
  / 
  script 
  >

猜你喜欢