Jquery 选择器

╰半橙微兮° 2021-10-08 05:58 601阅读 0赞

使用特殊操作符或“组合符”可以将简单选择器组合起来,表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。

下面是组合选择器的一些例子:










1


2


3


4



“blockquote i”              
//匹配<blockquote>里的<i>元素


“ol > li”                   
//<1i>元素是<of>的直接子元素


“#output+*”                 
//id=”output”元素后面的兄弟元素


“div.note > h1+p”           
//紧跟<h1>的<P>元素,在<div class=”note”>里面

注意组合选择器并不限于组合两个选择器:组合三个甚至更多选择器也是允许的。组合选择器从左到右处理。

3、选择器组

传递给$()函数(或在样式表中使用)的选择器就是选择器组,这是一个逗号分隔的列表,由一个或多个简单选择器或组合选择器构成。选择器组匹配的元 素只要匹配该选择器组中的任何一个选择器就行。对我们来说,一个简单选择器也可以认为是一个选择器组。下面是选择器组的一些例子:










1


2


3


4



“h1, h2,h3”             
//匹配<h1>, <h2>和<h3>元素


“#p1, #p2, #p3”         
//匹配id为p1, p2或p3的元素


“div.note, p.note”      
//匹配class=”note”的<div>和<P>元素


“body>p,div.note>p”     
//<body>和<div class=”note”>的<P>子元素

注意:CSS和jQuery选择器语法允许在简单选择器的某些过滤器中使用圆括号,但并不允许使用圆括号来进行更常见的分组。例如,不能把选择器组或组合选择器放在圆括号中并且当成简单选择器:










1


2



(h1, h2, h3)+p         
//非法


h1+p, h2+p, h3+p       
//正确的写法

  二、选取方法

除了$()函数支持的选择器语法,jQuery还定义了一些选取方法。本章中我们已看到过的大部分jQuery方法都是在选中元素上执行某种操作。选取方法不一样:它们会修改选中元素集,对其进行提取、扩充或仅作为新选取操作的起点。

本节描述这些选取方法。你会注意到这些选取方法中的多数提供的功能与选择器语法的功能是一样的。

提取选中元素最简单的方式是按位置提取。first()返回的jQuery对象仅包含选中元素中的第一个,last()返回的jQuery对象则只 包含最后一个元素。更通用的是,eq()方法返回物Query对象只包含指定序号的单个选中元素。(在jQuery 1.4中,负序号也是允许的,会从选区的末尾开始计数。)注意这些方法返回的jQuery对象只含有一个元素。这与常见的数组序号是不一样的,数组序号返 回的单一元素没有经过jQuery包装:










1


2


3


4


5


6



var 
paras=$(
“p”
);


paras.first()          
//仅选取第一个<p>元素


paras.last()           
//仅选取最后一个<P>


paras.eq(1)            
//选取第二个<P>


paras.eq(-2)          
//选取倒数第二个<P>


paras[1]               
//第二个<P>元素自身

通过位置提取选区更通用的方法是slice()o jQuery的slice()方法与Array.slice()方法类似:前者接受开始和结束序号(负序号会从结尾处计算),返回的jQuery对象包含 从开始到结束序号(但不包含结束序号)处的元素集。如果省略结束序号,返回的对象会包含从开始序号起的所有元素:










1


2



$(
“p”
).slice(2,5)      
//选取第3个、第4个和第5个<P>元素


$(
“div”
).slice(-3)     
//选取最后3个<div>元素

filter()是通用的选区过滤方法,有3种调用方式:

  1.   传递选择器字符串给filter(),它会返回一}jQuery对象,仅包含也匹配该选择器的选中元素。
  2.   传递另一个jQuery对象给filter(),它会返回一个新的jQuery对象,该对象包含这两们Query对象的交集。也可以传递元素数组甚至单一文档元素给filter()。
  3.   传递判断函数给filter(),会为每一个匹配元素调用该函数,filter()则返回一个jQuery对象,仅包含判断函数为true(或任意真值)的元素。在调用判断函数时,this值为当前元素,参数是元素序号。










    1


    2


    3



    $(
    “div”
    ).filter(
    “.note”
    )       
    //与$(“div.note”)一样


    $(
    “div”
    ).filter($(
    “.note”
    ))    
    //与$(“div.note”)一样


    $(
    “div”
    ).filter(
    function
    (idx){
    return 
    idx%2 == 0})        
    //与$(“div:even”)一样

not()方法与filter()一样,除了含义与filter()相反。如果传递选择器字符串给not()它会返回一个新的jQuery对象,该 对象只包含不匹配该选择器的元素。如果传递jQuery对象、元素数组或单一元素给not(),它会返回除了显式排除的元素之外的所有选中元素。如果传递 判断函数给not(),该判断函数的调用就与在filter()中一样,只是返回的jQuery对象仅包含那些使得判断函数返回false或其他假值的元 素:










1



$(
“div”
).not(
“#header, #footer”
);       
//除了两个特殊元素之外的所有元素

  在jQuery 1.4中,提取选区的另一种方式是has()方法。如果传入选择器,has()会返回一个新的jQuery对象,仅包含有子孙元素匹配该选择器的选中元素。如果传入文档元素给has(),它会将选中元素集调整为那些是指定元素祖先节点的选中元素:










1



$(
“p”
).has(
“a[href]”
)        
//包含链接的段落

add()方法会扩充选区,而不是对其进行过滤或提取。可以将传给$()函数的任何参数(除了函数)照样传给add()方法。add()方法会返回 原来的选中元素,加上传给$()函数的那些参数所选中(或创建)的那些元素。add()会移除重复元素,并对该组合选区进行排序,以便里面的元素按照文档 中的顺序排列:










1


2


3


4


5


6



//选取所有<div>和所有<P>元素的等价方式


$(
“div, p”
)            
//使用选择器组


$(
“div”
).add(p)        
//给add()传入选择器


$(
“div”
).add($(
“p”
))   
//给add()传入jQuery对象


var 
paras = document.getElementsByTagName(
“p”
);      
//类数组对象


$(
“div”
).add(paras);       
//给add()传入元素数组

1.将选中元素集用做上下文

上面描述的filter(). add()、和not()方法会在各自的选中元素集上执行交集、并集和差集运算。jQuery还定义一些其他选取方法可将当前选中元素集作为上下文来使 用。对选中的每一个元素,这些方法会使用该选中元素作为上下文或起始点来得到新的选中元素集,然后返回一个新的jQuery对象,包含所有新的选中元素的 并集。与add()方法类似,会移除重复元素并进行排序,以便元素会按照在文档中出现的顺序排列好。

该类别选取方法中最通用的是find()。它会在每一个当前选中元素的子孙元素中寻找与指定选择器字符串匹配的元素,然后它返回一个新的 jQuery对象来代表所匹配的子孙元素集。注意这些新选中的元素不会并入已存在的选中元素集中。同时注意find()和filter()不 同,filter()不会选中新元素,只是简单地将当前选中的元素集进行缩减:










1



$(
“div”
).find(
“p”
)           
//在中查找元素,与$(“div p”)相同

该类别中的其他方法返回新的jQuery对象,代表当前选中元素集中每一个元素的子元素、兄弟元素或父元素。大部分都接受可选的选择器字符串作为参数。不传入选择器时,它们会返回所有子元素、兄弟元素或父元素。传入选择器时,它们会过滤元素集,仅返回匹配的。

children()方法返回每一个选中元素的直接子元素,可以用可选的选择器参数进行过滤:










1


2


3



//寻找id为”header”和”footer”元素的子节点元素中的所有<span>元素


//与$(“#header>span, #footer>span”)相同


$(
“#header, #footer”
).children(
“span”
)

contents()方法与children()方法类似,不同的是它会返回每一个元素的所有子节点,包括文本节点。如果选中元素集中 有

发表评论

表情:
评论列表 (有 0 条评论,601人围观)

还没有评论,来说两句吧...

相关阅读

    相关 jQuery选择

    jQuery选择器   jq 选择器和 css 的选择器语法类似, jq 的选择器是他的灵魂   就是将 html 中的节点元素选择出来的语法,   jq 的选择器

    相关 Jquery 选择

    使用特殊操作符或“组合符”可以将简单选择器组合起来,表达文档树中元素之间的关系。下表列举了jQuery支持的组合选择器。这些组合选择器与CSS3支持的组合选择器是一样的。 下