需要實現(xiàn)的效果:
1.可將所有 div 的 class 添加一個 red
2.可將所有 div 的 textContent 變?yōu)?hi
補全問號處的代碼
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red')
$div.setText('hi')
思路如下:
初始化一個hash對象
判斷傳入?yún)?shù)為字符串(選擇器)還是節(jié)點
①若為字符串 => 尋找對應(yīng)節(jié)點=>放入hash
②若為節(jié)點=>直接放入hash
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
//這里用了一個中間變量temp只是為了讓nodes結(jié)果更純凈罕邀,去掉也可以
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1
}
}
添加兩個方法函數(shù)
使用DOM API
nodes.addClass=function(classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes)
}
}
nodes.setText=function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=text
}
}
return nodes
}
完整代碼如下:
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
//這里用了一個中間變量temp只是為了讓nodes結(jié)果更純凈畅形,去掉也可以
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length:1
}
}
nodes.addClass=function(classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes)
}
}
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')
優(yōu)化:
代碼中addClass方法一次只允許傳一個值,若希望傳多個class诉探,可改為傳數(shù)組日熬,并使用forEach方法;
setText方法傳值后肾胯,會覆蓋掉原本的文本竖席,若希望完善一些,可添加判斷語句
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){
let text=[]
for(i=0;i<nodes.length;i++){
text.push(nodes[i].textContent)
}
return text
}else{
for(let i=0;i<nodes.length;i++){
nodes[i].textContent=text}
}
}
return nodes
}
$div.addClass(['red','blue']) //添加了兩個class
$div.text('hi') // 用hi覆蓋原文本
$div.text() // 返回文本