实现一个jQuery的API

2019-06-17  本文已影响0人  晓景_49fa

window.jQuery = jQuery('div')

window.$ = jQuery

var $div = $('div')

$div.addClass('red') // 可将所有 div 的 class 添加一个 red

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

window.jQuery = function(nodeOrSelector){

    let nodes = {}

    if(typeof nodeOrSelector === 'string'){

      let temp =  document.querySelector(nodeOrSelector)//伪数组

      for(lei i = 0; i< temp.clientHeight; i++){

          nodes[i] = temp[i]

      }

      nodes.length = temp.length

    }elseif(nodeOrSelector instanceof Node ){

        nodes = {

            0: nodeOrSelector,

            length: 1

        } 

    }

    nodes.getSiblings = function(){

    }

    nodes.addClass = function(classes){

        classes.forEache((value) => {

            for(let i = 0; i< nodes.length; i++){

                nodes[i].classList.add(value)

            }

        });

    }

    nodes.text = function(text){

        if(text === undefined){

            var texts = []

            for(let i = 0; i < nodes.length; i++){

                texts.push(nodes[i].textContent)

            }

            return texts

        }else{

            for(let i = 0; i < nodes.length; i++){

                nodes[i].textContent = text

            }

        }

    }

    return nodes

}

window.$ = jQuery

var $div = $('div')

$div.addClass('red') // 可将所有 div 的 class 添加一个 red

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

上一篇下一篇

猜你喜欢

热点阅读