sizzle分析记录：属性选择器

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_33795093

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/348320

本文详细介绍了Sizzle引擎中属性选择器的工作原理，包括如何通过不同类型的属性选择器匹配DOM元素，例如精确匹配、子字符串匹配等。此外还探讨了特殊情况下的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码部分

通过Sizzle.attr匹配出值

然后通过表达式刷选计算

"ATTR": function( name, operator, check ) {
    return function( elem ) {
        var result = Sizzle.attr( elem, name );

        if ( result == null ) {
            return operator === "!=";
        }
        if ( !operator ) {
            return true;
        }

        result += "";

        return operator === "=" ? result === check :
            operator === "!=" ? result !== check :
            operator === "^=" ? check && result.indexOf( check ) === 0 :
            operator === "*=" ? check && result.indexOf( check ) > -1 :
            operator === "$=" ? check && result.slice( -check.length ) === check :
            operator === "~=" ? ( " " + result + " " ).indexOf( check ) > -1 :
            operator === "|=" ? result === check || result.slice( 0, check.length + 1 ) === check + "-" :
            false;
    };
},

特殊的属性需要attrHandle单独处理

"type|href|height|width"

"value"

Sizzle.attr = function( elem, name ) {
    // Set document vars if needed
    if ( ( elem.ownerDocument || elem ) !== document ) {
        setDocument( elem );
    }

    var fn = Expr.attrHandle[ name.toLowerCase() ],
        // Don't get fooled by Object.prototype properties (jQuery #13807)
        val = fn && hasOwn.call( Expr.attrHandle, name.toLowerCase() ) ?
            fn( elem, name, !documentIsHTML ) :
            undefined;

    return val !== undefined ?
        val :
        support.attributes || !documentIsHTML ?
            elem.getAttribute( name ) :
            (val = elem.getAttributeNode(name)) && val.specified ?
                val.value :
                null;
};