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와 일치합니다
 

[name~="value"]

[name|="value"]

 

JQUERY가 이뤄낸 거꾸로.

[attribute!=value]

지정한 속성이 없거나 특정 값이 아닌 모든 요소를 일치시킵니다.
이 선택기는 다음과 같습니다. not ([attr=value])
특정 속성이 있지만 특정 값이 아닌 요소와 일치하려면 [attr]: not ([attr=value]) 를 사용하십시오.
 
 

CSS3.1

[attribute^=value]

주어진 속성과 일치하는 것은 일부 값으로 시작하는 요소입니다.
 

[attribute$=value]

주어진 속성과 일치하는 것은 일부 값으로 끝나는 요소입니다.
 

[attribute*=value]

특정 값을 포함하는 속성과 일치하는 요소
 

[selector1][selector2][selectorN]

복합 속성 선택기, 여러 조건을 동시에 만족시켜야 할 때 사용합니다.