$符号的封装

Posted 小李HH

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了$符号的封装相关的知识，希望对你有一定的参考价值。

-<!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>

以上是关于$符号的封装的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

如何在 Javadoc 中使用 @ 和 符号格式化代码片段？

回归 | js实用代码片段的封装与总结（持续更新中...）

VsCode 代码片段-提升研发效率

c_cpp 这个简单的代码片段显示了如何使用有符号整数在C中完成插值。 for（）循环确定要插入的范围

以下代码片段的算法复杂度