• 属性选择器的对于空白字符的匹配策略


    在w3c草案对属性选择器[att~=val]提到一个点,val不能为空白字符,否则比较值flag(flag为val与元素实际值的比较结果)总返回false,而我写选择器过程中,发现这要求对其他操作符也有效果。

    <!DOCTYPE html>
    <html>
        <head>
            <title>属性选择器</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script>
                window.onload = function(){
                    console.log(document.querySelector("#test1[title='']"));
                    console.log(document.querySelector("#test1[title~='']"));
                    console.log(document.querySelector("#test1[title|='']"));
                    console.log(document.querySelector("#test1[title^='']"));
                    console.log(document.querySelector("#test1[title$='']"));
                    console.log(document.querySelector("#test1[title*='']"));
                    console.log("===========================================")
                    console.log(document.querySelector("#test2[title='']"));
                    console.log(document.querySelector("#test2[title~='']"));
                    console.log(document.querySelector("#test2[title|='']"));
                    console.log(document.querySelector("#test2[title^='']"));
                    console.log(document.querySelector("#test2[title$='']"));
                    console.log(document.querySelector("#test2[title*='']"));
                    
                }
                    
            </script>
        </head>
        <body>
            <div title="" id="test1"></div>
            <div title="aaa" id="test2"></div>
        </body>
    </html>
    
    日志: [object HTMLDivElement] 
    日志: null 
    日志: [object HTMLDivElement] 
    日志: null 
    日志: null 
    日志: null 
    日志: =========================================== 
    日志: null 
    日志: null 
    日志: null 
    日志: null 
    日志: null 
    日志: null 
    

    换言之,只要val为空,除=或|=外,flag必为false,并且,对于非=,!=操作符,如果取得值为空白字符,flag也必为false。

    下面是我第五代选择器Icarus的相关代码:

    
    
    
                                    for (i = 0, ri = 0, elem; elem = elems[i++];) {
                                        if(!op){
                                            flag = Icarus.hasAttribute(elem,name,flag_xml);//[title]
                                        }else if(val === "" && op > 3){
                                            flag = false
                                        }else{
                                            attr = Icarus.getAttribute(elem,name,flag_xml);
                                            switch (op) {
                                                case 1:// = 属性值全等于给出值
                                                    flag = attr === val;
                                                    break;
                                                case 2://!= 非标准,属性值不等于给出值
                                                    flag = attr !== val;
                                                    break;
                                                case 3://|= 属性值以“-”分割成两部分,给出值等于其中一部分,或全等于属性值
                                                    flag = attr === val || attr.substring(0, val.length + 1) === val + "-";
                                                    break;
                                                case 4://~= 属性值为多个单词,给出值为其中一个。
                                                    flag = attr !== "" && (" " + attr + " ").indexOf(val) >= 0;
                                                    break;
                                                case 5://^= 属性值以给出值开头
                                                    flag = attr !== "" && attr.indexOf(val) === 0 ;
                                                    break;
                                                case 6://$= 属性值以给出值结尾
                                                    flag = attr !== "" && attr.lastIndexOf(val) + val.length === attr.length;
                                                    break;
                                                case 7://*= 属性值包含给出值
                                                    flag = attr !== "" && attr.indexOf(val) >= 0;
                                                    break;
                                            }
                                        }
                                        if (flag ^ flag_not)
                                            tmp[ri++] = elem;
                                    }
    
  • 相关阅读:
    2014多校第四场1005 || HDU 4901 The Romantic Hero (DP)
    HDU 1698 Just a Hook (线段树区间更新)
    HDU 1016 Prime Ring Problem (素数筛+DFS)
    2014多校第二场1011 || HDU 4882 ZCC Loves Codefires (贪心)
    HDU 1142 A Walk Through the Forest(SPFA+记忆化搜索DFS)
    JSP九大内置对象和四个作用域
    Jsp遍历后台传过来的List
    JavaWeb文件上传和下载
    servlet中doGet()和doPost()的区别
    Ajax请求会话过期处理(JS)
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2236756.html
Copyright © 2020-2023  润新知