sizzle分析记录:属性选择器
属性 分析 记录 选择器
2023-09-14 08:57:46 时间
源码部分
通过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]
复合属性选择器,需要同时满足多个条件时使用。
相关文章
- 在一个元素上:hover,改变另一个元素的css属性
- R_Studio(学生成绩)使用主成分分析实现属性规约
- 属性锁TimeLock
- Knockout 新版应用开发教程之创建view models与监控属性
- 上层建筑——DOM元素的特性与属性(dojo/dom-prop)
- 【原创】RabbitMQ之Queue属性测试
- activity属性_ _activity 属性说明
- 检查Object是否存在某个属性
- css+div布局要素:文档流position属性 父级对象和同级对象
- 使用代码读取SAP CRM product的所有属性
- Atitit 持久化与数据存储标准化规范 目录 1. 存储的附加功能2 1.1. 基本存取功能2 1.2. 全文检索(imap2 1.3. 属性检索2 1.4. 查询语言2 2. 基于内容
- 类的惰性属性
- Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
- Android 系统属性SystemProperty分析
- deepface:最先进轻量级人脸识别和人脸属性分析框架讲解
- (18)Blender源码分析之闪屏窗口的菜单python代码属性识别