簡單實(shí)現(xiàn)jQuery API

具體的思路:
1.封裝一個函數(shù),傳入節(jié)點(diǎn)或者選擇器字符串,可以返回偽數(shù)組,偽數(shù)組中包含獲取到的dom元素
==> 對函數(shù)的參數(shù)進(jìn)行判斷,并構(gòu)造一個臨時對象,將節(jié)點(diǎn)或者遍歷選擇器得到的節(jié)點(diǎn)存入臨時對象并返回
2.在這個返回的對象上,可以添加上一下方法操作dom

 window.jQuery = function (selectOrNode) {
        let nodes = {}      //創(chuàng)建一個空對象,最后返回這個對象
        if (typeof selectOrNode === 'string') {   //判斷傳入的是選擇器還是Node節(jié)點(diǎn)
            let items = document.querySelectorAll(selectOrNode)
            for (let i = 0; i < items.length; i++) {
                nodes[i] = items[i]
            }
            nodes.length = items.length  //添加長度標(biāo)記,方便后邊使用
        } else if (selectOrNode instanceof Node) {
            nodes.length = 1
            nodes[0] = selectOrNode
        }

        nodes.addClass = function (classes) {
            for (let i in classes) {
                let name = classes[i] ? "add" : "remove"
                for (let l = 0; l < nodes.length; l++) {
                    nodes[l].classList[name](i)
                }
            }
        }
        nodes.text=function(text){
            if(text === undefined){
                var texts=[]
                for(let i=0;i<nodes.length;i++){
                    console.log(nodes[i])
                    texts.push(nodes[i].textContent)
                }
                console.log(texts)
                return text
            }else {
                for(let i=0;i<nodes.length;i++){
                    nodes[i].textContent = text
                }
            }
        }
        return nodes
    }

  let classes = {
        blue: true,
        a: false,
        c: true
    }

    let node2 = window.jQuery("ul>li")

    node2.addClass.call(node2, classes)
    node2.text.call(node2,"11")





最后編輯于
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,504評論 0 21
  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,813評論 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,803評論 1 45
  • ??DOM 1 級主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)。 ??DOM2 和 DOM3 級則在這個結(jié)構(gòu)...
    霜天曉閱讀 1,599評論 1 3
  • 回顧“2018超聲醫(yī)學(xué)會疑難病例討論會——淺表專場”,會議內(nèi)容豐富,會場不是那么活躍。先來看看分享的病例目錄: 1...
    星月_19ee閱讀 1,023評論 0 0

友情鏈接更多精彩內(nèi)容