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


    // 实现一个简单的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;

     
  • 相关阅读:
    Laravel 学习笔记之文件上传
    Composer学习
    Laravel 学习笔记之数据库操作——Eloquent ORM
    PHP至Document类操作 xml 文件
    使用promise构建一个向服务器异步数据请求
    遍历DOM树
    关于tp验证码模块
    layui 封装自定义模块
    js进阶之路,关于UI资源的优化(转载)
    关于js 重载
  • 原文地址:https://www.cnblogs.com/zhixuanziben/p/6106982.html
Copyright © 2020-2023  润新知