jQuery.API源码深入剖析以及应用实现(4) - 选择器篇(下)

简介: 继续介绍选择器的其它原理,包括内容,可见性,属性,子元素,表单,表单对象属性等等原理。 jQuery选择器的图示包括: 一、内容 1. 【 :contains(text) 】 匹配包含给定文本的元素。

继续介绍选择器的其它原理,包括内容,可见性,属性,子元素,表单,表单对象属性等等原理。

jQuery选择器的图示包括:


一、内容

1. 【 :contains(text) 】

匹配包含给定文本的元素。

例子

HTML代码 jQuery代码 结果
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn </div>
$("div:contains('John')") [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

首先我们先找到它的一个正则表达式

PSEUDO:  / :((?:["w"u00c0-"uFFFF_-]|"".)+)(?:"((['"]*)((?:"([^")]+")|[^"2"(")]*)+)"2"))? /

然后找到它的核心代码:

filter: {
    PSEUDO: 
function (elem, match, i, array){
        
var  name  =  match[ 1 ], filter  =  Expr.filters[ name ];

        
if  ( filter ) {
            
return  filter( elem, i, match, array );
        } 
else  if  ( name  ===  " contains "  ) { 
            
//  textContext在FF下和innerText在IE下的属性是等效的,match[3]得到的是contains紧跟在后面包含的字符串,当elem元素的文本内容包含contains包含的关键字时,返回true
             return  (elem.textContent  ||  elem.innerText  ||  "" ).indexOf(match[ 3 ])  >=  0 ;
        } 
else  if  ( name  ===  " not "  ) {
            
var  not  =  match[ 3 ];

            
for  (  var  i  =  0 , l  =  not.length; i  <  l; i ++  ) {
                
if  ( not[i]  ===  elem ) {
                    
return  false ;
                }
            }

            
return  true ;
        }
    }
}

关键在于 (elem.textContent || elem.innerText || "").indexOf(match[3]) >= 0; 的布尔值判断,当返回真时,elem元素为匹配的元素。


2. 【 :empty 】,【 :has(selector) 】,【 :parent 】

:empty匹配所有不包含子元素或者文本的空元素。

:has(selector) 匹配含有选择器所匹配的元素的元素。

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

例子

HTML代码 jQuery代码 结果
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
$("td:empty") [ <td></td>, <td></td> ]
<div><p>Hello</p></div>
<div>Hello again!</div>
$("div:has(p)").addClass("test"); [ <div class="test"><p>Hello</p></div> ]
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>
$("td:parent")
[ <td>Value 1</td>, <td>Value 1</td> ]

同样它匹配正则表达式PSEUDO。

找到它们的核心代码:

filters: {
    parent: 
function (elem){
        
return  !! elem.firstChild;
    },
    empty: 
function (elem){
        
return  ! elem.firstChild;
    },
    has: 
function (elem, i, match){
        
return  !! Sizzle( match[ 3 ], elem ).length;
    }
}

其中当!elem.firstChild即elem元素不包含子节点或者文本元素时,empty返回真;

当!!elem.firstChild即elem元素包含子节点或者文本元素时,parent返回真;

has中,match[3]为has紧跟在后面含有的元素,如p元素,!!Sizzle( match[3], elem ).length 得到 match[3]元素中包含在elem元素中的个数,如果个数 > 1,has返回真。

 

二、可见性

1. 【 :hidden 】和【 :visible 】

: hidden匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到。

:visible匹配所有的可见元素。

我们只需要看它的核心代码为:

jQuery.expr  =  Sizzle.selectors;
//  …
Sizzle.selectors.filters.hidden  =  function (elem){
    
return  " hidden "  ===  elem.type  ||
        jQuery.css(elem, 
" display " ===  " none "  ||
        jQuery.css(elem, 
" visibility " ===  " hidden " ;
};

Sizzle.selectors.filters.visible 
=  function (elem){
    
return  " hidden "  !==  elem.type  &&
        jQuery.css(elem, 
" display " !==  " none "  &&
        jQuery.css(elem, 
" visibility " !==  " hidden " ;
};

当elem元素的CSS属性display为”none”,或者visibility为”hidden”时,返回真;

当elem元素的CSS属性display不为”none”,并且visibility不为”hidden”时,返回真。

通过布尔值来判断元素是否显示。

 

三、属性

1. [ attribute ],[ attribute=value ],[ attribute!=value ],[ attribute^=value ],[ attribute$=value ],[ attribute*=value ]

属性匹配的正则表达式为:

ATTR:  / "["s*((?:["w"u00c0-"uFFFF_-]|"".)+)"s*(?:("S?=)"s*(['"]*)(.*?)"3|)"s*"] /

通过Sizzle.filter方法,得到ATTR的正则匹配,然后调用Expr.filter[ “ATTR” ],具体实现为:

filters: {
    
//  如 $("input[name^='news']")【<input name="newsletter" />】
    ATTR:  function (elem, match){
        
var  result  =  Expr.attrHandle[ match[ 1 ] ]  ?  Expr.attrHandle[ match[ 1 ] ]( elem ) : elem[ match[ 1 ] ]  ||  elem.getAttribute( match[ 1 ] ), value  =  result  +  "" , type  =  match[ 2 ], check  =  match[ 4 ];
        
return  result  ==  null  ?
            type 
===  " != "  :
            type 
===  " = "  ?
            value 
===  check :
            type 
===  " *= "  ?
            value.indexOf(check) 
>=  0  :
            type 
===  " ~= "  ?
            (
"  "  +  value  +  "  " ).indexOf(check)  >=  0  :
            
! match[ 4 ?
            result :
            type 
===  " != "  ?
            value 
!=  check :
            type 
===  " ^= "  ?
            value.indexOf(check) 
===  0  :
            type 
===  " $= "  ?
            value.substr(value.length 
-  check.length)  ===  check :
            type 
===  " |= "  ?
            value 
===  check  ||  value.substr( 0 , check.length  +  1 ===  check  +  " - "  :
            
false ;
    }
}

其中value相当于“newsletter”,check相当于“new”;
可以看出“!=”和“=”判断value === check; 的布尔值,即value是否等于check;
“^=”取得value.index(check) === 0; 的布尔值,即check的字符串是否在value的开头;
“$=”取得value.substr(value.length - check.length) === check; 的布尔值,即check的字符串是否在value的末尾;
“*=”取得value.index(check) >= 0; 的布尔值,即value包含check字符串为真;


四、子元素

1. 【 :nth-child(index/even/odd/equation) 】,【 :first-child 】,【 :last-child 】,【 :only-child 

:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。
:first-child 匹配第一个子元素。
:last-child 匹配最后一个子元素。
:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。

它匹配的正则表达式为:

CHILD:  / :(only|nth|last|first)-child(?:"((even|odd|["dn+-]*)"))? /

通过Sizzle.filter方法,得到CHILD的正则匹配,然后调用Expr.filter[ “CHILD” ],具体实现为:

filter: {
        CHILD: 
function (elem, match){
            
var  type  =  match[ 1 ], parent  =  elem.parentNode;

            
var  doneName  =  match[ 0 ];

            
if  ( parent  &&  ( ! parent[ doneName ]  ||  ! elem.nodeIndex) ) {
                
var  count  =  1 ;

                
for  (  var  node  =  parent.firstChild; node; node  =  node.nextSibling ) {
                    
if  ( node.nodeType  ==  1  ) {
                        node.nodeIndex 
=  count ++ ;
                    }
                }

                parent[ doneName ] 
=  count  -  1 ;
            }

            
if  ( type  ==  " first "  ) {
                
return  elem.nodeIndex  ==  1 ;
            } 
else  if  ( type  ==  " last "  ) {
                
return  elem.nodeIndex  ==  parent[ doneName ];
            } 
else  if  ( type  ==  " only "  ) {
                
return  parent[ doneName ]  ==  1 ;
            } 
else  if  ( type  ==  " nth "  ) {
                
var  add  =  false , first  =  match[ 2 ], last  =  match[ 3 ];

                
if  ( first  ==  1  &&  last  ==  0  ) {
                    
return  true ;
                }

                
if  ( first  ==  0  ) {
                    
//  形如 $("ul li:nth-child(2)")
                     if  ( elem.nodeIndex  ==  last ) {
                        add 
=  true ;
                    }
                } 
                
//  形如 $("ul li:nth-child(even)"), $("ul li:nth-child(odd)"),$("ul li::nth-child(3n+1)")
                 else  if  ( (elem.nodeIndex  -  last)  %  first  ==  0  &&  (elem.nodeIndex  -  last)  /  first  >=  0  ) {
                    add 
=  true ;
                }

                
return  add;
            }
        }
}

其中type为first时,elem.nodeIndex == 1; 当elem元素为第一个节点时,返回真;
type为last时,elem.nodeIndex == parent[ doneName ]; 当elem元素为它的父节点的最后一个子节点时,返回真;
type为only时,parent[ doneName ] == 1; 当elem元素的父节点只有一个子节点时,返回真;
type为nth时,各种情况已经在代码中标注。

五、表单

1. 【 :input 】,【 :text 】,【 :password 】,【 :radio 】,【 :checkbox 】,【 :submit 】,【 :image 】,【 :reset 】,【 :button 】,【 :file 】,【 :hidden 】

它们匹配的正则表达式为:

PSEUDO:  / :((?:["w"u00c0-"uFFFF_-]|"".)+)(?:"((['"]*)((?:"([^")]+")|[^"2"(")]*)+)"2"))? /

找到它们的核心代码:

    filters: {
        text: 
function (elem){
            
return  " text "  ===  elem.type;
        },
        radio: 
function (elem){
            
return  " radio "  ===  elem.type;
        },
        checkbox: 
function (elem){
            
return  " checkbox "  ===  elem.type;
        },
        file: 
function (elem){
            
return  " file "  ===  elem.type;
        },
        password: 
function (elem){
            
return  " password "  ===  elem.type;
        },
        submit: 
function (elem){
            
return  " submit "  ===  elem.type;
        },
        image: 
function (elem){
            
return  " image "  ===  elem.type;
        },
        reset: 
function (elem){
            
return  " reset "  ===  elem.type;
        },
        button: 
function (elem){
            
return  " button "  ===  elem.type  ||  elem.nodeName.toUpperCase()  ===  " BUTTON " ;
        },
        input: 
function (elem){
            
return  / input|select|textarea|button / i.test(elem.nodeName);
        }
    }

可以看出elem.type得到元素的type属性,当元素type属性等于相应的值时,返回相应的布尔值。
如果为真,最后返回匹配的jQuery对象。

六、表单对象属性

1. 【 : enabled 】,【 : disabled 】,【 : checked 】,【 :selected 】

它们匹配的正则表达式为:

PSEUDO:  / :((?:["w"u00c0-"uFFFF_-]|"".)+)(?:"((['"]*)((?:"([^")]+")|[^"2"(")]*)+)"2"))? /

找到它们的核心代码:

    filters: {
        enabled: 
function (elem){
            
return  elem.disabled  ===  false  &&  elem.type  !==  " hidden " ;
        },
        disabled: 
function (elem){
            
return  elem.disabled  ===  true ;
        },
        checked: 
function (elem){
            
return  elem.checked  ===  true ;
        },
        selected: 
function (elem){
            
//  Accessing this property makes selected-by-default
             //  options in Safari work properly
            elem.parentNode.selectedIndex;
            
return  elem.selected  ===  true ;
        }
    }

其中,enabled对应elem的disabled属性为false并且elem的type属性为hidden;
disabled对应elem的disabled属性为true;
checked对应elem的checked属性为true;
selected对应elem的selected属性为true;


jQuery的选择器的原理至此已经全部介绍完了,通过选择器认识到了通过Expr.filters达到了过滤的目的。

目录
相关文章
|
11天前
|
存储 缓存 搜索推荐
Lazada淘宝详情API的价值与应用解析
在电商行业,数据是驱动业务增长的核心。Lazada作为东南亚知名电商平台,其商品详情API对电商行业影响深远。本文探讨了Lazada商品详情API的重要性,包括提供全面准确的商品信息、增强平台竞争力、促进销售转化、支持用户搜索和发现需求、数据驱动决策、竞品分析、用户行为研究及提升购物体验。文章还介绍了如何通过Lazada提供的API接口、编写代码及使用第三方工具实现实时数据获取。
29 3
|
15天前
|
监控 搜索推荐 数据挖掘
淘宝 API 接口的调用频率限制是否会因应用类型而异?
淘宝API调用频率限制依应用类型而异。电商管理类如商家后台、商品批量上传工具,调用频次较高;数据分析类如市场调研、店铺分析工具,频次较严;导购推荐类如第三方导购平台、社交媒体导购应用,依据规模与信誉设定;其他如开发者测试、个人小型应用则限制较宽松。
|
5天前
|
JavaScript
jQuery制作的3D冰块立方时钟动态特效源码
jQuery制作的3D冰块立方时钟动态特效源码是一段基于jQuery实现的3D魔方立方时钟效果代码,该设计非常特别,且支持数字颜色的变化,提供8款颜色选择,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
22 8
|
6天前
|
JavaScript
jQuery制作的网站首页宽屏导航轮播图特效源码
jQuery制作的网站首页宽屏导航轮播图特效源码是一段基于jQuery制作的可用于商城首页 微商城 互联网公司或某些电子商城的首页特效,自带有二级菜单栏、轮播图滚动、登录注册按钮等等,非常全面,欢迎对此段代码感兴趣的朋友前来下载使用。
12 4
|
6天前
|
JavaScript
jQuery实现的手风琴四季场景变换特效源码
jQuery实现的手风琴四季场景变换特效源码是一段基于jQuery实现的手风琴四季场景变换效果代码,拥有春夏秋冬四季转场特效,鼠标可放大每个季节的图像,欢迎对此段代码感兴趣的朋友前来下载使用。
12 1
|
8天前
|
JSON 供应链 API
京东商品评价API的获取和应用
京东商品评价API是电商数据分析的重要工具,帮助开发者和商家获取商品的用户评价数据,包括评分、评论内容和购买时间等。通过分析这些数据,商家可以优化产品和服务,提升客户满意度,制定更有效的营销策略。本文介绍了获取和应用京东商品评价API的详细步骤,包括注册账号、获取权限、阅读文档和编写代码调用API。示例代码展示了如何使用Python调用API并处理响应数据。
32 2
|
9天前
|
JSON API 开发者
淘宝商品评价API的获取与应用
在数字化时代,电商平台如淘宝成为消费者购物的主要渠道。本文介绍如何使用淘宝开放平台的商品评论API获取并利用评论数据,以优化产品和服务,提升用户体验。内容涵盖API的重要性、准备工作、调用流程及代码实现,帮助开发者高效获取和分析数据。
31 3
|
9天前
|
缓存 数据挖掘 API
淘宝商品类目API的获取与应用探索
淘宝商品类目API是淘宝开放平台提供的关键服务,允许开发者获取淘宝商品的类目信息,包括根类目、子类目及属性信息。本文介绍API的获取方法、应用场景及使用技巧,帮助电商从业者和开发者更好地利用类目数据,提升商品管理、搜索推荐及数据分析等能力。
21 1
|
13天前
|
安全 API 数据安全/隐私保护
商品详情API接口的优势分析与应用价值
在数字化时代,商品详情API接口为商家和开发者提供了实时更新、高效集成、丰富功能、安全稳定、易于扩展及提升用户体验的解决方案,助力提高运营效率、降低成本并增强市场竞争力。
|
12天前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。