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

可见性

隐藏对象没有宽高,前提是用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.offsetHeight <= 0;
};
jQuery.expr.filters.visible = function( elem ) {
    return !jQuery.expr.filters.hidden( elem );
};
内容

获取文本内容通过indexOf匹配

"contains": markFunction(function( text ) {
    return function( elem ) {
        return ( elem.textContent || elem.innerText || getText( elem ) ).indexOf( text ) > -1;
    };
}),

取空

递归这个节点,排除nodeType大于6的节点

// Contents
"empty": function( elem ) {
    // http://www.w3.org/TR/selectors/#empty-pseudo
    // :empty is negated by element (1) or content nodes (text: 3; cdata: 4; entity ref: 5),
    //   but not by others (comment: 8; processing instruction: 7; etc.)
    // nodeType < 6 works because attributes (2) do not appear as children
    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return false;
        }
    }
    return true;
},

查看包含

递归sizzle通过传递上下文对象,实现包含查找

"has": markFunction(function( selector ) {
    return function( elem ) {
        return Sizzle( selector, elem ).length > 0;
    };
}),

匹配含有子元素或者文本的元素

"parent": function( elem ) {
    return !Expr.pseudos["empty"]( elem );
},

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

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

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

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

利用jQuery.expr创建一个自己的伪类选择器

话说好久没来园子写博客了,哎,看来懒癌已经到晚期,得治... 进入正题.前段时间看到一段jQuery代码,代码里面用到了jQuery.expr这个对象.完全陌生又木有.翻了下jQuery的官方文档,没找到关于这个对象的解释,不过搜寻了一番过后终于在jQuery的选择器引擎——sizzle的文档里找到了线索.如果没猜错的话,这个对象应该是Sizzle.selectors对象的扩展.其实要验证这一点非常简单,我们把两个对象分别console.log出来对比下就知道了.页面引入jQuery和sizzl

伪类选择器 E:nth-child(n)、E:nth-of-type(n)

结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来描述一下这俩:      E:nth-child(n): 选择父元素下的第n个子元素,并且这第n个子元素的类型为E,    还是语言描述了之后用例子比较好       上面这个例子很简单,来简单分析一下样式表中的span:nth-child(2)这条语句(实际写代码不会这么随便啦,这里只是为了说明问

H5与CS3权威下.19 选择器(2)结构性伪类选择器

1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器:伪元素{属性:值} 选择器.类名:伪元素{属性:值} 2.css中常用的伪元素选择器 (1)first-line:向某元素中的第一行文字使用样式. eg: 1 <p>伪元素选择器 <br>类选择器</p> 1 p:first-line{background: pink;}

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

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

CSS3---结构性伪类选择器—target

结构性伪类选择器—target :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素.我们先来上个例子,然后再做分析. 示例展示 点击链接显示隐藏的段落. HTML代码: <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand &

css3 巧用结构性伪类选择器

最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: 1 <style type="text/css"> 2 li{ 3 list-style-type: none; 4 float: left; 5 width: 60px; 6 height: 60px; 7 background-color: #979698; 8 margin-left: 10px; 9 text-align: center

CSS2伪类选择器要点

有四个选择器,分别是 hover:鼠标悬停 link:链接不能使用时 visited:链接被点击后 active:链接被点击时,如果鼠标不放,就会一直触发active属性 link在w3c中记录为链接未被点击时,实际上是当href属性不能使用时触发,列如<a href="#">南达科他级</a> 此时会激活link属性 如果某一个标签需要同时使用上面的多个伪类选择器,要想全部激活是有顺序关系的 link  visited  hover  active  ,建议按