一、jquery函数会返回一个对象,通过传入一个CSS选择器字符串或者是一个DOM对象作为参数,来拿到包装过的对象。
该对象上面有包括我们需要的功能函数,这些功能函数会通过闭包来拿到该包装对象,执行对应的操作。
window.jQuery = function (selector) {
var node = {};
if (typeof selector === 'string') { // 判断是否为css选择字符串
// 如果是就用querySelectorAll选取它,拿到我们想要的属性。
var temp = document.querySelectorAll(selector);
for (let i = 0; i < temp.length; i++) {
node[i] = temp[i]
}
node.length = temp.length;
} else if (selector instanceof Node){ // 如果是一个DOM对象
node[0] = selector;
node.length = 1;
} else {
throw new Error('只支持css选择器和DOM对象');
}
// 提供给外部的API
node.addClass = function (classes) {
var classArr = classes.split(' ');
for (var i = 0; i < node.length; i++) {
for (var j = 0; j < classArr.length; j++) {
node[i].classList.add(classArr[j]);
}
}
return node;
}
node.setText = function (string) {
for(var i = 0; i < node.length; i++) {
node[i].textContent = string;
}
return node;
}
return node;
}
jQuery('ul > li').setText('hi').addClass('red')
每个API都会返回该包装对象,可以进行链式操作。