jQuery 一个简单API的实现

2018-05-31  本文已影响0人  bzwhlll

需求:
写一个jQuery函数,函数的功能如下面描述。传入选择器,为所有符合条件的元素添加样式或改变文本内容。

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

实现思路:

由功能想到DOM对应的API
querySelectorAll() element.classList.add() element.textContent
结构表示$div是一个对象,可以调用addClass方法。$()函数需返回一个对象。addClass、setText实现对应功能。

实现一个addClass方法

addClass = function(classname) {
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(classname)
    }
}

实现setText功能

setText = function(text) {
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent = text
    }
}

jQuery函数实现,

假如函数需要返回一个nodes,且包含有元素的信息。可以构造一个对象nodes,由于 querySelectorAll() 返回的是一个包含元素的伪数组结构,因此 遍历这个列表,把对应元素存储到nodes里,添加length属性,标记元素数量。最后函数里把addClass,setText函数添加到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
}

上一篇 下一篇

猜你喜欢

热点阅读