zoukankan      html  css  js  c++  java
  • querySelectorAll选择器的js实现

    自从标准浏览器增加了querySelector这个类JQ的方法后,选择一个元素变成了一件so easy的事情。但是某些浏览器还是不支持。使用jq库又有点太大,其实可以自己动手实现这个选择器,具体代码如下

        function getByClass(sele,parent){
                var parent = parent||document;
                if(parent.querySelectorAll){
                    return parent.querySelectorAll(sele);
                }else if(parent.getElementsByClassName){
                    return parent.getElementsByClassName(sele.slice(1));
                }else{
                    var tags = parent.getElementsByTagName("*");
                    var targets=[];
                    for(var i=0;i<tags.length;i++){
                        if(tags[i].className.indexOf(sele.slice(1))>-1){
                            targets.push(tags[i]);
                        }
                    }
                    return targets;
                }
            }
            function find(sele,parent){
                var parent=parent||document;
                // console.log("sele:",sele,";parent:",parent);
                var selectorArr = sele.split(/s+/);
                var selector = selectorArr.shift();
                // console.log("selector:",selector);
                var targets=[];
                if(selector.indexOf("#")>-1){
                    targets.push(document.getElementById(selector.slice(1)));
                }else if(selector.indexOf(".")>-1){
                    targets=getByClass(selector,parent);
                }else{
                    targets = parent.getElementsByTagName(selector);
                }
                var result=[];
                if(selectorArr.length>0){
                    for(var i=0;i<targets.length;i++){
                        var tempResult=Array.prototype.slice.call(find(selectorArr.join(" "),targets[i]),0);
                        result=result.concat(tempResult);
                    }
                }else{
                    return targets;
                }
                return result;
            }

    原理是将网友传入的参数分解,前面的通过迭代选择不断的更新父元素,最后一个选择器就是在父元素的子元素中选择匹配的元素。

    案例网址:http://imgad0.pconline.com.cn/ivy/image/20172/21/14876672047970.html

  • 相关阅读:
    页面滚动
    tcbRouter
    http缓存策略
    Ajax跨域
    tcp 3次握手和4次挥手
    http头字段
    http工作原理
    一个下载Windows镜像的地址
    安装MySQL-8.0.13
    配置Java,jdk环境变量
  • 原文地址:https://www.cnblogs.com/gg1234/p/6424953.html
Copyright © 2011-2022 走看看