jQuery API的实现
自己模拟jQuery的一个API
预览：http://js.jirengu.com/paluxujewu/1/edit?html,js,output
window.jQuery = function(nodeOrSelector) {
var nodes = {} //给nodes声明一个空的对象
if (typeof nodeOrSelector === 'string') {//判断传入的nodeOrSelector是节点还是选择器
let temp = document.querySelectorAll(nodeOrSelector)//声明如果是选择器就把这个选择器赋值给temp
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]//遍历这个选择器返回的伪数组，并且把这个伪数组里的东西赋值给nodes
}
nodes.length = temp.length
} else if (nodeOrSelector instanceof Node) {//如果传入的参数的原型中有Node.prototype
nodes = {
0: nodeOrSelector,
length: 1//将参数传入nodes
}
}
nodes.addClass = function(classes) {//整个伪造的jQuery的API都是用DOM API实现的
classes.forEach((value) => {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(value)
}
})
}
nodes.getText = function() {
var texts = []
for (let i = 0; i < nodes.lenght; i++) {
texts.push(nodes[i].textContent)
}
return texts
}
nodes.setText = function(text) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
return nodes
}
var a = jQuery("li")
a.addClass(['blue'])
a.setText('hi')
简单来说jQuery就是一个构造函数，给他传入一个参数，这个参数可能是节点，jQuery给你返回一个方法对象，去操作节点。
- 引用jQuery，就设置一个<script>就好了
- jQuery的API也是通过原生DOM来实现的。
