测试样本
//事实证明通过如下方式不管传入的是id选择器还是class选择器都是可行的
document.querySelectorAll(selector)
// 因为我们获取到的是一个NodeList数组,那么当然可以通过下标获取(注意不要越界)
document.querySelectorAll(selector)[0]
// 添加完毕以后查看DOM结构的class中就多了一个class属性world
document.querySelectorAll(".hello").forEach(d=>{
d.classList.add("world")
})
// 我们希望给每一个元素添加上宽、高、颜色几个属性
let css = {
"width": "2rem",
"height": "1rem",
"color": "red"
}
document.querySelectorAll(".hello").forEach(d=>{
Object.keys(css).map(k =>{
d.style[k] = css[k];
});
})
上面的方式看起来比较麻烦,每次都要调用,如何做到只调用一次即可实现并且像jq那样做到链式调用。
通过上述的一顿操作可以实现链式调用,越来越像那么回事了。
换成es6语法进行简单的封装以后,发现依然可以实现,而且结构越来越清晰了呢,另外对于html、text等方法没有实现。可以自己尝试弄一哈
手动试一下,敲一遍加深记忆,为了防止复制粘贴尽量都换成图片给大家练练手啦