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])<br>要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])

 

 


CSS3.1

[attribute^=value]

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

 

[attribute$=value]

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

 

[attribute*=value]

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

 


[selector1][selector2][selectorN]

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

sizzle分析记录:属性选择器

时间: 2024-10-09 11:01:32

sizzle分析记录:属性选择器的相关文章

sizzle分析记录: 自定义伪类选择器

可见性 :hidden :visible 隐藏对象没有宽高,前提是用display:none处理的 jQuery.expr.filters.hidden = function( elem ) { // Support: Opera <= 12.12 // Opera reports offsetWidths and offsetHeights less than zero on some elements return elem.offsetWidth <= 0 && elem

sizzle分析记录:分解流程

<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <div name="newsletter" /><p>1<p</div> <div name="letter" /><p nam

sizzle分析记录:关于querySelectorAll兼容问题

querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. 万能的sizzle在高版本的浏览器中复杂的选择器尽量走querySelectorAll,前提是这个匹配的节点没有兼容问题 从IE8开始虽然支持querySelectorAll的API,但是会有各式各样的BUG,所以sizzle拿rbuggyQSA用来记录这个BUG问题 if ( supp

sizzle分析记录:getAttribute和getAttributeNode

部分IE游览器下无法通过getAttribute取值? <form name="aaron"> <input type="text" name="aaron"/> </form> alert(form.getAttribute('name')); IE6.7中错误 alert(form.getAttributeNode('name').nodeValue); 看看jQ的解决方案 能力判断 support.att

struts1.2源码分析记录

struts思路:1.struts使用的三板斧ActionForm.DispatchAction.ActionMapping2.主要关注点:Form.Action.Forward3.页面如何发送请求参数,后台如何截取.do请求,如何将参数组装成Form,在Action中如何操作Form,如何查找目标页面,如何将Form返回到页面,页面如何通过标签读取Form属性 框架主流程:Struts所有的请求都要走DispatchAction类的public ActionForward execute(Ac

CSS3属性选择器详解

上一章在<CSS3基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种: E[attr]:只使用属性名,但没有确定任何属性值: E[attr="

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

css3新增的属性选择器

使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att^=val]和[att$=val] id="top" att就是id,类似的如class,href~~等属性. [att*=val]属性选择器 如果元素att属性的属性值中包含val指定的字符,那么该元素使用这个样式.[att^=val]属性选择器 如果att属性的属性值的开头字符为用va

CSS3-新属性-属性选择器

CSS3之前,对于每个HTML标签来说,属性均是固定的.但是CSS3扩展了属性选择器的用法,用户可自定义标签的属性.下面介绍CSS3中属性选择器的使用方式,这些属性仅支持IE7及以上版本. 标签的自定义属性和标签的固有属性写法一致,例如,给 3个p 标签自定义一个attribute的属性,且属性值分别为first.second,以及含有多个属性值 “third1 third2 third3 third4” 的p标签,此种写法称为属性值列表 <p attribute="first"