仿JQuery选择器

JQuery的选择器功能十分强大。

但有时候只使用简单的选择器功能。试着自己使用JS模仿JQuery做了一个。

已实现功能：

• $('#div1') ID选择器 （直接返回对象）
• $('.aCur') 类选择器
• $('div') 元素选择器
• $('#div1 li') 组合选择器
• $('input[type=text]:checked') 属性值选择器
• $('a', myDiv) 选择myDiv下的所有a元素

主要JS代码如下

/*********************************************
  JS模拟JQuery选择器
  by http://www.cnblogs.com/zjfree
  Date 2012-02-22
  
  已实现：
  $('#div1') ID选择器 （直接返回对象）
  $('.aCur') 类选择器
  $('div') 元素选择器
  $('#div1 li') 组合选择器
  $('input[type=text]:checked') 属性值选择器
  $('a', myDiv) 选择myDiv下的所有a元素
/*********************************************/

//q查询表达式 o父对象
function $(q, o){
    //debugger;
    //查询表达式必须为字符串，并且不能为空。
    if(typeof(q)!=='string' || q == '') return [];
    
    //使用空格分割，只处理第一个表达式
    var ss = q.split(' ');
    
    //获取属性
    var attr = '';
    var s = ss[0].split(':')[0];
    if(s != ss[0])
        attr = ss[0].split(':')[1];
    
    var val = s.split('[')[0];
    if(val != s)
        val = s.split('[')[1].replace(/[",\]]/g,'');
    else
        val = '';
    s = s.split('[')[0];
    
    var obj = [];
    var sObj = null;
    //当父对象不存在时，使用document;
    o = o || document;
    switch(s.charAt(0))
    {
        case '#':
            //ID选择器
            sObj = document.getElementById(s.substr(1));
            if(sObj)obj.push(sObj);
            break;
        case '.':
            //类选择器
            var l = o.getElementsByTagName('*');
            var c = s.substr(1);
            for(var i=0; i<l.length; i++)
            if(l[i].className.search('\\b' + c + '\\b')!=-1)obj.push(l[i]);
            break;
        default:
            //根据tag获取元素
            obj = o.getElementsByTagName(s);
            break;
    }
    
    if(val)
    {
        //[t=val]筛选属性匹配
        var l = [];
        var a = val.split('=');
        for(var i=0; i<obj.length; i++)
            if(a.length == 2 && obj[i][a[0]] == a[1]) l.push(obj[i]);
        obj = l;
    }
    
    if(attr)
    {
        //: 筛选属性匹配
        var l = [];
        for(var i=0; i<obj.length; i++)
            if(obj[i][attr]) l.push(obj[i]);
        obj = l;
    }    
    
    if(ss.length > 1)
    {
        //递归处理表达式后续内容
        //父元素为已获取的所有元素
        var l = [];
        for(var i=0; i<obj.length; i++){
            var ll = arguments.callee(q.substr(ss[0].length+1), obj[i]);
            if(ll.tagName) l.push(ll);
            else
            for(var j=0; j<ll.length; j++)l.push(ll[j]);
        }
        obj = l;
    }
    
    if(sObj && ss.length == 1){
        //当为ID选择器时，直接返回对象。
        obj=sObj;
        if(obj)obj.length = 1;
    } else {
        //去除数组中重复元素
        var l = [];
        for(var i=0; i<obj.length; i++)obj[i].$isAdd = false;
        for(var i=0; i<obj.length; i++){
            if(!obj[i].$isAdd){
                obj[i].$isAdd = true;
                l.push(obj[i]);
            }
        }
        obj = l;
    }
    
    return obj;
}

 

下载：https://files.cnblogs.com/zjfree/jsSelect.rar