直接上代碼
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
}else if (nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1}
}
nodes.addClass = function(classes){
classes.forEach((value)=>{
for(let i = 0; i < nodes.length; i++){
nodes[i].classList.add(value)
}
})
}
nodes.text = function(text){
if(text === undefined){
var texts = []
for(let i = 0;i<nodes.length;i++){
texts.push(node[i].textContent)
}
return texts
}else{
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass(['red']) //將所有div的class添加一個(gè)red
$div.text('hi') //將所有div的textContent變?yōu)閔i
上述代碼的實(shí)現(xiàn)過程:
??首先判斷nodeOrSelector是不是字符串置侍,
是: 在文檔返回的nodeOrSelector元素列表賦值給變量temp绩鸣,遍歷temp命迈,將temp傳遞給nodes膳凝;
否:nodeOrSelector擁有Node.prototype屬性控妻,將偽數(shù)組{0:nodeOrSelector;length:1}賦值給nodes
.addClass函數(shù):傳遞一個(gè)classes參數(shù),遍歷它看尼,將它的每個(gè)value通過nodes[i].classList.add(value)添加到標(biāo)簽上递鹉。
.text函數(shù):傳遞一個(gè)text參數(shù),判斷是否為undefined藏斩,是(認(rèn)定添加textContent):新定義一個(gè)空數(shù)組texts躏结,遍歷nodes,texts.push(node[i].textContent)灾茁;否(認(rèn)定獲取textContent):遍歷nodes,將其中的textContent賦值給text