仿jquery的几行代码

简介: 仿jquery的几行代码

单纯自己看,没写注释。。。

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, len = aEle.length; i < len; i++) {
        if (aEle[i].className == sclass) {
            aResult.push(aEle[i])
        }
    }
    return aResult;
}
function vq(vArg) {
    this.elements = [];
    switch (typeof vArg) {
        case "function":
            myAddEvent(window, "load", 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)
    }
}
vq.prototype.click = function (fn) {
    for (var i = 0; i < this.elements.length; i++) {
        myAddEvent(this.elements[i], "click", fn);
    }
}
function $(vArg) {
    return new vq(vArg)
}
vq.prototype.show = function () {
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.display = "block";//咱不考虑行间对象
    }
}
vq.prototype.hide = function () {
    for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style.display = "none"
    }
}
vq.prototype.hover = function (fnOver, fnOut) {
    for (var i = 0; i < this.elements.length; i++) {
        myAddEvent(this.elements[i], "mouseover", fnOver);
        myAddEvent(this.elements[i], "mouseout", fnOut)
    }
}
vq.prototype.css = function (attr, value) {
    if (arguments.length == 2) {//设置样式
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].style[attr] = value;
        }
    } else {//获取样式
        return getStyle(this.elements[0], attr);
    }
}
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr]
    } else {
        return getComputedStyle(obj, false)[attr]
    }
}
vq.prototype.toggle = function () {
    for (var i = 0; i < this.elements.length; i++) {
        addToggle(this.element
        s[i])
    }
    function addToggle(obj) {
        var count = 0;
        myAddEvent(obj, "click", function () {
            arguments[count%arguments.length].call(obj);
            count++;
        })
    }
}


目录
相关文章
|
1月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
34 7
jQuery幸运大转盘抽奖活动代码
|
5月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
30 0
|
7月前
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
65 0
|
7月前
|
JavaScript 开发者
|
3月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
41 1
|
1月前
|
JavaScript
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
18 1
jQuery模态框弹窗提示代码
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
21 0
|
9月前
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
73 0
|
4月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
31 0