原生JS模拟jQuery $

模拟jQuery的$选择器

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

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

function TQObject(){

    this.data= []  ;

}

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

var $ = function(selector){

    tqObject = new TQObject();//根据不同的selector获取不同的DOM元素

    return tqObject;

}

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

首先来处理ID选择器对外语法$("#id")

首先判断其第一位是不是#。如果是则为ID选择器

function $(selector) {

  var c = selector.substring(0,1);

  if(c == '#'){

      return document.getElementById(selector.substring(1,selector.length))

  }

}

处理类选择器对外语法$('.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;

      }

    }

根据标签名

function $(element) {

  return document.getElementsByTagName(element)

}

最后整合在一起

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;

}

巴特西

原生JS模拟jQuery $

模拟jQuery的$选择器

最新文章

热门文章