在這里我們將實(shí)現(xiàn)兩個(gè)功能帜矾,給一個(gè)div元素戳粒,添加多個(gè)classname悔叽,并把div元素的內(nèi)容全部輸出為‘hi’
首先我們先實(shí)現(xiàn)添加多個(gè)classname的函數(shù):
``` nodes.addClass = function(classes){ //以數(shù)組的方式傳參
classes.forEach(function(value){
for(let i = 0;i<nodes.length;i++){ //遍歷這個(gè)節(jié)點(diǎn)偽數(shù)組
nodes[i].classList.add(value);}
})
}
實(shí)現(xiàn)把div元素的內(nèi)容全部輸出為‘hi’的函數(shù):
nodes.setText = function(text){
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text;}
}
接下來我們開始實(shí)現(xiàn)jQuery的API
window.jQuery = function(nodeOrSelector){ //傳一個(gè)節(jié)點(diǎn)或者字符串
let nodes = {}; //定義一個(gè)偽數(shù)組爽篷,用來存要操作的節(jié)點(diǎn)
if(nodeOrSelector === 'string') //如果傳的是字符串绑咱,則用選擇器去查找
{
let temp = document.querySelectorAll(nodeOrSelector);
for(let i = 0;i<temp.length;i++){
nodes[i] = temp[i]; //用temp作為臨時(shí)對(duì)象绰筛,使得返回的nodes不是nodelist,而是偽數(shù)組
}
nodes.length = temp.length;
}
else if(nodeOrSelector instanceof Node){
nodes = {0:nodeOrSelector,length:1} //如果傳入的值是節(jié)點(diǎn),返回的nodes也寫成偽數(shù)組的形式
}
nodes.addClass = function(classes){ //實(shí)現(xiàn)添加classname
classes.forEach(function(value){
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.add(value);}
})
}
nodes.setText = function(text){ //實(shí)現(xiàn)改變?cè)氐膖extcontent的功能
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text;}
}
return nodes;} //返回nodes描融,供給外部使用
var $div = $('div') //封裝一個(gè)jQuery對(duì)象
$div.addClass('red') // 調(diào)用addClass函數(shù)
$div.setText('hi') // 調(diào)用setText函數(shù)