window.$=window.jQuery=jQuery

我们的目的实现以下功能:

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 = {}
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (let i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
    return node()
}

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

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

nodes.addClass = function(classes) {
    classes.forEach((value) => {
      for (let i = 0; i < nodes.length; i++) {
        node[i].classList.add(value)
      }
    })
  }

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

nodes.text = function(text) {
    if (text === undefined) {
      var texts = []
      for (let i = 0; i < nodes.length; i++) {
        texts.push(nodes[i].textContent)
      }
      return texts
    } else {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  }

最终代码如下:

window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (let i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }

  nodes.addClass = function(classes) {
    classes.forEach((value) => {
      for (let i = 0; i < nodes.length; i++) {
        node[i].classList.add(value)
      }
    })
  }

  nodes.text = function(text) {
    if (text === undefined) {
      var texts = []
      for (let i = 0; i < nodes.length; i++) {
        texts.push(nodes[i].textContent)
      }
      return texts
    } else {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
      }
    }
  }

  return nodes
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,526评论 0 44
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 869评论 0 8
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,408评论 0 8
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,056评论 0 9
  • 我们的目标,能够实现以下功能 window.jQuery = ??? window.$ = jQuery var ...
    longqinusi阅读 277评论 0 0