jQuery模式的初理解:
jQuery是一个升级的DOM,接收旧一个元素返回一个新对象,这个新的对象有新的API;内部还是去调用旧的API。
所以jQuery实质上是一个构造函数,接受一个参数,这个参数可能是节点,然后返回一个对象去操作节点。
下面举例子说明实现一个jQuery的API两个功能有:
1.给获取到的元素增加class
2.给获取到的元素设置文本
首先分别新建html、javaScript、css文件,并且在html文件里引进javaScript和css文件。
window.jQuery = function(nodeOrSelector){
var nodes = {};
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector);
// console.log(temp);
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i];
}
// console.log(nodes)
nodes.length = temp.length;
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length : 1
}
// console.log(nodes)
}
nodes.addClass = function(classes){
//判断传进来的参数是字符串还是数组
if(typeof classes === 'string'){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes);
}
console.log("lalalal")
}else if(classes instanceof Array){
classes.forEach(value =>{
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value);
}
})
}
}
nodes.setText = function(value){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = 'hi';
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass(['yellow','green','blue']) //可将所有 div 的 class 添加数组里面的元素
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi