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天前
|
自然语言处理 Java API
Java 8的Stream API和Optional类:概念与实战应用
【5月更文挑战第17天】Java 8引入了许多重要的新特性,其中Stream API和Optional类是最引人注目的两个。这些特性不仅简化了集合操作,还提供了更好的方式来处理可能为空的情况,从而提高了代码的健壮性和可读性。
39 7
|
4天前
|
安全 算法 Java
Java Stream API:原理、应用与深入解析
Java Stream API:原理、应用与深入解析
|
4天前
|
API 数据安全/隐私保护
单页源码加密屋zip文件加密API源码
单页源码加密屋zip文件加密API源码 api源码里面的参数已改好,往服务器或主机一丢就行,出现不能加密了就是加密次数达到上限了,告诉我在到后台修改加密次数
9 1
|
7天前
|
监控 数据挖掘 API
数据驱动选品:阿里巴巴商品详情API在电商选品中的应用
阿里巴巴开放平台提供了商品详情数据接口(item_get),用于获取商品标题、价格、品牌等信息。开发者需注册账号、构造请求、发送请求并处理响应。接口包括商品搜索、销售数量查询、历史价格、评论获取等功能。适用于选品、数据分析和价格监控。使用时注意遵守规则,保护API密钥,控制调用频率,并处理异常情况。1688平台有限制调用频率的规定,开发者应确保安全性和稳定性。通过[c0b.cc/R4rbK2]获取API测试账号和SDK。
34 3
|
8天前
|
缓存 API 数据库
构建高效Python Web应用:Flask框架与RESTful API设计原则
【5月更文挑战第20天】 在现代Web开发中,构建一个轻量级且高效的后端服务至关重要。本文将深入探讨如何使用Python的Flask框架结合RESTful API设计原则来创建可扩展和易于维护的Web应用程序。我们将通过分析Flask的核心特性,以及如何利用它来实现资源的合理划分、接口的版本控制和请求处理优化等,来指导读者打造高性能的API服务。文中不仅提供了理论指导,还包括了实践案例,旨在帮助开发者提升开发效率,并增强应用的稳定性和用户体验。
|
8天前
|
Java 程序员 API
Java 8 Lambda 表达式和Stream API:概念、优势和实战应用
【5月更文挑战第20天】在Java 8中,Lambda 表达式和Stream API是两个非常强大的特性,它们显著改变了Java程序员处理数据和编写代码的方式。本篇技术文章将深入探讨这些特性的概念、优点,并提供实战示例,帮助理解如何有效地利用这些工具来编写更简洁、更高效的代码。
28 6
|
11天前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
11天前
|
JSON JavaScript 前端开发
Jquery常用的选择器有哪些?用途有什么不同?
Jquery常用的选择器有哪些?用途有什么不同?
|
13天前
|
监控 供应链 数据挖掘
抖音电商新篇章:douyin.item_get API接口的深度应用
douyin.item_get接口最基本的应用就是获取商品的详细信息。商家可以通过输入商品的ID或链接,获取商品的标题、价格、图片、描述、规格等关键信息。这些信息对于商家来说至关重要,可以帮助他们了解商品的销售情况、竞争态势以及市场需求。
|
13天前
|
供应链 搜索推荐 API
API在电子商务中的应用与优势:深入解析
API是电子商务成功的关键,它们不仅促进了技术创新,还提高了用户体验和运营效率。随着技术的不断进步,API将继续在电子商务领域发挥更加重要的作用。电子商务平台通过利用API,可以更加灵活地适应市场变化,提供更加丰富和个性化的购物体验,最终实现业务的增长和扩展。