在我看来,DOM的一些方法过于反直觉了,jQuery就是使用DOM的API包装成更好用的方法。
下面是学习jQuery举的一个例子
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
填写???,能够使用addClass
和setText
方法。
function (x){
let nodes = {}
if(typeof x === 'string'){
let temp = document.querySelectorAll(x)
for( let i=0; i <temp.length;i++){
nodes[i]=temp[i]
}
nodes.length=temp.length
}else if(x instanceof node){
nodes = {
0:x,
length:1
}
}
首先,检查传入的参数的类型,是字符串则调用document.querySelectorAll
传入临时变量,传入临时变量的目的是把用document.querySelectorAll
选出来的对象的原型从Nodelist
转换为Object
,于是就有下面遍历的步骤。
nodes.addClass =function (classes){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
}
nodes.setText = function(someText){
for(var i=0; i<nodes.length; i++){
nodes[i].textContent = someText
}
}
return nodes
}
添加addClass
方法:
读取传入的参数,使用for循环遍历,用DOM的classList.add
方法添加class
添加setText
方法:
读取传入的参数,使用for循环遍历,用DOM的textContent
方法添加class