封装2个类似jQuery的函数:addClass和setText

Nov 2, 2018


封装2个类似jQuery的函数:addClass和setText

先上代码

注:jQuery并不是这么写的

window.jQuery = function(nodeOrSelector){
    let nodes = {}
    if(typeof nodeOrSelector === 'string'){
        let temp = document.querySelectorAll(nodeOrSelector)
        for(let i=0; i<temp.length; i++){
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    }else if(nodeOrSelector instanceof Node){
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }

    nodes.addClass = function (className){
        for(let i = 0; i<nodes.length; i++){
          nodes[i].classList.add(className)
        }
    }
 
    nodes.setText = function(text){
        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

最根本的方法就是:document.querySelectorAll(nodeOrSelector)nodes[i].classList.add(className)nodes[i].textContent = text

给window对象加一个属性jQuery,它是一个函数,返回值为一个对象nodes。在里面要实现获取DOM,增加calss和设置textContent。最后面window.$ = jQuery是为了使用$,更简便,代码更少。

获取DOM是用document.querySelectorAll(nodeOrSelector)。这里判断参数是否是字符串。

增加class是用的nodes[i].classList.add(className)

设置textContent是用的nodes[i].textContent = text