01、查找节点

JQ可以像CSS设置样式那样，通过.box p span 这样方式来查找节点，使用起来比原生的JS简单方便很多。

实现这个功能之前，我们先把JS查找节点的几个函数封装下，方便后面调用。

 

先把document.getElementById这个函数封装下，如 ：

<div id='box'>box<div>  
  
//id找节点  
function getById(id)  
{  
    var element = document.getElementById(id);  
    return element;  
}  
getById('box').style.color = 'red';  

 

在把getElementsByTagName封装下，如 ：

 

 

<div>div<div>  
<div>div<div>  
<div>div<div>  
  
//tag找节点  
function getByTag(tag)  
{  
    var element = document.getElementsByTagName(tag);  
    return element;  
}  
var arr = getByTag('div');  
for(var i=0; i<arr.length; i++)  
{  
    var ele = arr[i];  
    ele.style.color = 'red';  
}  

最后因为JS没有提供类名来查找节点，所以我们需要手动实现一个。如 ：

 

 

<div class='box'>box</div>  
<div class='box'>box</div>  
<div class='box'>box</div>  
  
//类名找节点  
function getByClass(className)  
{  
    var element = document.getElementsByTagName('*');  
    //用于存放找到的节点  
    var tempArr = new Array();  
    for(var i=0; i<element.length; i++)  
    {  
        var ele = element[i];  
        if (ele.className == className)   
        {  
            tempArr.push(ele);  
        }  
    }  
    return tempArr;  
}  
  
var arr = getByClass('box');  
for(var i=0; i<arr.length; i++)  
{   
    var ele = arr[i];   
    ele.style.color = 'red';  
}  

接下来我们需要定义2个类 ：一个是$、一个是Lcf。并且把上面封装好的函数添加到Lcf类中。如 ：

 

 

function $(ele)  
{  
    return new Lcf(ele);  
}  
  
function Lcf(ele)  
{  
    //用于存储找到的节点  
    this.eleArray = new Array();   
  
    //区分 # . 或者tag  
    switch( ele.charAt(0) )  
    {  
        //id  
        case '#':  
            //ele.substr(1,ele.length) 这句话的作用是把#号去掉  
            this.getById( ele.substr(1,ele.length) );   
        break;  
  
        //类名  
        case '.':  
            this.getByClass( ele.substr(1,ele.length) );   
        break;  
  
        //tag  
        default:  
            this.getByTag( ele );   
        break;  
    }  
}  
  
Lcf.prototype.getById = function(id)  
{  
    var element = document.getElementById(id);    
    this.eleArray.push(element);  
    return this;   
}  
  
Lcf.prototype.getByClass = function(className)    
{    
    var element = document.getElementsByTagName('*');     
    for(var i=0; i<element.length; i++)    
    {    
        var ele = element[i];    
        if (ele.className == className)     
        {    
            this.eleArray.push(ele);    
        }    
    }    
    return this;    
}    
  
Lcf.prototype.getByTag = function(tag)    
{    
    var element = document.getElementsByTagName(tag);    
    for(var i=0; i<element.length; i++)  
    {  
        var ele = element[i];  
        this.eleArray.push(ele);  
    }   
    return this;   
}    
  
  
//测试   
  
//获取id名为box的元素  
$('#box').eleArray[0].style.color = 'red';  
  
//获取类名为box的元素  
var arr = $('.box').eleArray;  
for(var i=0; i<arr.length; i++)  
{  
    var ele = arr[i];  
    ele.style.color = 'red';  
}  
  
//获取tag为div的元素  
var arr = $('div').eleArray;  
for(var i=0; i<arr.length; i++)  
{  
    var ele = arr[i];  
    ele.style.color = 'red';  
}  

现在元素虽然能获取到了，但是设置样式和获取样式太麻烦了。所以我们给Lcf一个设置样式和获取样式的方法，如 ：

 

 

Lcf.prototype.css = function(key, value)  
{     
    //获取参数个数。如果参数只有一个，代表获取值。如果参数为两个，则代表设置值。  
    var parameterLength = arguments.length;  
    for(var i=0; i<this.eleArray.length; i++)  
    {  
        var ele = this.eleArray[i];  
        if (parameterLength == 1)   
        {  
            if (typeof window.getComputedStyle != 'undefined')  //非ie获取方法  
            {  
                return window.getComputedStyle(ele, null)[key];  
            }  
  
            else if (typeof ele.currentStyle != 'undefined')    //ie  
            {  
                return ele.currentStyle[key];  
            }  
        }  
        else  
        {  
             ele.style[key] = value;  
        }  
    }  
  
    return this;  
}  

这样就可以实现和JQ设置css样式的效果了。 如 ：

 

 

$('div').css('color', 'red').css('font-size', '20px');  
alert( $('div').css('font-size') );  

可是如果需要设置多个样式就需要不断的.css(xx, xx).css('xx', 'xx').css('xx','xx')......，很明显这样很繁琐，所以我们修改下css的方法，让它能支持一次性设置多个样式。 如 ：

 

 

Lcf.prototype.css = function(key, value)  
{     
    var parameterLength = arguments.length;  
    if (typeof key == 'object')   
    {     
        //定义一个临时数组 ，存放数据  
        var tempArr = [];  
        for(var i in key)  
        {     
            //''+i+','+key[i] 是获得key和value。比如font-size ： 50px; i就是font-size， key[i]是50px  
            tempArr.push( ''+i+','+key[i] );  
        }  
        //一个个取出eleArray的元素，把tempArr的数据赋值给元素  
        for(var k=0; k<this.eleArray.length; k++)  
        {  
            var ele = this.eleArray[k];  
            for(var z=0; z<tempArr.length; z++)  
            {  
                var spArr = tempArr[z].split(',');  
                ele.style[spArr[0]] = spArr[1];  
            }  
        }  
    }  
    else  
    {  
        for(var i=0; i<this.eleArray.length; i++)  
        {  
            var ele = this.eleArray[i];  
            if (parameterLength == 1)   
            {  
                if (typeof window.getComputedStyle != 'undefined')  //非ie获取方法  
                {  
                    return window.getComputedStyle(ele, null)[key];  
                }  
  
                else if (typeof ele.currentStyle != 'undefined')    //ie  
                {  
                    return ele.currentStyle[key];  
                }  
            }  
            else  
            {  
                 ele.style[key] = value;  
            }  
        }  
    }  
  
    return this;  
}  

修改后，就可以像JQ那样一次性设置多个值了。如 ：

 

 

$('div').css({  
    'font-size' : '50px',  
    'color' : 'red',  
    'font-style' : 'italic'  
});  

 

现在Lcf类还不能支持$(‘#box div p span’)这样方式来查找节点，下面我们修改下代码，让它能支持。

先修改Lcf函数，如 ：

function Lcf(ele)  
{  
    //用于存储找到的节点  
    this.eleArray = new Array();   
  
    //如果此条件成立，则代表用户是以 : $('.box p span') 这样的方式来查找节点  
    if( ele.indexOf(' ') != -1 )  
    {     
        //分割参数  
        var temp = ele.split(' ');  
        for(var i=0; i<temp.length; i++)  
        {  
            var obj = temp[i];  
            switch( obj.charAt(0) )  
            {  
                //id  
                case '#':  
                    //ele.substr(1,ele.length) 这句话的作用是把#号去掉  
                    this.getById( obj.substr(1,obj.length) );   
                break;  
  
                //类名  
                case '.':  
                    this.getByClass( obj.substr(1,obj.length) );   
                break;  
  
                //tag  
                default:  
                    this.getByTag( obj );   
                break;  
            }  
        }  
    }  
    else  
    {  
        //区分 # . 或者tag  
        switch( ele.charAt(0) )  
        {  
            //id  
            case '#':  
                //ele.substr(1,ele.length) 这句话的作用是把#号去掉  
                this.getById( ele.substr(1,ele.length) );   
            break;  
  
            //类名  
            case '.':  
                this.getByClass( ele.substr(1,ele.length) );   
            break;  
  
            //tag  
            default:  
                this.getByTag( ele );   
            break;  
        }  
    }  
}  

然后修改getById函数， 如 ：

Lcf.prototype.getById = function(id)  
{     
    /* 
        修改的部分只有this.eleArray = [];这句。  
        这句的作用是为了防止用户以$('#x1 #x2 #x3')这样的方式来查找节点，虽然大多数人不会这样查找节点。 
        如果不这样写的话，那么eleArray将会保存#x1、#x2、#x3这3个节点，但是很明显用户只想设置#x3这个节点而已。 
        所以需要把前面的元素清空 
    */  
    this.eleArray = [];  
    var element = document.getElementById(id);    
    this.eleArray.push(element);  
    return this;   
}  

接着修改getByClass函数，如 ：

 

Lcf.prototype.getByClass = function(className)    
{    
    //eleArray长度小于等于0， 则代表查找节点只能通过document  
    if (this.eleArray.length <= 0)   
    {  
        var element = document.getElementsByTagName('*');     
        for(var i=0; i<element.length; i++)    
        {    
            var ele = element[i];    
            if (ele.className == className)     
            {    
                this.eleArray.push(ele);    
            }    
        }    
    }  
    //否则查找节点通过eleArray  
    else  
    {  
        var parent = null;  
        var save = new Array();  
        for(var i=0; i<this.eleArray.length; i++)  
        {  
            parent = this.eleArray[i];  
            var tempArray = parent.getElementsByTagName('*');  
            for(var j=0; j<tempArray.length; j++)  
            {  
                if (tempArray[j].className == className)   
                {  
                    save.push( tempArray[j] );  
                }  
            }  
        }  
        this.eleArray = []; //这里清空的原因和getById是一样的。之所以要放在后面清空，是因为前面需要用到eleArray  
        this.eleArray = save;     
    }  
  
    return this;    
}  

最后修改getByTag函数，如 ：

 

 

Lcf.prototype.getByTag = function(tag)    
{    
    if (this.eleArray.length <= 0)   
    {  
        var element = document.getElementsByTagName(tag);    
        for(var i=0; i<element.length; i++)  
        {  
            var ele = element[i];  
            this.eleArray.push(ele);  
        }   
    }  
    else  
    {  
        var parent = null;  
        var save = new Array();  
        for(var i=0; i<this.eleArray.length; i++)  
        {  
            parent = this.eleArray[i];  
            var tempArray = parent.getElementsByTagName(tag);  
            for(var j=0; j<tempArray.length; j++)  
            {  
                save.push( tempArray[j] );  
            }  
        }  
        this.eleArray = [];   
        this.eleArray = save;     
    }  
  
    return this;   
}  

源码下载地址 ：http://download.csdn.net/detail/qq408896436/9445891