window.jQuery = function (nodeOrSelector){ //在全局環(huán)境下創(chuàng)建 jQuery 對象,創(chuàng)建之初想到節(jié)點(diǎn)有可能是字符串的情況
let nodes = {} //創(chuàng)建一個容納所有符合條件的節(jié)點(diǎn)純對象組
if (typeof nodeOrSelector === 'string') { //判斷傳入的節(jié)點(diǎn)類型是否為字符串
let temp = document.querySelector(nodeOrSelector) //如果為字符串,則獲取所有符合條件的節(jié)點(diǎn),返回一個偽數(shù)組
for(let i = 0;i< temp.length;i++){ //遍歷這個得到的偽數(shù)組
nodes[i] = temp[i] // 將偽數(shù)組內(nèi)的內(nèi)容傳給空對象 nodes
}
nodes.length = temp.length // 傳遞完畢,將偽數(shù)組內(nèi)的 length 屬性的 key 及value傳給 nodes 對象
} else if(nodeOrSelector instanceof Node){ //如果函數(shù)傳入的參數(shù)確為節(jié)點(diǎn)
nodes = { //將參數(shù)傳給 nodes 對象的第一個屬性‘0’中,同時設(shè)定對象內(nèi)的 length 值為1
0:nodeOrSelector,
length:1
}
}
nodes.addClass:function(value){ //為 nodes 對象設(shè)定方法‘a(chǎn)ddClass’,方法參數(shù)為 value
for(let i=0; i<nodes.length;i++){ //遍歷 nodes 對象內(nèi)的所有屬性,也就是節(jié)點(diǎn)
nodes[i].classList.add(value) //為 nodes 內(nèi)每個屬性(也就是節(jié)點(diǎn))的class 加上傳入的 value 值
}
},
nodes.setText:fucntion(value){ //為 nodes 對象設(shè)定方法‘setText’,方法參數(shù)為 value
for(let i=0; i<nodes.length;i++){ //遍歷 nodes 對象內(nèi)的所有屬性,也就是節(jié)點(diǎn)
node[i].textContent = value //給 nodes 內(nèi)每個屬性(也就是節(jié)點(diǎn))的文本替換為傳入的 value 值
}
}
return nodes //返回 nodes 對象
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi
初步實(shí)現(xiàn) jQuery 思想的細(xì)節(jié)記錄
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 成長記錄-連載(三十六) ——我的第一篇五千字長文,說了什么,你一定想不到 并不是不想每天寫公眾號,而是之前思考怎...
- 摘要 本系列文章將詳細(xì)分析iOS的MVVMR架構(gòu)模式,并基于Swift的響應(yīng)式、函數(shù)式編程框架RxSwift提供相...
- 孩子學(xué)習(xí)英語,要從最最簡單,最最基礎(chǔ)的開始,而且都是要分階段的學(xué)習(xí),那么今天我來告訴大家有那些階段,這些是常熟愛貝...
- 一 小說接龍,接作者樹/思文/清風(fēng)/范老師 埋在時光里的秘密—是夢還是現(xiàn)實(shí)? 當(dāng)我再次醒來時,房間一片寂靜;除了兩...
- 雅思的大作文是雅思考試過程中最有挑戰(zhàn)的部分,也是限制很多同學(xué)4個7,4個8的弱項(xiàng)。 這個系列的文章,我將前人的經(jīng)驗(yàn)...