window.jQuery = ???
window.$ = jQuery
var ('div')
$ div.addClass('red') // 可将所有 div 的 class 添加一个 red
$ div.setText('hi') // 可将所有 div 的 textContent 变为 hi
为了实现以上的需求,我们应该在???处填什么?
答案:
//jquery 简单来说就是一个构造函数,可以接受节点或字符串,如果接受到字符串,会找到字符串对应的节点,然后通过调用DOM的API来进行操作
window.jQuery = function(nodeOrSelector){
//第一步,要判断我们接受的是字符串还是节点
let nodes = {}
if (typeof nodeOrSelector ==='string') {
//这说明是字符串,要先找到对应的节点。然后遍历它,把它放入nodes对象里
let temp = document.querySelectorAll(nodeOrSelector)
for (let i = 0; i < temp.length; i++) {
nodes[i] = temp[i]
}
nodes.length = temp.length
//是节点,为了保持返回值一致,把它也做成对象的形式
}else if(nodeOrSelector instanceof Node){
node = {
0:nodeOrSelector,
length:1
}
}
//添加id,nodes是一个对象,我们操作的是它的value值。使用forEach方法,对value值进行操作
在每个value值上加上类名,还是要遍历操作,然后在节点后面加上类名
nodes.addClass = function(classes){
classes.forEach((value)>={
for (let i = 0; nodes <nodes.length; i++) {
nodes[i].classList.add(value)
}
})
}
//获取和更改节点内部文本数字
//不传参数就表示获取,传参数就表示更改
//获取,新建一个空数组,把节点的textContent放进去,多对象操作还是要先遍历
//传入参数,就对值就行修改,把node的textContent改成传入的Text就可以了
nodes.setText =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
}