1. 程式人生 > >sizzle分析記錄:屬性選擇器

sizzle分析記錄:屬性選擇器

原始碼部分

通過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單獨處理

"checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",

"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;
};

CSS2.1

[attribute]

匹配包含給定屬性的元素

通過刷選出seed種子集合,然後遍歷通過 elem.getAttribute( name ) 找到結果集即可

[attribute=value]

匹配給定的屬性是某個特定值的元素

先直接attribute的操作,匹配出來的值來匹配設定的attribute

JQUERY自己實現的取反

[attribute!=value]

匹配所有不含有指定的屬性,或者屬性不等於特定值的元素。

此選擇器等價於:not([attr=value])<br>要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value])

CSS3.1

[attribute^=value]

匹配給定的屬性是以某些值開始的元素

[attribute$=value]

匹配給定的屬性是以某些值結尾的元素

[attribute*=value]

匹配給定的屬性是以包含某些值的元素

[selector1][selector2][selectorN]

複合屬性選擇器,需要同時滿足多個條件時使用。