理解jQuery过程

1.封装函数,命名空间

  window.newNode ={};//或者 var newNode ={};

  newNode.getSiblings = function(node){

    let allChildren = node.parentNode.children;

    let nodes = {

      length:0

    };

    for(let i =0;i{

      node.classList.add(value)

    })

  }

  var node = newNode.getSiblings(li1);

  newNode.addClass(li1,['red','bold'])

2.封装函数

node 放在前面,参考jQuery习惯,node.getSiblings(),node.addClass()

    ###2.1 扩展 Node 接口

    Node.prototype.getSiblings = function () {

      let allChildren = this.parentNode.children;

      let nodes = {

        length: 0

      };

      for (let i = 0; i < allChildren.length; i++) {

        if (this !== allChildren[i]) {

          nodes[nodes.length] = allChildren[i];

          nodes.length++;

        }

      }

      return nodes;

    }

    Node.prototype.addClass = function (classes) {

      classes.forEach((value) => {

        this.classList.add(value)

      })

    }

    // var node = li1.getSiblings();

    var node = li1.getSiblings.call(li1);

    console.log(node);

    // li2.addClass(['red','bold']);

    li2.addClass.call(li3, ['red', 'bold']);
###2.2 新的接口 MyjQuery
    function MyJquery(nodeOrSelector) {

      let nodes ={};//结构为object

      if(typeof nodeOrSelector === 'string'){

        let temp = document.querySelectorAll(nodeOrSelector);

        for(let i = 0;i {

            this[i].classList.add(element);

          });

        }

      }

      nodes.text = function(text){

        if(text === undefined){

          for(let i=0;i li');

    var li1 = ('#li1');

    var li2 = (li2)//li2为id,直接写是node类型

    console.dir($li1)

    console.dir($li2)

    $li.addClass(['red','blue'])

    $li2.text('hi');

你可能感兴趣的:(理解jQuery过程)