一个简单的手写jquery
let $ = jQuery = (function () {
// 伪构造函数,用于jquery对象
function construct(dom, selector) {
let i, len = dom ? dom.length : 0
for (i = 0; i < len; i++)
this[i] = dom[i]
this.length = len
this.selector = selector
return this;
}
// jQuery函数返回的对象类型
function X(elements, selector) {
return construct.call(this, elements, selector)
}
// 添加一些原型方法
X.prototype = {
// 用于遍历对象中的dom树
each(callback) {
Array.prototype.forEach.call(this, function (el, index) {
callback.call(this, index, el)
})
},
find(selector) {
let doms = [];
this.each(function (index, el) {
let childs = el.querySelectorAll(selector);
doms.push(...childs);
})
return new X(doms, selector)
},
eq(i) {
let doms = [];
this.each(function (index, el) {
if (i === index) {
doms.push(this);
}
})
return new X(doms, this.selector)
},
remove() {
this.each(function (index, el) {
this.remove();
})
}
}
function $(selector) {
let doms = document.querySelectorAll(selector)
return new X(doms, selector)
}
// 静态方法
function isFunction(value) { return typeof value === 'function' }
$.isFunction = isFunction;
return $;
})()
本文来自博客园,作者:Bin_x,转载请注明原文链接:https://www.cnblogs.com/Bin-x/p/16028694.html

浙公网安备 33010602011771号