一返敬、jquery函數(shù)會返回一個對象挡闰,通過傳入一個CSS選擇器字符串或者是一個DOM對象作為參數(shù),來拿到包裝過的對象古戴。
該對象上面有包括我們需要的功能函數(shù)欠橘,這些功能函數(shù)會通過閉包來拿到該包裝對象,執(zhí)行對應(yīng)的操作现恼。
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都會返回該包裝對象叉袍,可以進行鏈?zhǔn)讲僮鳌?/p>