jQuery可以看作为多个函数的集合,是一个构造函数,它接受一个参数,这个参数可能是node,然后返回一个方法对象去操作这个node。
下面用addClass来举例说吧。
<div>dota21</div>
<div>dota22</div>
<div>dota23</div>
我需要为每个div增加一个名称为red的class,使之文字颜色变为红色
let div=document.querySelectorAll('div')
for(let i=0;i<div.length;i++){
div[i].classList.add('red')}
这是我一般的写法
把函数封装下
function addClass(node,classes){
let div=document.querySelectorAll(node)
for(let i=0;i<div.length;i++){
div[i].classList.add(classes)
}
}
addClass('div','red')
这一个函数就好比一个罐子,为了方便搬运,需要放到一个箱子里面去,我们给箱子命名为box,并作为全局变量
window.box=function(node){
return{
addClass: function(classes){
let div=document.querySelectorAll(node)
for(let i=0;i<div.length;i++){
div[i].classList.add(classes)
}
}
}
}
box('div').addClass('red')
jQuery是可以同时传入node和选择器的
window.box=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;
}
//如果是选择器,那么取到的对象是大于1的,是个伪数组
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1
}//为和上面一致,也用数组表示
}
//上面代码就是对传参进行处理
nodes.addClass=function(classes){
classes.forEach(function(value){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}//闭包:当一个函数使用了函数外面声明的变量时,我们把这个函数和变量称为闭包。
})
}
return nodes;
}
box('div').addClass('red')
这个box其实就可以命名为jQuery,下面为完整代码
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;
}
console.log(nodes)
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1
}
}
nodes.addClass=function(classes){
classes.forEach(function(value){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
nodes.setText=function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=text;
}
}
return nodes;
}
window.$=jQuery
var $div=$('div')
$div.addClass(['red'])