一个类似JQuery的精简版框架

最近看了一段关于javascript的视频，讲的是一个VQuery.js的框架，这是一个类JQuery框架的缩水版，里面有一些通用的方法，这里记录了下来。VQuery方法是这个框架主要的方法，它接收三种类型的参数，具体看下面代码。

VQuery.js代码：

function myAddEvent(obj, sEv, fn)
{if(obj.attachEvent){
//      obj.attachEvent('on'+sEv, fn);//ie上存在bug,当前对象会变为window;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 getComputedSytle(obj,false)[attr];}
}function VQuery(vArg)
{//保存选取的对象this.elements = [];switch(typeof vArg){case 'function':window.onload = vArg;break;case 'string':switch(vArg.charAt(0)){   case '#':var obj = document.getElementById(vArg.substring(1));this.elements.push(obj);break;case '.':this.elements = getByClass(document, vArg.substring(1));break;default: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';}
};
//行间对象隐藏问题 例如span
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].sytle[attr] = value;}}else //获取样式{//sytle只能获取行间样式//return this.elements[0].sytle[attr]return getStyle(this.elements[i],attr);}
}
VQuery.prototype.attr=function(attr, value)
{alert(arguments.length)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 _arguments = arguments;for(var 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 appendArray(arr1, arr2)
{for(var i = 0; i < arr2.length; i++){arr1.push(arr2[i]);}return arr1;
}VQuery.prototype.find=(str)
{var i = 0;var aResult = [];for(i =0; i < this.elements.length; i++){switch(str.charAt(0)){case ".":var aEle = getByClass(this.elements[i],str.substring(1))aResult = aResult.concat(aEle);brea;default://aEle不是数组，不能作为concat函数的参数var aEle = this.elements.getElementsByTagName(str);//aResult = aResult.concat(aEle);appendArray(aResult, aEle);}}var newVQuery = s();newVQuery.elements = aResult;return newVQuery;
}function getIndex(obj)
{var aBrother = obj.parentNode.children;for(var i=0; i < aBrother.length; i++){if(aBrother[i] == obj){return i;}}
}VQuery.prototype.index()
{return getIndex(this.elements[0]);
}function $(vArg)
{return new VQuery(vArg);
}function addClass(obj, sClass) { var aClass = obj.className.split(' ');if (!obj.className) {obj.className = sClass;return;}for (var i = 0; i < aClass.length; i++) {if (aClass[i] === sClass) return;}obj.className += ' ' + sClass;
}function removeClass(obj, sClass) { var aClass = obj.className.split(' ');if (!obj.className) return;for (var i = 0; i < aClass.length; i++) {if (aClass[i] === sClass) {aClass.splice(i, 1);obj.className = aClass.join(' ');break;}}
}

一个类似JQuery的精简版框架相关推荐

封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）...
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
一个只有十行的精简MVVM框架（下篇）
本文来自网易云社区. 让我们来加点互动前面学生信息的身高的单位都是默认m,如果新增一个需求,要求学生的身高的单位可以在m和cm之间切换呢? 首先需要一个变量来保存度量单位,因此这里必须用一个新的Mo ...
WPF 类似jquery blockUI的遮罩Loading加载效果
最近一个小项目想用WPF重写一下,需要一个类似Jquery 的blockUI的遮罩层,在后台执行任务的过程中显示Loading... 网上找了一圈,很难找到一个可以现成使用的.最终在基于网上资料的基础 ...
php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果，想实现一个类似跑马灯的效果, - phpStudy...
基于jquery实现的文字向上跑动类似跑马灯的效果想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个页面代码恭喜187****5204获得1000RBM 恭喜1 ...
用android怎么做一个机器人,怎样写一个类似ROS的易用的android机器人框架（2）
怎样写一个类似ROS的易用的android机器人框架(2) 接下来,我们一步步来实现这个几个目标 ROS式节点通讯的Android实现相关代码实现位于 ai.easy.robot.framework ...
jquery实现：返回顶部（动画·代码精简版）- 代码篇
jquery实现:返回顶部(动画·代码精简版):animate 使用css3的animate属性,一行代码就能实现功能. 动画演示(省略) 代码如下:(精简) <script type=&quo ...
Dubbo面试 - 如何自己设计一个类似 Dubbo 的 RPC 框架？
Dubbo面试 - 如何自己设计一个类似 Dubbo 的 RPC 框架? 面试题如何自己设计一个类似 Dubbo 的 RPC 框架? 面试官心理分析说实话,就这问题,其实就跟问你如何自己设计一个 ...

一个类似JQuery的精简版框架

一个类似JQuery的精简版框架相关推荐

最新文章

热门文章