01、查找节点

来源：互联网发布：python getopt函数编辑：程序博客网时间：2024/06/14 01:55

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

0 0