标签：
大概思路是这样的：通过判断传过来的参数是什么类型，如果是对象，那这里就是this(因为封装是自己用的，肯定不会随便乱传一个对象过来)，如果是一个函数（匿名函数），那就是Dom加载（这里先不讲），如果是字符串，那就是CSS选择器，通过判断是否存在空格，没有就是单一CSS选择器，有就是后代选择器。然后再通过判断是ID选择器，类选择器还是元素选择器来执行具体的操作：
这里创建一个构造函数实现基础库Jr :
function Jr(){ }
在其原型上添加方法：
//获取ID节点 Jr.prototype.getId = function(id){ return document.getElementById(id); } //获取CLASS节点数组 Jr.prototype.getClass = function(className, parentNode){ var node = null; //存放父节点 var temps = []; if(parentNode != undefined){ //存在父节点时 node = parentNode; } else { //不存在则默认document node = document; } var all = node.getElementsByTagName(‘*‘); for(var i = 0; i < all.length; i++){ //遍历所有节点，判断是否有包含className if((new RegExp(‘(\\s|^)‘ + className + ‘(\\s|$)‘)).test(all[i].className)){ temps.push(all[i]); } } return temps; } //获取元素节点数组 Jr.prototype.getTagName = function(tag, parentNode){ var node = null; //存放父节点 var temps = []; if(parentNode != undefined){ node = parentNode; } else { node = document; } var tags = node.getElementsByTagName(tag); for(var i = 0; i < tags.length; i++){ temps.push(tags[i]); } return temps; }
接下来就是在构造函数里通过传参来进行一系列选择器操作：
//基础库 function Jr(args){ //创建一个数组，用来保存获取的节点或节点数组 this.elements = []; //当参数是一个字符串，说明是常规css选择器，不是this,或者function if(typeof args == ‘string‘){ //css模拟，就是跟CSS后代选择器一样 if(args.indexOf(‘ ‘) != -1){ //把节点拆分开并保存在数组里 var elements = args.split(‘ ‘); //存放临时节点对象的数组，解决被覆盖问题 var childElements = []; var node = []; //用来存放父节点用的 for(var i = 0; i < elements.length; i++){ //如果默认没有父节点，就指定document if(node.length == 0) node.push(document); switch(elements[i].charAt(0)) { //id case ‘#‘ : //先清空临时节点数组 childElements = []; childElements.push(this.getId(elements[i].substring(1))); node = childElements; //保存到父节点 break; //类 case ‘.‘ : childElements = []; //遍历父节点数组，匹配符合className的所有节点 for(var j = 0; j < node.length; j++){ var temps = this.getClass(elements[i].substring(1), node[j]); for(var k = 0; k < temps.length; k++){ childElements.push(temps[k]); } } node = childElements; break; //标签 default : childElements = []; for(var j = 0; j < node.length; j++){ var temps = this.getTagName(elements[i], node[j]); for(var k = 0; k < temps.length; k++){ childElements.push(temps[k]); } } node = childElements; } } this.elements = childElements; } else { //find模拟,就是说只是单一的选择器 switch(args.charAt(0)) { case ‘#‘: this.elements.push(this.getId(args.substring(1))); break; case ‘.‘: this.elements = this.getClass(args.substring(1)); break; default : this.elements = this.getTagName(args); } } } else if(typeof args == ‘Object‘){ if(args != undefined){ this.elements[0] = args; } } else if(typeof args == ‘function‘){ //这里不讲 this.ready(args); } }
最后，我们调用该基础库：
//调用 var $ = function(args){ return new Jr(args); }
现在，我们就可以实现如下选择器等效果了：
$(this) $(‘#box‘) $(‘.box‘) $(‘div‘) $(‘#box div .nav‘) $(‘.box .nav p‘)
标签：
原文地址：http://www.cnblogs.com/jr1993/p/4540549.html
