所谓jQuery
不过是个提供很多方便使用的 API 的函数,所以可以这也大体模拟一下几个简单的功能。
首先,我们在 window
下创建一个 window.jQuery
函数,并提供一个形参。
window.jQuery = function(nodeOrSelector) {
//没错,这就是 jQuery
}
然后,我们人性化的判断一下形参的类型是 node结点
还是 选择器语句
,并把形参赋值给对象 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
}
}
好了,现在我们可以声明所需函数利用 DOM
操作对伪数组 nodes
进行闭包操作了。
nodes.addClass = function(value){
for (let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
}
nodes.setText = function(text){
for (let i = 0;i < nodes.length; i++){
nodes[i].textContent = text
}
}
最后,别忘了返回伪数组 nodes
。
return nodes
优化:jQuery
太难拼了,我们选择 $
符号代替它
window.$ = jQuery
好了,现在我们就可以用自己写的jQuery
来方便快捷实现 DOM
操作了
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi