标签：
这几天一有空就在折腾类jq选择器，昨天晚上自己实现了选择器的大致雏形。今天接着折腾给这个简陋的选择器增添新的方法。
我们平时用jq选择器，不只能够用$(str)方法获取元素，也支持$(dom对象集合)；
为了造的更像我们常用的这个轮子，接着对昨天晚上做的选择器又进行了一点扩展。
以下是昨天坐的选择器雏形，
利用getEle(str)方法便可获取dom元素集合.
function getByClass(oParent,sClass){ if(oParent.getElementsByClassName){ return oParent.getElementsByClassName(sClass); } var result = []; var re = new RegExp("\\b"+sClass+"\\b"); var aEle = oParent.getElementsByTagName("*"); for(var i = 0; i < aEle.length; i++){ if( re.test(aEle[i].className) ){ result.push(aEle[i]); } } return result; } function getByStr(aParent,str){ var aChild = []; //选择元素 //str #id .class tagname for(var i = 0; i < aParent.length; i++){ switch(str.charAt(0)){ case "#":// id var obj = document.getElementById(str.substring(1)); aChild.push(obj); break; case ".":// 类 var aEle = getByClass(aParent[i],str.substring(1)); //aChild = aChild.concat(aEle); for(var j = 0; j < aEle.length; j++){ aChild.push(aEle[j]); } break; default://标签 //tagname#id if(/^[a-z0-9]+#[a-z0-9\-_$]+$/i.test(str)){ //[tagname,id] var arr = str.split("#"); var aEle = aParent[i].getElementsByTagName(arr[0]); for(var j = 0; j < aEle.length; j++){ if(aEle[j].id == arr[1]){ aChild.push(aEle[j]); } } //li.box } else if(/[a-z0-9]+\.[a-z0-9\-_$]+$/i.test(str)){ // [tagname,class] var arr = str.split("."); var aEle = aParent[i].getElementsByTagName(arr[0]); for(var j = 0; j < aEle.length; j++){ if(aEle[j].className == arr[1]){ aChild.push(aEle[j]); } } //input[type=button] } else if(/\w+\[\w+=\w+\]/.test(str)){ //arr [input,type,button,] var arr = str.split(/\[|=|\]/); var aEle = aParent[i].getElementsByTagName(arr[0]); for(var j = 0; j < aEle.length; j++){ if(aEle[j].getAttribute(arr[1]) == arr[2]){ aChild.push(aEle[j]); } } //li:first li:eq(index) } else if(/\w+:\w+(\(\.\))?/.test(str)){ /*[li,eq,index,] arr[0] tagname arr[1] first/eq/gt/lt/odd/even arr[2] 内容 */ var arr = str.split(/:|\(|\)/); var aEle = aParent[i].getElementsByTagName(arr[0]); switch(arr[1]){ case "first": aChild.push(aEle[0]); break; case "last": aChild.push(aEle[aEle.length - 1]); break; case "eq": aChild.push(aEle[arr[2]]); break; case "gt"://大于 for(var j = parseInt(arr[2]) + 1; j < aEle.length; j++){ aChild.push(aEle[j]); } break; case "lt"://小于 for(var j = 0; j < parseInt(arr[2]); j++){ aChild.push(aEle[j]); } break; case "odd": for(var j = 0; j < aEle.length; j++){ if(j%2 == 1){ aChild.push(aEle[j]); } } break; case "even": for(var j = 0; j < aEle.length; j+=2){ aChild.push(aEle[j]); } break; } }else {//纯标签 var aEle = aParent[i].getElementsByTagName(str); //aChild = aChild.concat(aEle); for(var j = 0; j < aEle.length; j++){ aChild.push(aEle[j]); } } } } return aChild; } //获取元素 function getEle(str){ // 切 var arr = str.replace(/^\s+|\s+$/g,"").replace(/\s+/g," ").split(" "); var aParent = [document]; var aChild = []; //循环获取元素 for(var i = 0; i < arr.length; i++){ aChild = getByStr(aParent,arr[i]); //核心： 上一次子级 是下一次父级 aParent = aChild; } return aChild; }
接着对以上方法进行扩展。
function Query(args){ this.eles = []; switch (typeof args){ case ‘string‘: if(args.indexOf(‘<‘)==-1){ this.eles = getEle(args) } break; case ‘object‘: if(‘length‘ in args){ for(var i =0;i<args.length;i++){ this.eles.push(args[i]); } }else{ this.eles.push(args); } break; }
//return this.eles 我们也可就此打住 直接返回出获取的dom对象集合;这里为了继续进行扩展这一步我就不返回了。 } Query(‘div a .abc‘).eles;//便可获取对象了 Query(dom).eles;//也可获取dom对象
标签：
原文地址：http://www.cnblogs.com/vidy/p/4792957.html
