jQuery揭秘

1. jQuery 是什么

jQuery是JavaScript的一个库，包含很多可复用的函数，也就是一个特殊的 API。
jQuery的官方文档

2. jQuery 的引入

a. 在jQuery官网下载相应的版本，用<script>标签在Html文档中引用
b. 通过CDN使用 如用微软提供的
<script src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js”></script>
使用CDN的好处：

• 减少等待时间
• 增加网页的同时载入速度
• 更好的缓存

3. jQuery 获取的对象

DOM获取的对象 div 和jQuery获取的对象 $div 的相互转化：

<div id= 'x' ></div>  // Html 

var div = document.getElementById('x')
var $div = $('#x')

将jQuery对象就转换成了DOM对象
var div = $div[0] 或 div = $div.get(0)
将DOM对象转换成了jQuery对象
var $div = $(div)

4. jQuery 原来如此

jQuery揭秘，让我们用DOM的API实现jQuery的addClass()和text()的部分功能：

window.jQuery = function(nodeOrSelector) { 
//jQuery函数参数nodeOrSelector可以传递节点也可以传递CSS选择器
  let nodes = {}
  if  (typeof nodeOrSelector === 'string'){
  //判断传递的参数类型，CSS选择器
 	let temp = document.querySelectorAll(nodeOrSelector) 
 	//找到DOM文档树中所有含有该选择器的节点
 	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) {  //节点添加class属性
  	classes.forEach((value) => {
  		for (let i=0; i<nodes.length; i++) {
  			nodes[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
}
window.$ = jQuery   // 将函数jQuery()简化为 $()

于是，我们就可以使用jQuery了：

var $div = $('div')   // 查找所有div标签
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.text('hi') // 可将所有 div 的 textContent 变为 hi

正如 jQuery 官网所说：write less，do more。或许，这就是大道至简吧。