类似 jQuery 的 API

我们的目标，能够实现以下功能

    window.jQuery = ???

    window.$ = jQuery

    var $div = $('div')

    $div.addClass('red') // 可将所有 div 的 class 添加一个 red

    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi

首先，想用$和jQuery，直接声明成全局变量即可。

window.jQuery = function() {}    

window.$ = jQuery

我们要把jQuery和$封装成一个方法，可以选中dom元素。

在调用这个方法时，这里我们可以给它传一个dom元素，也可以传一个选择器（字符串）。

我们默认传递的是一个dom元素，即 let nodes = { 0: nodeOrSelector, length: 1 }；

然后再对传递的参数类型用typeof进行判断，如果是'string'类型，那么我们把它作为一个选择器，用querySelectorAll来选中dom元素。

然后，将nodes返回。这就实现了用$和jQuery来作为选择器选中dom元素。而且我们返回的是一个纯净的伪数组，没有原生dom的方法和属性。

window.jQuery = function(nodeOrSelector) {

      let nodes = {

        0: nodeOrSelector,

        length: 1

      }

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

        let temp = document.querySelectorAll(nodeOrSelector);

        for(let i=0; i

          nodes[i] = temp[i];

        }

        nodes.length = temp.lenght;

      }

      return nodes

    }

然后，我们来对这个函数添加两个方法。

$div.addClass('red') // 可将所有 div 的 class 添加一个 red：

nodes.addClass = function(classes) {

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

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

            nodes[i].classList.add(classes)

          }

        }else{

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

            classes.forEach( (value) => nodes[i].classList.add(value) )

          }

        }

      }

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi：

nodes.setText = function(text) {

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

          nodes[i].textContent = text;

        }

      }

以上就是简单的模仿了3个jquery的api。选择器，addClass, setText。

最终的代码如下：