我们的目的实现以下功能:
window.jQuery = ???
window.$ = jQuery
var $div = $(‘div’)
$div.addClass(‘red’) // 可将所有 div 的 class 添加一个 red
$div.setText(‘hi’) // 可将所有 div 的 textContent 变为 hi
首先,想用$和jQuery,直接声明成全局变量
window.jQuery = function() {}
window.$ = jQuery
我们要把jQuery和$封装成一个方法,可以选中dom元素。
在调用这个方法时,这里我们可以给它传一个dom元素,也可以传一个选择器(字符串)。
我们默认传递的是一个dom元素,即 let nodes = { 0: nodeOrSelector, length: 1 };
然后再对传递的参数类型用typeof进行判断,如果是'string'类型,那么我们把它作为一个选择器,用querySelectorAll来选中dom元素。
然后,将nodes返回。这就实现了用$和jQuery来作为选择器选中dom元素。而且我们返回的是一个纯净的伪数组,没有原生dom的方法和属性。
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
}
}
return node()
}
然后,我们来对这个函数添加两个方法。
$div.addClass(‘red’) // 可将所有 div 的 class 添加一个 red:
nodes.addClass = function(classes) {
classes.forEach((value) => {
for (let i = 0; i < nodes.length; i++) {
node[i].classList.add(value)
}
})
}
$div.setText(‘hi’) // 可将所有 div 的 textContent 变为 hi:
nodes.text = function(text) {
if (text === undefined) {
var texts = []
for (let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
return texts
} else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
}
最终代码如下:
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) {
classes.forEach((value) => {
for (let i = 0; i < nodes.length; i++) {
node[i].classList.add(value)
}
})
}
nodes.text = function(text) {
if (text === undefined) {
var texts = []
for (let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
return texts
} else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
}
return nodes
}
网友评论