百度前端技术学院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;

 
时间: 2024-11-05 11:53:10

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

百度前端技术学院2015JavaScript基础部分代码实现

2. JavaScript数据类型及语言基础(一) 2.1 任务描述 创建一个JavaScript文件,比如util.js: 实践判断各种数据类型的方法,并在util.js中实现以下方法: // 判断arr是否为一个数组,返回一个bool值 function isArray(arr) { // your implement } // 判断fn是否为一个函数,返回一个bool值 function isFunction(fn) { // your implement } 解题思路: 1.说道判断类型

百度前端技术学院2015JavaScript基础部分-BOM

5.1 任务描述 实现以下函数 // 判断是否为IE浏览器,返回-1或者版本号 function isIE() { // your implement } // 设置cookie function setCookie(cookieName, cookieValue, expiredays) { // your implement } // 获取cookie值 function getCookie(cookieName) { // your implement } 1.判断是否为IE浏览器,则需要

百度前端技术学院--零基础CSS布局

怎么预览 GitHub 项目里的网页? 一. 在项目源代码页面链接前缀那加上http://htmlpreview.github.com/?举个例子:需要打开的项目页面https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀http://htmlpreview.github.com/?最终链接http://htmlpreview.github.io/?https://github.com/aisinvon/

百度前端技术学院task1.10

任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终

百度前端技术学院task1.9

任务九:使用HTML/CSS实现一个复杂页面 面向人群: 有一定HTML/CSS基础的同学 难度: 中等 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去

百度前端技术学院—-小薇学院(HTML+CSS课程任务)

任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同

(作业)百度前端技术学院 任务八:响应式网格(栅格化)布局

百度前端技术学院 任务八:响应式网格(栅格化)布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFE Task1-8</title> <style> body{ margin:0; } .container{ box-sizing: border-box; padding: 10px;

百度前端技术学院任务-01

这两天发现了一个很不错的学习前端的地方:百度前端技术学院. 里面有不同类型的任务,任务之间的难度是递增的,很适合作为练习. 下面是任务-01的代码(并没有涉及到CSS): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度前端技术学院任务-01</title> </head> <bod

百度前端技术学院task1.12

任务十二:学习CSS 3的新特性 面向人群: 初学者 难度: 简单 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同