实现一个 jQuery 的 API
2019-08-27 本文已影响0人
饥人谷_ika0s
这个api的功能：
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
1.先搭出总体结构,对传入参数进行类型判断，无论传入的是选择器还是node节点，都返回一个对象
window.jQuery = function(nodesOrSelector) {
let nodes = {};
if(typeof nodesOrSelector==='string'){//如果传入的是选择器
nodes=document.querySelectorAll(nodeOrSelector);
}else if((nodesOrSelector instanceof Node)){//如果传入的是node节点
nodes={'0':nodesOrSelector,'length':1}
}
nodes.addClass = function(classes) {};
nodes.setText = function(text) {};
return nodes
};
window.$ = jQuery;
2.两个功能的实现
window.jQuery = function(nodesOrSelector) {
let nodes = {};
if (typeof nodesOrSelector === "string") {
//如果传入的是选择器
nodes = document.querySelectorAll(nodesOrSelector);
} else if (nodesOrSelector instanceof Node) {
//如果传入的是node节点
nodes = { '0': nodesOrSelector, 'length': 1 };
}
nodes.addClass = function(classes) {
//两层循环，外层遍历node，每次遍历给node添加所有的class，所以加一个内循环，遍历class
for (let i = 0; i < nodes.length; i++) {
classes.forEach(value => {
nodes[i].classList.add(value);
});
}
};
nodes.setText = function(text) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text;
}
};
return nodes;
};
可以看到每个div的颜色变成了红色，里面也添上了文字
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
</head>
<style>
div {
width: 50px;
height: 30px;
margin-bottom: 10px;
background-color: blue;
}
.red {
background-color: red;
}
</style>
<body>
<div></div>
<div></div>
</body>
<script>
window.jQuery = function(nodesOrSelector) {
let nodes = {};
if (typeof nodesOrSelector === "string") {
//如果传入的是选择器
nodes = document.querySelectorAll(nodesOrSelector);
} else if (nodesOrSelector instanceof Node) {
//如果传入的是node节点
nodes = { 0: nodesOrSelector, length: 1 };
}
nodes.addClass = function(classes) {
//两层循环，外层遍历node，每次遍历给node添加所有的class，所以加一个内循环，遍历class
for (let i = 0; i < nodes.length; i++) {
classes.forEach(value => {
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"]);
$div.setText("hi");
</script>
</html>
