百度前端技术学院2015JavaScript基础部分实现自己的小型jQuery

Posted 2020-08-21 智轩资本

// 实现一个简单的Query
function $(selector) {
    var firstChar = selector.charAt(0);
    if (firstChar == "#") {
        var len = selector.split(" ");
        
        if (len.length == 1) {
            return document.getElementById(selector.slice(1,selector.length));
        }
        else {
            var resu = [];
            var getId = document.getElementById(len[0].slice(1,len[0].length));
            for (var i = 0; i < getId.children.length; i++) {
                if(getId.children[i].className == len[1].slice(1,len[1].length)) {
                    resu.push(getId.children[i]);
                };
            }
            return resu[0];
        }
    }
    else if (firstChar == ".") {
        return document.getElementsByClassName(selector.slice(1,selector.length))[0];
    }
    else if (firstChar == "[") {
        if (selector.match(/=/)) {
            var index = selector.indexOf("=");
            var cao1 = selector.slice(1,index);
            var cao2 = selector.slice(index+1,selector.length-1);
            var all = document.getElementsByTagName(‘*‘);
            var res1 = [];
            for (var i = 0; i < all.length; i++) {
                if(all[i].getAttribute(cao1)&&all[i].getAttribute(cao1) == cao2) {
                    res1.push(all[i]);
                }
            }
            return res1[0];
        }
        else {
            var cao = selector.slice(1,selector.length-1);
            var all = document.getElementsByTagName(‘*‘);
            var res = [];
            for (var i = 0; i < all.length; i++) {
                if(all[i].getAttribute(cao)) {
                    res.push(all[i]);
                }
            }
            return res[0];
        }
    }
    else {
        return document.getElementsByTagName(selector)[0];
    }
}

// 给一个element绑定一个针对event事件的响应，响应函数为listener
function addEvent(element, event, listener) {
    // your implement
    element.addEventListener(event,listener,false);
}



// 移除element对象对于event事件发生时执行listener的响应
function removeEvent(element, event, listener) {
    // your implement
    element.removeEventListener(event,listener,false);
}

// 实现对click事件的绑定
function addClickEvent(element, listener) {
    // your implement
    addEvent(element,"click",listener);
}

// 实现对于按Enter键时的事件绑定
function addEnterEvent(element, listener) {
    // your implement
    element.onkeyDown = function(event) {
        var e = event || window.event;
        if (e&&e.keyCode == 13) {
            listener();
        }
    }
}

function delegateEvent(element, tag, eventName, listener) {
    $.on(element,eventName,function(){
        var e = event ||window.event;
        var target = e.target ||e.srcElement;
        if (target.tagName == tag) {
            listener();
        }
    })
}

$.on = addEvent;
$.un = removeEvent;
$.click = addClickEvent;
$.enter = addEnterEvent;
$.delegate = delegateEvent;