jquery

2018-05-02  本文已影响0人  pawN_f294

一、jquery函数会返回一个对象,通过传入一个CSS选择器字符串或者是一个DOM对象作为参数,来拿到包装过的对象。
该对象上面有包括我们需要的功能函数,这些功能函数会通过闭包来拿到该包装对象,执行对应的操作。

    window.jQuery = function (selector) {
      var node = {};
      if (typeof selector === 'string') { // 判断是否为css选择字符串
        // 如果是就用querySelectorAll选取它,拿到我们想要的属性。
        var temp = document.querySelectorAll(selector);
        for (let i = 0; i < temp.length; i++) {
          node[i] = temp[i]
        }
        node.length = temp.length;
      } else if (selector instanceof Node){ // 如果是一个DOM对象
        node[0] = selector;
        node.length = 1;
      } else {
        throw new Error('只支持css选择器和DOM对象');
      }
      
      // 提供给外部的API
      node.addClass = function (classes) {
        var classArr = classes.split(' ');
        for (var i = 0; i < node.length; i++) {
          for (var j = 0; j < classArr.length; j++) {
            node[i].classList.add(classArr[j]);
          }
        }
        return node;
      }

      node.setText = function (string) {
        for(var i = 0; i < node.length; i++) {
         node[i].textContent = string;
        }
        return node;
      }
      return node;
    }
    jQuery('ul > li').setText('hi').addClass('red')

每个API都会返回该包装对象,可以进行链式操作。

上一篇下一篇

猜你喜欢

热点阅读