淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery是Web前端开发中非常实用的JS库之一。它简化了JavaScript的编写,可以使用少量的代码实现复杂的功能。而其中的$符号封装更是让开发人员非常喜爱的一项功能。

// $封装
function $(selector) {
if (this instanceof $) {
this.eles = document.querySelectorAll(selector)
} else {
return new $(selector)
}
return this
}
$.prototype = {
constructor: $,
each: function (fn) {
for (var i = 0; i< this.eles.length; i++) {
fn.call(this.eles[i], i, this.eles[i])
}
},
css: function () {
var argLen = arguments.length,
arg0 = arguments[0],
arg1 = arguments[1];
if (argLen == 1) {
if (typeof arg0 === "string") {
var styleValue = undefined;
this.each(function (i, e) {
styleValue = getComputedStyle(e, null)[arg0]
})
return styleValue
} else if (typeof arg0 === "object") {
this.each(function (i, e) {
for (var key in arg0) {
e.style[key] = arg0[key]
}
})
}
} else if (argLen == 2) {
this.each(function (i, e) {
e.style[arg0] = arg1
})
}
return this
}
};

上面是一个基本的jQuery $封装代码示例,我们可以看到封装方式主要使用了原型链的方式,实现了each和css这两个方法。

each方法用于遍历选择器所选中的DOM元素,并对每个元素应用一个函数。

css方法用于设置或返回选择器所选中的DOM元素的CSS属性。当传入一个对象时,会将对象中的属性名作为CSS属性名,对每个元素进行设置。当传入两个参数时,第一个参数是CSS属性名,第二个参数为CSS属性值,对每个元素进行设置。

总体来说,jQuery $封装的实际应用十分广泛,不仅可以提高代码的重用性,也能简化代码的编写难度,是前端开发中十分实用的一项技术。