需求:
寫一個jQuery函數(shù)昭躺,函數(shù)的功能如下面描述忌锯。傳入選擇器,為所有符合條件的元素添加樣式或改變文本內(nèi)容领炫。
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi
實(shí)現(xiàn)思路:
由功能想到DOM對應(yīng)的API
querySelectorAll()
element.classList.add()
element.textContent
結(jié)構(gòu)表示$div是一個對象偶垮,可以調(diào)用addClass方法。$()函數(shù)需返回一個對象。addClass似舵、setText實(shí)現(xiàn)對應(yīng)功能脚猾。
實(shí)現(xiàn)一個addClass方法
addClass = function(classname) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classname)
}
}
實(shí)現(xiàn)setText功能
setText = function(text) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
jQuery函數(shù)實(shí)現(xiàn),
假如函數(shù)需要返回一個nodes啄枕,且包含有元素的信息婚陪∽逦郑可以構(gòu)造一個對象nodes频祝,由于 querySelectorAll()
返回的是一個包含元素的偽數(shù)組結(jié)構(gòu),因此 遍歷這個列表脆淹,把對應(yīng)元素存儲到nodes里常空,添加length屬性,標(biāo)記元素數(shù)量盖溺。最后函數(shù)里把a(bǔ)ddClass漓糙,setText函數(shù)添加到nodes的屬性里。
window.jQuery = function(selector) {
let nodes = {}
if (typeof selector === 'string') {
let temp = document.querySelectorAll(selector)
for (let i = 0; i < temp.length; i++) {
}
nodes.length = temp.length
nodes.addClass = function(classname) {
}
nodes.setText = function(text) {
}
}
return nodes
}