JS封装简单后代选择器

  原文：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')