Jquery偽類選擇器加與不加空格的區別

2021-07-11 12:26:35 字數 1368 閱讀 6192

本文使用的html**如下:

class="one"

id="one">

id為one,class為one的div

class="mini">class為mini的div

div>

div>

class="one"

id="two" title="test">

id為one,class為one,title為test的div

class="mini" title=other>class為mini,title為other的div

div>

class="mini" title=test>class為mini,title為test的div

div>

div>

$(

'div.one :nth-child(2)').css("background","#bbffaa");

**執行效果如下:

加空格表示:選擇class為one的div內的第二個子元素

$(

'div.one:nth-child(2)').css("background","#bbffaa");

**執行效果如下:

不加空格表示:選擇class為one的div並且該div是其父元素下第二個子元素

之所以會出現上述不同的結果,就是由於後代選擇器和過濾選擇器的不同造成的:

-偽類選擇器前加空格:選擇的是元素的後代子元素;

-偽類選擇器前不加空格:選擇的是元素本身;

再看《鋒利的jquery》中提到的例子

$(

".test :hidden");

//帶空格的jquery選擇器

//選取class為「test」的元素內的隱藏子元素。(空格為後代選擇器)

$(

".test:hidden");

//不帶空格的jquery選擇器

//選取class為「test」並且隱藏的元素本身

jQuery偽類選擇器

一 簡單偽類選擇器 not selector 選擇除了某個選擇器之外的所有元素 first或first 選擇某元素的第乙個元素 非子元素 last或last 選擇某元素的最後乙個元素 非子元素 odd 選擇某元素的索引值為奇數的元素 even 選擇某元素的索引值為偶數的元素 eq index 選擇給...

JQuery 偽類選擇器

ul li one li li two li li three li ul 所有的偽類選擇器,都將圍繞上面的html 第乙個節點 ul li first child one 最後乙個節點 ul li last child three 第二個節點 通過索引。ul li eq 1 two 通過節點數。u...

jquery過濾選擇器前加空格與不加空格的區別

jquery過濾選擇器前加不加空格產生的效果差別是比較大的。對於這種區別可以從css選擇器的角度去理解,而且這種理解是完全正確的。可以把這些選擇器當作我們css中的類,那麼不加空格的選擇器就表示選取與該元素相關的物件,而加了空格的選擇器則表示選取與之相關的後代元素物件。例如 加空格表示 選擇clas...