Jquery源码探索
封装原理
这里参考的jquery来进行封装的一个常用方法的一个库,可作为自己的一个库
原理:创建一个构造函数,将所有方法放在该构造函数原型里,访问$()方法时,返回这个构造函数的实例化,这样就简单的实现了jquery的用法
function VQuery(vArg) { //用来保存选中的元素 this.elements=[]; switch(typeof vArg) { case 'function': //window.onload=vArg; myAddEvent(window, 'load', vArg); break; case 'string': switch(vArg.charAt(0)) { case '#': //ID var obj=document.getElementById(vArg.substring(1)); this.elements.push(obj); break; case '.': //class this.elements=getByClass(document, vArg.substring(1)); break; default: //tagName this.elements=document.getElementsByTagName(vArg); } break; case 'object': this.elements.push(vArg); } } VQuery.prototype.click=function (fn) { var i=0; for(i=0;i<this.elements.length;i++) { myAddEvent(this.elements[i], 'click', fn); } }; VQuery.prototype.show=function () { var i=0; for(i=0;i<this.elements.length;i++) { this.elements[i].style.display='block'; } }; VQuery.prototype.hide=function () { var i=0; for(i=0;i<this.elements.length;i++) { this.elements[i].style.display='none'; } }; VQuery.prototype.hover=function (fnOver, fnOut) { var i=0; for(i=0;i<this.elements.length;i++) { myAddEvent(this.elements[i], 'mouseover', fnOver); myAddEvent(this.elements[i], 'mouseout', fnOut); } }; VQuery.prototype.css=function (attr, value) { if(arguments.length==2) //设置样式 { var i=0; for(i=0;i<this.elements.length;i++) { this.elements[i].style[attr]=value; } } else //获取样式 { //return this.elements[0].style[attr]; return getStyle(this.elements[0], attr); } }; VQuery.prototype.attr=function (attr, value) { if(arguments.length==2) { var i=0; for(i=0;i<this.elements.length;i++) { this.elements[i][attr]=value; } } else { return this.elements[0][attr]; } }; VQuery.prototype.toggle=function () { var i=0; var _arguments=arguments; for(i=0;i<this.elements.length;i++) { addToggle(this.elements[i]); } function addToggle(obj) { var count=0; myAddEvent(obj, 'click', function (){ _arguments[count++%_arguments.length].call(obj); }); } }; VQuery.prototype.eq=function (n) { return $(this.elements[n]); }; function appendArr(arr1, arr2) { var i=0; for(i=0;i<arr2.length;i++) { arr1.push(arr2[i]); } } VQuery.prototype.find=function (str) { var i=0; var aResult=[]; for(i=0;i<this.elements.length;i++) { switch(str.charAt(0)) { case '.': //class var aEle=getByClass(this.elements[i], str.substring(1)); aResult=aResult.concat(aEle); break; default: //标签 var aEle=this.elements[i].getElementsByTagName(str); //aResult=aResult.concat(aEle); appendArr(aResult, aEle); } } var newVquery=$(); newVquery.elements=aResult; return newVquery; }; function getIndex(obj) { var aBrother=obj.parentNode.children; var i=0; for(i=0;i<aBrother.length;i++) { if(aBrother[i]==obj) { return i; } } } VQuery.prototype.index=function () { return getIndex(this.elements[0]); }; function $(vArg) { return new VQuery(vArg); } function myAddEvent(obj, sEv, fn) { if(obj.attachEvent) { obj.attachEvent('on'+sEv, function (){ fn.call(obj); }); } else { obj.addEventListener(sEv, fn, false); } } function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var i=0; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }