HTML部分
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li id="item1">选项1</li>
<li id="item2">选项2</li>
<li id="item3">选项3</li>
<li id="item4">选项4</li>
<li id="item5">选项5</li>
</ul>
</body>
</html>
CSS部分
.blue{color: blue;}
JS 部分
window.jQuery = function(nodeOrSelector) {
let nodes = {};//初始化nodes
if (typeof nodeOrSelector === 'string') { //判断传过来的是不是字符串
let temp = document.querySelectorAll(nodeOrSelector)//伪数组
for (let i = 0; i < temp.length; i++) { //遍历temp
nodes[i] = temp[i]//将temp的key赋给nodes
}
nodes.length = temp.length //将temp的length赋给nodes
} else if (nodeOrSelector instanceof Node) {//传过来是Node的节点
nodes = { //为nodes生成一个伪数组
0: nodeOrSelector,
length: 1
}
}
nodes.setText = function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text;//将nodes的文本内容变成接收到的参数内容
}
}
nodes.addClass = function(classes) {//对数组的每个元素执行一次提供的函数
classes.forEach((value) => {
for (let i = 0; i<nodes.length; i++) {
nodes[i].classList.add(value)//给nodes添加接收到的class属性
}
})
}
return nodes
}
var node2 = jQuery('ul > li')
node2.addClass(['blue']);
node2.setText('hi');
网友评论