jquery中类选择器的功能如何实现实例详解-js教程-PHP中文网

首页

web前端

js教程

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

伊谢尔伦

Jun 17, 2017 am 10:55 AM

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参数进行比对，如果相同，说明是我们想要的节点，存入事先定义好的数组中。最后返回该数组即可。

三、原生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 &#39;function&#39; :
            domReady(arg);
            break;
        case &#39;string&#39; :
            this.elements = getEle(arg);
            break;
        case &#39;object&#39; :
            this.elements.push(arg);
            break;
    }
}
//DOM ready onload 如果参数是函数，则进行domReady操作
function domReady(fn){
    // FF chrome
    if(document.addEventListener){
        //jquery中已经省略false，false解决低版本火狐兼容性问题
        document.addEventListener(&#39;DOMContentLoaded&#39;,fn,false);
    }else{
        document.attachEvent(&#39;onreadystatechange&#39;,function(){
            if(document.readyState==&#39;complete&#39;){
                fn();
            }
        });
    }
}
function getByClass(oParent,sClass){
    //高级浏览器支持getElementsByClassName直接使用
    if(oParent.getElementsByClassName){
        return oParent.getElementsByClassName(sClass);
    }else{
        //不支持需要选中所有标签的类名来选取
        var res=[];
        var aAll=oParent.getElementsByTagName(&#39;*&#39;);
        for(var i=0;i<aAll.length;i++){
            //选中标签的全部类名是个str=&#39;btn on red&#39;=aAll[i].className   使用正则  reg=/\b sClass \b/g
            var reg= new RegExp(&#39;\\b&#39;+sClass+&#39;\\b&#39;,&#39;g&#39;);
            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 &#39;#&#39;:
                var obj=document.getElementById(str.substring(1));
                aChild.push(obj);
                break;
            //类选择器  eg: .box  使用上面封装的getByClass选取
            case &#39;.&#39;:
                //由于一个标签可以有多个类选择器 所以需要进行循环选取
                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(&#39;.&#39;);
                    var aRes=aParent[i].getElementsByTagName(aStr[0]);
                    var reg=new RegExp(&#39;\\b&#39;+aStr[1]+&#39;\\b&#39;,&#39;g&#39;);
                    //循环选取标签，注意外层已经有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 &#39;eq&#39;:
                            aChild.push(aRes[n]);
                            break;
                        //如果是lt需要将aRes数组中获取到的小于n的标签循环推入aChild中
                        case &#39;lt&#39;:
                            for(var j=0;j<n;j++){
                                aChild.push(aRes[j]);
                            }
                            break;
                        //如果是gt则和lt相反
                        case &#39;gt&#39;:
                           for(var j=n;j<aRes.legth;j++){
                               aChild.push(aRes[j]);
                           }
                            break;
                        //如果是event的话需要隔数添加，注意jquery中的event是从第0开始循环的
                        case &#39;event&#39;:
                            for(var j=0;j<aRes.length;j+=2){
                               aChild.push(aRes[j]);
                            }
                            break;
                        //如果是odd的和event不同的只是从第1项开始循环
                        case &#39;odd&#39;:
                            for(var j=1;j<aRes.length;j+=2){
                                aChild.push(aRes[j]);
                            }
                            break;
                        //如果是first，则将aRes[0]推入aChild
                        case &#39;first&#39;:
                            aChild.push(aRes[0]);
                            break;
                        case &#39;last&#39;:
                            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,&#39;&#39;).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中类选择器的功能如何实现实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

See all articles