一、类选择器的概念
类选择器，就是通过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参数进行比对，如果相同，说明是我们想要的节点，存入事先定义好的数组中。最后返回该数组即可。
三、原生js类选择器测试
下面我们来验证一下我们自己编写的类选择器是否正常工作，测试代码如下：
<!doctype htmlpublic "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<scriptsrc="classtest.js"></script>
<script>
window.onload =function(){
var a = getelementsbyclass("atest");
a[0].onmouseover = function(){
alert("class!!");
}
}
</script>
<style>
.atest{background:blue;width:200px;height:200px;margin:40px;color:white;}
.btest{background:green;width:200px;height:200px;margin:40px;color:white;}
</style>
</head>
<body>
<pclass="atest">atestaaa</p>
<pclass="btest">atestbbb</p>
</html>
该代码我们利用我们自己封装的方法进行了测试，获取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<aall.length;i++){
//选中标签的全部类名是个str='btn on red'=aall[i].classname 使用正则 reg=/\b sclass \b/g
var reg= new regexp('\\b'+sclass+'\\b','g');
if(reg.test(aall[i].classname)){
res.push(aall[i]);
}
}
return res;
}
}
//如果参数是str 进行选择器的操作
function getbystr(aparent,str){
//用来存放选中的元素的数组 这个数组在getele存在，为了每次执行的时候都需要清空，所以使用局部函数的变量
var achild=[];
//aparent开始是[document],再执行完getbystr的时候getele将aparent指向了getbystr函数的返回值achild数组以确保循环父级下面的所有匹配元素
for(var i=0;i<aparent.length;i++){
switch(str.charat(0)){
//id选择器 eg: #box 使用document.getelementbyid选取
case '#':
var obj=document.getelementbyid(str.substring(1));
achild.push(obj);
break;
//类选择器 eg: .box 使用上面封装的getbyclass选取
case '.':
//由于一个标签可以有多个类选择器 所以需要进行循环选取
var ares=getbyclass(aparent[i],str.substring(1));
for(var j=0;j<ares.length;j++){
achild.push(ares[j]);
}
break;
//今天先简单的编写选择器 这里我们假设除了id和类选择器，就是标签选择器
default:
// 如果是li.red 那么用正则来判断
if(/\w+\.\w+/g.test(str)){
//先选择标签，在选择类选择器 使用类选择器的时候重复选择器函数即可
var astr=str.split('.');
var ares=aparent[i].getelementsbytagname(astr[0]);
var reg=new regexp('\\b'+astr[1]+'\\b','g');
//循环选取标签，注意外层已经有i的循环
for(var j=0;j<ares.length;j++){
if(reg.test(ares[j].classname)){
achild.push(ares[j]);
}
}
//如果是li:eq(2) 或者 li:first这样的选择器 书写正则是的时候注意（）可有可以无为？ 有或者没有为* 至少有一个也就是若干个为+ {2,5}这种则为2-5个
}else if(/\w+\:\w+(\(\d+\))?/g.test(str)){
//讲str进行整理 [li,eq,2] 或者 [li,first]
var astr=str.split(/\:|\(|\)/);
//astr[2]是eq、lt、gt传入的参数，这里使用n来保存
var n=astr[2];
//在父级下获取所有匹配astr[0]项的标签
var ares=aparent[i].getelementsbytagname(astr[0]);
//这时候会循环判断astr[1]项是的内容，jquery中经常使用的为eq、lt、gt、even、odd、first、last
switch(astr[1]){
//如果是eq则把第n项传入achild数组即可
case 'eq':
achild.push(ares[n]);
break;
//如果是lt需要将ares数组中获取到的小于n的标签循环推入achild中
case 'lt':
for(var j=0;j<n;j++){
achild.push(ares[j]);
}
break;
//如果是gt则和lt相反
case 'gt':
for(var j=n;j<ares.legth;j++){
achild.push(ares[j]);
}
break;
//如果是event的话需要隔数添加，注意jquery中的event是从第0开始循环的
case 'event':
for(var j=0;j<ares.length;j+=2){
achild.push(ares[j]);
}
break;
//如果是odd的和event不同的只是从第1项开始循环
case 'odd':
for(var j=1;j<ares.length;j+=2){
achild.push(ares[j]);
}
break;
//如果是first，则将ares[0]推入achild
case 'first':
achild.push(ares[0]);
break;
case 'last':
achild.push(ares[ares.length-1]);
break;
}
//属性选择器 eg：input[type=button] 同样适用正则来判断
}else if(/\w+\[\w+\=\w+\]/g.test(str)){
//将属性选择器切成数组 [input,type,button]
var astr=str.split(/\[|\=|\]/g);
var ares=aparent[i].getelementsbytagname(astr[0]);
//在选中标签中选出有ares[1]的属性
for(var j=0;j<ares.length;j++){
//把属性值为ares[2]的标签推入achild中
if(ares[j].getattribute(astr[1])==astr[2]){
achild.push(ares[j]);
}
}
//标签选择器 p、span
}else{
var ares=aparent[i].getelementsbytagname(str);
for(var j=0;j<ares.length;j++){
achild.push(ares[j]);
}
}
break;
}
}
return achild;
}
function getele(str){
//如果是字符串的话先要去除收尾空格 eg:" on replace index play auto "
var arr = str.replace(/^\s+|\s+$/g,'').split(/\s+/g);
var achild = [];
var aparent = [document];
for(var i = 0;i<arr.length;i++){
achild = getbystr(aparent,arr[i]);
aparent = achild
}
return achild;
}
//实现jquery $符号的写法
function $(arg){
return new jquery(arg);
}
以上就是jquery中类选择器的功能如何实现实例详解的详细内容。