sizzle分析记录：属性选择器-阿里云开发者社区

sizzle分析记录：属性选择器

2017-07-06 859

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

源码部分

通过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;
};

CSS2.1

[attribute]

匹配包含给定属性的元素

通过刷选出seed种子集合，然后遍历通过 elem.getAttribute( name ) 找到结果集即可

[attribute=value]

匹配给定的属性是某个特定值的元素

先直接attribute的操作，匹配出来的值来匹配设定的attribute

[name~="value"]

[name|="value"]

JQUERY自己实现的取反

[attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

此选择器等价于:not([attr=value])<br>要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

CSS3.1

[attribute^=value]

匹配给定的属性是以某些值开始的元素

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

[attribute*=value]

匹配给定的属性是以包含某些值的元素

[selector1][selector2][selectorN]

复合属性选择器，需要同时满足多个条件时使用。

本文转自艾伦 Aaron博客园博客，原文链接：http://www.cnblogs.com/aaronjs/p/3855346.html，如需转载请自行联系原作者

文章标签：

JavaScript