jQuery选择器源码解读四：tokenize方法的Expr.preFilter

Expr.preFilter是tokenize方法中对ATTR、CHILD、PSEUDO三种选择器进行预处理的方法。具体如下：

rush:js;"> Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务： * 1、属性名称解码 * 2、属性值解码 * 3、若判断符为~=，则在属性值两边加上空格 * 4、返回最终的mtach对象 * * match[1]表示属性名称， * match[1].replace(runescape,funescape)：将属性名称中的十六进制数解码成 * 单字节unicode字符或双字节unicode字符（中文或其它需要两个字节表达的文字） * 正则表达式的详细说明，可以参看我的“详解jQuery选择器正则表达式”文章 */ match[1] = match[1].replace(runescape,funescape);

    /*
     * 将<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>值解码
     * match[4]：表示放在单引号或双引号内的<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>值
     * match[5]: 表示不用引号括起来的<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>值
     */
    match[3] = (match[4] || match[5] || "").replace(ru<a href="https://www.jb51.cc/tag/nes/" target="_blank" class="keywords">nes</a>cape,fu<a href="https://www.jb51.cc/tag/nes/" target="_blank" class="keywords">nes</a>cape);

    /*
     * ~=的意思是单词匹配，在W3C中对单词的定义是以空白为不同单词的分隔符
     * 故此处在match[3]两边<a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>空格后，可以利用indexOf，正确识别出该单词是否存在
     */
    if (match[2] === "~=") {
        match[3] = " " + match[3] + " ";
    }

    /*
     * 返回有用的前四个元素结果
     */
    return match.slice(0,4);
},"CHILD" : function(match) {
    /*
     * 完成如下几项任务：
     * 1、把命令中child和of-type之前的字符变成小写字符
     * 2、对于nth开头的选择器检查括号内的数据有效性
     * 3、match[4]和match[5]分别存放xn+b中的x和b，x和b允许是负数
     * 4、返回最终的match对象
     * 
     * match[1]：(only|f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t|last|nth|nth-last)中的<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>
     */
    match[1] = match[1].toLowerCase();

    /*
     * 对于nth-child、nth-of-type、nth-last-child、nth-last-of-type四种类型括号内需设置有效数据
     * 而其它则括号内不允许有任何数据
     */
    if (match[1].slice(0,3) === "nth") {
        /*
         * 若选择器括号内没有有效参数，则抛出异常
         * 举例：若选择器是nth或nth(abc)则属于非法选择器
         */
        if (!match[3]) {
            Sizzle.error(match[0]);
        }
        /*
         * 下面先以nth-child()为例介绍一下语法，以便更好的理解下面<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>的作用
         * nth-child允许的几种使用方式如下：
         *   :nth-child(even)
         *   :nth-child(odd)
         *   :nth-child(3n)
         *   :nth-child(+2n+1)
         *   :nth-child(2n-1)
         * 下面<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>中赋值号左侧的match[4]、match[5]用于分别记录括号内n前及n后的数值，<a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>正负号
         * 对于:nth-child(even)和:nth-child(odd)来说，match[4]为空，
         *   所以返回 2 * (match[3] === "even" || match[3] === "odd")的计算结果
         *   因为在js中true=1,false=0，所以(match[3] === "even" || match[3] === "odd")等于1
         *   因此，2 * (match[3] === "even" || match[3] === "odd")的计算结果为2
         * 
         * 等号右侧的“+”的作用是强制类型转换，将之后的<a href="https://www.jb51.cc/tag/zifuchuanzhuanhuan/" target="_blank" class="keywords">字符串转换</a>成<a href="https://www.jb51.cc/tag/shuzhileixing/" target="_blank" class="keywords">数值类型</a> 
         */
        match[4] = +(match[4] ? match[5] + (match[6] || 1)
                : 2 * (match[3] === "even" || match[3] === "odd"));
        match[5] = +((match[7] + match[8]) || match[3] === "odd");

    } else if (match[3]) {
        /*
         * 若非nth起头的其它CHILD类型选择器带有括号说明，则抛出异常
         * 这里jQuery并没有严格按照W3C的规则来判定，因为其允许:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t-child()的这种形式存在
         * 也就是对于jQuery来说:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t-child()等同于:f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t-child，是合法选择器
         */
        Sizzle.error(match[0]);
    }

    return match;
},"PSEUDO" : function(match) {
    /*
     * 完成如下任务：
     * 1、<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>伪类中用引号括起来的值
     * 2、对于非引号括起来的值，若存在伪类嵌套，则进一步解析确定当前伪类实际结束位置，
     *  <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前伪类的完整字符串和值
     * 3、返回match中的前三项的副本。
     * 
     * unquoted表示括号内非引号括起来的值，
     * 以:eq(2)为例，unquoted=2
     */
    var excess,unquoted = !match[5] && match[2];

    /*
     * 因为pseudo与child的匹配正则表达式有交集，所以，需要把属于child的部分忽略掉
     */
    if (matchExpr["CHILD"].test(match[0])) {
        return null;
    }
    /*
     * 若括号内的值使用引号(match[3])括起来的，
     * 则将除引号外的值(match[4])赋给match[2]。
     * match[3]表示引号。
     */
    if (match[3] && match[4] !== undefined) {
        match[2] = match[4];
    } else if (unquoted
            /*
             * rpseudo.test(unquoted)：用来测试unquoted是否包含伪类，
             * 若包含伪类，则说明有可能存在伪类嵌套的可能性，需要进一步对unquoted进行解析
             * 例如： :not(:eq(3))
             */
            && rpseudo.test(unquoted)
            &&
            /*
             * <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>unquoted中连续有效地选择器最后<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>字符所在位置
             */
            (excess = tokenize(unquoted,true))
            &&
            /*
             * unquoted.indexOf(")",unquoted.length - excess)
             *   从之前获得的连续有效地选择器最后<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>字符所在位置之后找到")"所在位置，
             *   通常就在当前位置之后。
             * 再减去unquoted.length，用来获得match[0]中的有效完整的伪类字符串最后位置，
             *   注意，此时excess是<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>负值
             * 
             */
            (excess = unquoted.indexOf(")",unquoted.length

• excess)

• unquoted.length)) {

        // <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>有效的完整伪类match[0]和伪类括号内的数据match[2]
        match[0] = match[0].slice(0,excess);
        match[2] = unquoted.slice(0,excess);
    }
  
    // 返回match前三个元素的副本
    return match.slice(0,3);

  }
  }