模拟tquery封装选择器

Posted 2020-08-14 zengzeng91

tags:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title></title>
  <script>
   //测试模拟jquery选择器封装的效果
    window.onload=function(){
        console.log("#myDiv:"+$("#myDiv").size()+"个");
        console.log(".redBorder:"+$(".redBorder").size()+"个");
        console.log("div:"+$("div").size()+"个");
    }
    
    /*封装的id、class、元素选择器的选择操作*/
    var $=function(selector){
        this.tqObject=new TQObject();
        //id选择器的操作
        if(selector.substring(0,1)=="#"){
            var elem=document.getElementById(selector.substring(1,selector.length));
            tqObject.data.push(elem);//存入tqObject对象的数组中
        }else if(selector.substring(0,1)==‘.‘){
            //类选择器的操作
            var elems=document.getElementsByTagName(‘*‘);//获取页面中的所有元素
            var className=selector.substring(1);//获取className
            var reg=new RegExp("(^|\\s)"+className+"($|\\s)");//定义正则表达式
            for(var i=0;i<elems.length;i++){
                if(reg.test(elems[i].className)){//如果匹配上，则存入tqObject对象的数组中
                    this.tqObject.data.push(elems[i]);
                }
            }
        }else{
            //标签选择器
            var elems=document.getElementsByTagName(selector);
            this.tqObject.data=elems;
        }
        return tqObject;
    }

    /*封装选择器
    *封装TQObject对象，提供一个数组元素，以及若干自定义的操作方法
    *通过封装$("#id|.class|element")来获取元素
    */

    /*封装TQObject对象*/
    var TQObject=function(){
        this.data=[];
    }
   
    TQObject.prototype={
        //TQObject添加原型方法
        size:function(){//返回data数组的个数
            return this.data.length;
        }
    };
  </script>
 </head>

 <body>
  <div class="redBorder" id="myDiv"></div>
  <div class="redBorder"></div>
  <div class="grayBorder"></div>
 </body>
</html>

以上是关于模拟tquery封装选择器的主要内容，如果未能解决你的问题，请参考以下文章

日期选择器上诉破裂

VSCode自定义代码片段6——CSS选择器

unordered_mapunordered_set模拟实现

vbscript 选择en Tquery