原生JS模拟jQuery $

模拟jQuery的$选择器

在获取元素的时候使用ID选择器，返回的是一个对象；使用类选择器或者标签选择器返回可能是一组元素；将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject

• 什么是TQObject对象？简单来说就是一个自定义的JS对象，其主要目的是为了保存通过各个选择获取的一个或一组DOM对象

function TQObject(){
    this.data= []  ;
}

1) 模拟$，用于根据指定的选择器获取页面上的元素，并将获取的元素封装到TQObject中返回

var $ = function(selector){
    tqObject = new TQObject();//根据不同的selector获取不同的DOM元素
    return tqObject;
}

• 通过$("指定选择器")来获取页面元素，例如$("#id")可以根据id获取元素

2) 首先来处理ID选择器 对外语法$("#id")
首先判断其第一位是不是#。如果是则为ID选择器

function $(selector) {
  var c = selector.substring(0,1);
  if(c == '#'){
      return document.getElementById(selector.substring(1,selector.length))
  }
}

3) 处理类选择器 对外语法$('.class')
注意：getElementByClassName在ie低版本不兼容

    function $(selector) {
      var className = selector.substring(1)
      //判断是否支持getElementByClass
      if(document.getElementsByClassName){
          return document.getElementsByClassName(className)
      }else {
          //正则处理
          var reg = new RegExp("(^|\\s)"+className+"($|\\s)");
          var elems = getElementsByTagNmae('*')
          var arr = [];
          for(var i=0,len=elems.length;i<len;i++){
              if(reg.test(elems[i].className)){
                  arr.push(elems[i])
              }
          }
          return arr;
      }
    }

4) 根据标签名

function $(element) {
  return document.getElementsByTagName(element)
}

5) 最后整合在一起

var TQObject = function() {
  this.data = []
}
TQObject.prototype = {};

var $ = function(selector) {
  this.tqObject = new TQObject();
  if(selector.substring(0,1) == '#'){
      var elem = document.getElementById(selector.substring1);
      this.tqObject.data.push(elem)
  }else if(selector.substring(0,1)=='.'){
      var elems = document.getElementsByTagName('*')
      var reg = new RegExp("(^|\\s)"+selector.substring(1)+"(^|\\s)");
      for(var i=0,len=elems.length;i<len;i++){
          if(reg.test(elems[i].className)){
              this.tqObject.data.push(elems[i])
          }
      }
  }else {
      var elems = document.getElementsByTagName(selector);
      this.tqObject.data.push(elems)
  }
  return this.tqObject;
}

转载于:https://www.cnblogs.com/Juphy/p/6959217.html