jQuery 就是将 DOM 对象重新包装成 jQuery 对象,这个 jQuery 对象中包含了许多 DOM 中不能轻松实现的方法(函数),可以省去很多复杂的代码。
在不使用 jQuery 函数库的情况下自制一个与 jQuery 同样原理的 API:
确认以下两个需求:
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
1. $div.addClass('red') // 可将所有 div 的 class 添加一个 red
2. $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
代码部分:
window.jQuery = function(x){
let nodes
if(typeof x === 'string'){
nodes = document.querySelectorAll(x)
}else{
nodes = {
0 : x,
length : 1
}
}
// 以上相当于一个选择器,根据设置的参数 x 形成一个 nodes 对象
nodes.addClass = function(className){
for(var i=0; i<nodes.length; i++){
nodes[i].classList.add(className)
}
}
nodes.setText = function(someText){
for(var i=0; i<nodes.length; i++){
nodes[i].textContent = someText
}
}
// 以上是为 nodes 对象添加两个方法
return nodes
// 最终返回 nodes 对象,这时 DOM 对象就被包装成了 jQuery 对象
}
window.$ = jQuery
var $div = $('div')
1. $div.addClass('red') // 可将所有 div 的 class 添加一个 red
2. $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
// 调用 nodes 对象中自定义的方法
这样两个 API 就可以实现这两个需求了。它们可以同时给一个或多个元素节点,添加 class 和 textContent。