jquery中类选择器的功能如何实现实例详解

一、类选择器的概念

类选择器，就是通过class属性获取节点。比如一个html结构中，有三个p标签都具有class=”red”的属性，那么类选择器返回的就是这三个p标签。

在jquery中，我们可以很方便的通过$(“.red”)这种方式按照类获取节点。但是在原生的javascript中，有getElementById(按照id属性获取元素)、getElementsByTagName(按照标签名获取元素)等方法，但是并没有类选择器相关方法。因此，编写原生js实现类选择器的方法非常关键。 

二、类选择器的实现

通过利用原生js编写类选择器，可以更深入的了解js中的DOM相关操作，下面我们就来看一个简单的类选择器是如何实现的：

function getElementsByClass(classnames){
  var classobj = newArray();
  var classint = 0;
  var tags =document.getElementsByTagName("*");
  for(var i in tags){
   if(tags[i].nodeType == 1){
     if(tags[i].getAttribute("class") == classnames){
       classobj[classint] = tags[i];
        classint++;
      }
    }
  }
  return classobj;
}

我们封装了一个getElementsByClass()方法，该方法的效果是：获取所有DOM节点，它们的class属性为选定值，并返回到一个数组中。该方法传递一个参数，即需要选择的class值。

该类选择器的实现方法，首先创建一个空的数组classobj，用来存放获取到的DOM节点。classint变量用来进行索引的表示，方便数组操作。我们利用getElementsByTagName(“*”)方法获取了这个页面上的所有DOM节点(*表示匹配所有)。

取出了所有DOM节点，我们就可以进行判断了。循环遍历取到的每一个节点，如果它的nodeType是1(元素节点)，则利用getAttribute(“class”)方法获取节点的class属性值，并与传递进来的class参数进行比对，如果相同，说明是我们想要的节点，存入事先定义好的数组中。最后返回该数组即可。 

ShopEx助理

一个类似淘宝助理、ebay助理的客户端程序，用来方便的在本地处理商店数据，并能够在本地商店、网上商店和第三方平台之间实现数据上传下载功能的工具。功能说明如下：1.连接本地商店：您可以使用ShopEx助理连接一个本地安装的商店系统，这样就可以使用助理对本地商店的商品数据进行编辑等操作，并且数据也将存放在本地商店数据库中。默认是选择“本地未安装商店”，本地还未安

下载

三、原生js类选择器测试

下面我们来验证一下我们自己编写的类选择器是否正常工作，测试代码如下：

atestAAA

atestBBB

该代码我们利用我们自己封装的方法进行了测试，获取class为atest的元素，鼠标滑过后会弹出对话框。

注意我们封装的这个方法返回的是一个数组，就如同jquery中的sibling()方法一样，需要加入索引才能选中元素。如果一个页面有多个选中元素，可以利用数组循环遍历进行相应操作。

封装了一个盒jquery使用方法相同的库，每次写都有新的想法，所有代码的注释已经写到行间的注释了

/**
 * Created by Jason on 2016/12/31.
 */
//jquery 的构造函数
function Jquery(arg){
    //用来存选出来的元素
    this.elemenets=[];
    switch(typeof arg){
        case 'function' :
            domReady(arg);
            break;
        case 'string' :
            this.elements = getEle(arg);
            break;
        case 'object' :
            this.elements.push(arg);
            break;
    }
}
//DOM ready onload 如果参数是函数，则进行domReady操作
function domReady(fn){
    // FF chrome
    if(document.addEventListener){
        //jquery中已经省略false，false解决低版本火狐兼容性问题
        document.addEventListener('DOMContentLoaded',fn,false);
    }else{
        document.attachEvent('onreadystatechange',function(){
            if(document.readyState=='complete'){
                fn();
            }
        });
    }
}
function getByClass(oParent,sClass){
    //高级浏览器支持getElementsByClassName直接使用
    if(oParent.getElementsByClassName){
        return oParent.getElementsByClassName(sClass);
    }else{
        //不支持需要选中所有标签的类名来选取
        var res=[];
        var aAll=oParent.getElementsByTagName('*');
        for(var i=0;i