JS封装简单后代选择器

我不是女神ヾ 2022-08-22 05:59 229阅读 0赞

[原文：http://www.cnblogs.com/jr1993/p/4540549.html][http_www.cnblogs.com_jr1993_p_4540549.html]

大概思路是这样的：通过判断传过来的参数是什么类型，如果是对象，那这里就是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]: http://www.cnblogs.com/jr1993/p/4540549.html?utm_source=tuicool&utm_medium=referral