实现一个jquery的api

2020-01-20  本文已影响0人  卡布i

添加多个classname的函数

nodes.addClass = function(classes){ //以array的方式传参

classes.forEach(function(value){  //forEach() 方法对数组的每个元素执行一次提供的函数。
    for(let i = 0;i<nodes.length;i++){ 
        nodes[i].classList.add(value)}
})

}
div 的 textContent 变为 'hi'

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

window.jQuery = function(nodeOrSelector){ //传一个节点或者字符串

let nodes = {} //定义一个伪数组,用来存要操作的节点
if(nodeOrSelector === 'string') //如果传的是字符串,则用选择器去查找
{
    let temp = document.querySelectorAll(nodeOrSelector)
    for(let i = 0;i<temp.length;i++){
        nodes[i] = temp[i] //用temp作为临时对象,使得返回的nodes不是nodelist,而是伪数组
    }
    nodes.length = temp.length
}
else if(nodeOrSelector instanceof Node){
    nodes = {0:nodeOrSelector,length:1} //如果传入的值是节点,返回的nodes也写成伪数组的形式
}



nodes.addClass = function(classes){ //实现添加classname

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


nodes.setText = function(text){ //实现改变元素的textcontent的功能
    for(let i = 0;i<nodes.length;i++){
        nodes[i].textContent = text}
}

return nodes} //返回nodes,供给外部使用

var div =('div') //封装一个jQuery对象
$div.addClass('red') // 调用addClass函数,将div 的 class 添加一个 red

$div.setText('hi') // 调用setText函数,可将div 的 textContent 变为 hi

上一篇 下一篇

猜你喜欢

热点阅读