想要实现一个以下功能
用原生js的DOM API来实现一个类jQuery API的功能
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
1、首先获取DOM元素
- 判断传入的参数是元素id还是选择器
如果传入参数是个选择器,我们通过DOM API里面的querySelectorAll()
方法得到这个选择器所代表的节点,并把节点存入一个我们预先定义好的对象nodes中;
如果传入参数是个元素的id,直接在nodes中将其存入并设置好length的值即可。
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
}
}
2、 封装一个addClass()方法
遍历nodes,利用DOM API的classList
和add()
添加class,封装成一个addClass函数
function addClass(nodes, classes) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classes)
}
}
然后使用命名空间的用法改写成这样
nodes.addClass = function(classes) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classes)
}
}
3、封装一个setText()方法
同理,封装遍历nodes,利用DOM API的textContent修改文本内容,封装成一个setText函数
nodes.setText = function(text) {
for (let i =0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
4、最终结果
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(classes) {
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.add(classes)
}
}
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
网友评论