首页 > 代码库 > 模拟tquery封装选择器

模拟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封装选择器