小言_互联网的博客

原生js模拟jQuery选择器功能及方法

193人阅读  评论(0)

模拟jQuery选择器功能及方法

查看jQuery源码可以发现,jQuery中没有使用new操作符来创建新对象,而是采用调用jQuery原型中init()函数的方式返回一个新对象。
熟悉jQuery的人应该知道,几乎jQuery所有操作,都是从$符号开始,当作为元素选择器的时候,操作结果返回的是一个jQuery对象。以下是个人模拟的写法:

//模拟jQuery选择器功能
    (function () {
   
      function jQuery(selector) {
   
        return new jQuery.prototype.init(selector);
      }
      //init是存在jQuery原型上的一个方法
      jQuery.prototype.init = function (selector) {
   
        //选取dom原生的js
        this.length = 0;
        if (selector == null) {
   
          return this;
        }
        if (typeof selector == 'string' && selector.indexOf('.') != -1) {
   
          var dom = document.getElementsByClassName(selector.slice(1));
        } else if (typeof selector == 'string' && selector.indexOf("#") != -1) {
   
          var dom = document.getElementById(selector.slice(1));
        }
        if (selector instanceof HTMLElement || dom.length == undefined) {
   
          this[0] = dom || selector;
          this.length++;
        } else {
   
          for (var i = 0; i < dom.length; i++) {
   
            this[i] = dom[i];
            this.length++;
          }
        }
      }
      jQuery.prototype.css = function (propertyname, value) {
   
        for (var i = 0; i < this.length; i++) {
   
          //判断传入的值如果为对象
          if (Object.prototype.toString.call(propertyname) == '[object Object]') {
   
            //新数组存储对象的键和值
            var arr = []
            //遍历对象键和值存入新数组
            for (key in propertyname) {
   
              // console.log(i);
              arr.push(key)
              arr.push(propertyname[key])
            }
            //遍历数组给目标改变样式
            for (var j = 0; j < arr.length; j++) {
   
              this[i].style[arr[j]] = arr[j + 1];
            }
          }
          //判断传入的值是两个值,设置css属性
          if (arguments.length == 2) {
   
            this[i].style[arguments[0]] = arguments[1]
          }
          //判断传入的值是一个值表示返回 CSS 属性
          if (arguments.length == 1) {
   
            return window.getComputedStyle(this[i]).getPropertyValue(arguments[0])
            // return window.getComputedStyle(this[i]).arguments[ 0];
          }
        }
        return this;
      }
      //get实现
      jQuery.prototype.get = function (num) {
   
        //参数为空
        if (num == null) {
   
          //返回一个真数组
          return [].slice.call(this, 0)
        } else {
   
          if (num >= 0) {
   
            return this[num];
          } else {
   
            return this[this.length + num]
          }
        }
      }
      //eq实现
      jQuery.prototype.eq = function (num) {
   
        var dom = num != null ? (num >= 0 ? this[num] : this[num + this.length]) : null
        return jQuery(dom)
      }
      //add实现
      jQuery.prototype.add = function (adddom) {
   
        if (adddom instanceof HTMLElement) {
   
          this[this.length] = adddom;
          this.length++;
          return this;
        }
        if (typeof adddom == 'string') {
   
          var arr = adddom.split(',')
          for (var j = 0; j < arr.length; j++) {
   
            this[this.length] = jQuery(arr[j])[0];
            this.length++;
          }
          return this;
        }
        if (adddom.__proto__.constructor instanceof Object) {
   
          this[this.length] = adddom[0];
          this.length++;
          return this;
        }
      }
      //end实现
      jQuery.prototype.end = function () {
   
        this[this.length] = this[0].parentNode
        this.length++;
        return jQuery(this[this.length - 1]);
      }
      //init对象的原型指向jQuery原型
      jQuery.prototype.init.prototype = jQuery.prototype
      window.$ = window.jQuery = jQuery;
    })()

转载:https://blog.csdn.net/yun_shuo/article/details/115434196
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场