在我看來衔彻,DOM的一些方法過于反直覺了,jQuery就是使用DOM的API包裝成更好用的方法偷办。
下面是學習jQuery舉的一個例子
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi
填寫???艰额,能夠使用addClass
和setText
方法。
function (x){
let nodes = {}
if(typeof x === 'string'){
let temp = document.querySelectorAll(x)
for( let i=0; i <temp.length;i++){
nodes[i]=temp[i]
}
nodes.length=temp.length
}else if(x instanceof node){
nodes = {
0:x,
length:1
}
}
首先椒涯,檢查傳入的參數(shù)的類型柄沮,是字符串則調用document.querySelectorAll
傳入臨時變量,傳入臨時變量的目的是把用document.querySelectorAll
選出來的對象的原型從Nodelist
轉換為Object
废岂,于是就有下面遍歷的步驟祖搓。
nodes.addClass =function (classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
}
nodes.setText = function(someText){
for(var i=0; i<nodes.length; i++){
nodes[i].textContent = someText
}
}
return nodes
}
添加addClass
方法:
讀取傳入的參數(shù),使用for循環(huán)遍歷湖苞,用DOM的classList.add
方法添加class
添加setText
方法:
讀取傳入的參數(shù)拯欧,使用for循環(huán)遍歷,用DOM的textContent
方法添加class