标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/zeng91/p/5955761.html
