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 $封装的实际应用十分广泛,不仅可以提高代码的重用性,也能简化代码的编写难度,是前端开发中十分实用的一项技术。