您的位置:首页 > Web前端 > JQuery

模仿jquery的一些实现 第二版

2016-08-11 22:45 316 查看
具体如下:

//w作为window的形参,就表示window
(function(w) {

// 定义一个全局的window.wyl变量,就类似于jquery里的$,Jquery对象
w.wyl;
/**
* 模仿$(domObj)的形式,通过wyl(domObj)的方式把一个dom转成wyl对象
*
* @param para
* @returns {wyl} 这里的selector暂时只能是dom对象
*/
wyl = function(selector) {
this._selector = selector;
if (this == window) {
// 我自己原来写的
// return this.wyl;
return new wyl(selector);
} else {
// 用来保存选中的元素
this.elements = [];

// 判断selector的类型,因为jquery(xxx)中的xxx总共有三种类型,1 function ,2 字符串 ,如
// '#aa','.my'等等 ; 3 dom对象也就是object

switch (typeof selector) {
case 'function':
this.wylAddEvent(w, 'load', selector);
break;
// 模拟 #xx选择器
case 'string':
switch (selector.charAt(0)) {
case '#':// 按照id选择器
var obj = document.getElementById(selector.substring(1));
this.elements.push(obj);
break;
case '.':// 按照class选择器
this.elements = getEleByClas(document, selector
.substring(1));
break;
default: // 按照tagName
this.elements = document.getElementsByTagName(selector);
}
break;
case 'object':
this.elements.push(selector);
break;
default:
break;
}

// 根据name获取dom
/* var dom_ = document.getElementsByName('' + selector); */
/**
* 根据 document.getElementsByName('' +selector);的形式获取到的dom对象
* 有length属性,而通过getElementById获取的dom对象没有length属性
*
*/
/*
* if (dom_.length) { alert(dom_.length); } else {
* alert(dom_.innerHTML + '目前这个框架只能通过传入name属性来使用,无法通过id来解析dom对象'); }
*/

// 作用:返回当前对象,即返回window.wyl这个对象
// return this;
var this_ = [].push.apply(this, this.elements);
// 注意这里返回的不是this_而是this
return this;
}

}
// 根据class进行选择,即模拟class选择器
wyl.getEleByClas = function(oParent, sClass) {
var aEle = document.getElementsByTagName("*");
var aResults = [];
for (i = 0; i < aEle.length; i++) {
if (aEle[i].className == sClass) {
aResults.push(aEle[i]);
}
}
return aResults;
}

wyl.prototype.wylAddEvent = wyl.wylAddEvent = function(obj, sEv, fn) {
if (obj.attachEvent) {
obj.attachEvent('on' + sEv, fn);
} else {
obj.addEventListener(sEv, fn, false);
}
}

// wyl.prototype.isArr的作用:在所有的wyl对象上加上isArr(para)的function,
wyl.prototype.isArr = wyl.isArr = function(para) {
/**
* 在wyl对象上添加工具方法isArr(obj) 实例:var flag = wyl.isArr(obj); 如果为true那么就说明是数组
*/
if (typeof para == 'object' && para instanceof Array) {
return true;
} else {
return false;
}
}

/**
* 实现类似框架中的linkbutton()功能的方法 框架中的使用实例: $obj.linkbutton({ disabled:true });
*
*/
wyl.prototype.print = wyl.print = function(para) {
alert(para);
return this;
}

wyl.prototype.linkbutton = wyl.linkbutton = function(para) {
var _type = typeof para;
if (_type != 'object') {
return this.print('传入的参数必须是object');
}
// 存放传入的obejct类型的参数
var para_ = para || {};
var f = para_.disabled;
if (f == true) {
$(this).removeClass();
$(this).addClass('l-btn-disabled');
return this;
} else {
$(this).removeClass();
$(this).addClass('l-btn-abled');
return this;
}
}

// 传入window对象
})(window)


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: