您现在的位置:首页 >> 前端 >> 内容

实现一个简单的Query-ife/2015/task0002

时间:2017/2/17 9:24:21 点击:

  核心提示:// 实现一个简单的Queryfunction $(selector) {}// 可以通过id获取DOM对象,通过#标示,例如$(#adom); // 返回id为adom的DOM对象// 可以通过ta...
// 实现一个简单的Query
function $(selector) {

}

// 可以通过id获取DOM对象,通过#标示,例如
$("#adom"); // 返回id为adom的DOM对象

// 可以通过tagName获取DOM对象,例如
$("a"); // 返回第一个对象

// 可以通过样式名称获取DOM对象,例如
$(".classa"); // 返回第一个样式定义包含classa的对象

// 可以通过attribute匹配获取DOM对象,例如
$("[data-log]"); // 返回第一个包含属性data-log的对象

$("[data-time=2015]"); // 返回第一个包含属性data-time且值为2015的对象

// 可以通过简单的组合提高查询便利性,例如
$("#adom .classa"); // 返回id为adom的DOM所包含的所有子节点中,第一个样式定义包含classa的对象

自己的思路:

先考虑只有一个选择器 再考虑有子选择器
function $$(selector,root){
    var elements=[],allChildren;
    root=root||document;
    switch(selector.charAt(0)){
        case "#":
            elements.push(root.getElementById(selector.substring(1)));
            break;
        case ".":

            if(root.getElementsByClassName){
                elements.push.apply(elements,root.getElementsByClassName(selector.substring(1)));
            }else{
                var classReg=new RegExp("\\b"+selector.substring(1)+"\\b");
                allChildren=root.getElementsByTagName("*");
                for(var i=0,len=allChildren.length;i<len;i++){ if(classreg.test(allchildren[i].classname)){="" elements.push(allchildren[i]);="" }="" break;="" case="" "[":="" if(selector.indexof("=")==-1){
                allChildren=root.getElementsByTagName(" *");="" for(var="" i="0,len=allChildren.length;i

作者:网络 来源:AaronWellb