jQuery实现

一、概述
jQuery是由John Resig在其大学期间做的一个side project，在2006年1月正式发布的，其制作jQuery的动机是为了让他能进行更好地开发工作，John当时做的很多网站，发现开发过程中很多时间都用于处理不同浏览器的兼容问题，为了更好地在不同浏览器加载其制作的一些CSS效果引擎，他在业余时间花费了3到4个月开发了jQuery库。

1、jQuery库在发布时就带了documentation, 而当时2016年1月到2016年9月，它是仅有的一款带documentation的库。
2、jQuery一直作为side project由John Resig业务时间维护，直到后续加入Mozila，公司让其全职工作于jQuery，但实际上由于设计初有考虑Plugin等以及主要精力放在如何让开发者喜欢用，愿意用的工作上，jQuery团队Bug Tracker中写代码的人只有3个，其余人主要解决各种各样的问题。

最开始jQuery发布时候的：

jQuery.png

二、用途
1、简化了遍历HTML文档，处理事件，执行动画以及向Web页面添加Ajax交互的方式。
2、处理了不同浏览器的兼容问题。

三、实现
其实现主要受到Prototype库，以及CSS_Selector.js的激励。

jQuery是通过jQuery构造函数选择一个元素，构造的元素能指向jQuery prototype的便捷方法。

以下是通过简单的例子进行说明，写一个往所有符合要求的元素中统一添加类，修改文本元素的diy版本的 "jQuery"

window.jQuery = function(nodeorLabel){
  let nodes = {}
  if(typeof nodeorLabel === 'string'){
      nodes=document.querySelectorAll(nodeorLabel)
  } else if(nodeorLabel instanceof Node){
      nodes = {
       0: nodeorLabel,
       length: 1
    }
  }

  nodes.addClass=function(c){
      for (var i = 0; i < nodes.length; i=i+1){
          nodes[i].classList.add(c);
    }
  }

  nodes.setText=function(text){
      for (var i = 0; i < nodes.length; i=i+1){
        nodes[i].textContent = text
    }
  }
  return nodes
}  

写完后，就可以使用该构造函数了,比如处理以下HTML

HTML.png

往div里添加class，修改div的文本值

window.$ = jQuery
var $div = $('ul>li>div')
$div.addClass('red')
$div.setText('hi')
console.log(document.querySelectorAll('ul>li>div'))
console.log(document.querySelectorAll('ul>li>div')[0].innerText)