仿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++;
        })
    }
}


目录
相关文章
|
7月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
95 7
jQuery幸运大转盘抽奖活动代码
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
67 0
|
JavaScript 开发者
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
119 0
|
4月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
45 1
|
1月前
|
JavaScript
基于jQuery实现文字点击验证代码
jQuery文字点击验证代码基于jquery-3.4.1.min.js制作,按顺序,依次点击文字通过验证。
31 5
|
1月前
|
JavaScript
jQuery实现的星级打分带评价及颜色区分代码
jQuery实现的星级打分带评价及颜色区分效果代码是一款支持自定义评论颜色的星级评价打分,其中红色为一星级,差评、绿色位五星级、满分好评,本段代码适应于所有网页使用,有需要的朋友们就来下载使用吧。
31 2
|
7月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
117 1
|
6月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
39 0