最近看了一段关于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;
}
}
}