大話jQuery--選擇器(2)
1.層級關(guān)系
查找子孫元素的操作比較常見,jQuery也為我們提供了一些方便的方法,我們看看吧:
1.)祖先 后代
空格隔開,這種和css中一樣
<p>
<span>測試</span><a href="#">鏈接1</a><span>|</span><a href="#" class="link">鏈接2</a>|<a href="#">鏈接3</a>
</p>
這樣 p a就表示的是p標(biāo)簽下的鏈接,而其他的標(biāo)簽a不包括在內(nèi),其實這是一種限定范圍的方法。赤裸的a{}代表了全部的a,也就是* a{}
每加一個限制標(biāo)簽,一般范圍更小,更精確,比如div p a{}
jQuery里面這樣可以獲取
$("p a").
2.)我們有時候查找后代時,只想要第一個層面上的,也就是兒子級別上的那個,孫子重孫子那些不關(guān)心。那么下面這個派上用場了:
父 >子
對,是大于符號,表示的是父子關(guān)系
<ul>
<li>測試1</li>
<li>測試2</li>
<li>
<ol>
<li>測試31</li>
<li>測試32</li>
</ol>
</li>
</ul>
那么ul>li表示的是外層的li不包括ol里面的li,而ul li則包含。
3.pre+next
+號,表示標(biāo)簽next滿足這樣一種關(guān)系,next與pre相鄰并緊隨其后。
<p>
<a href="#">鏈接1</a><span>|</span><a href="#" class="link">鏈接2</a><span>|</span><a href="#">鏈接3</a>
</p>
<p>
<a href="#">測試</a>
<b>測試b</b>
<span>測試</span>
<a href="#"><span>哈哈</span></a>
</p>
上面代碼有多少了span呢,有4個,但是有多少個緊隨a標(biāo)簽之后內(nèi),只有前2個豎線的滿足,后面的第3個排在<b>后面,另外一個是嵌套。
那么
$("a+span").css({border:"1px solid red"});
只對前2個加邊框。
當(dāng)然了$("a+*")就是所有標(biāo)簽了,不只是限于span了。
實際中可以結(jié)合id,類構(gòu)建更復(fù)雜的應(yīng)用。
4.)prev~后面的兄弟
~找出后面的所有兄弟。
$("p span")表示所有的排在p后面的,那些兄弟span元素。
2.找孩子(哈哈)
1.上面的parent>child方法是所有的孩子。
如果我想要長子元素,或者最后一個,或者隨機找出某一個。
好在jquery提供了幾個偽類方便我們
:first-child,第一個子元素,
<p>
<a href="#">鏈接1</a><span>|</span><a href="#" class="link">鏈接2</a><span>|</span><a href="#">鏈接3</a>
</p>
$("p :first-child")大家可能容易知道是第一個鏈接1
但是如果是嵌套呢:
<p>
<a href="#">測試</a>
<b>測試b</b>
<span>測試</span>
<a href="#"><span>哈哈</span></a>
</p>
$("p :first-child")會得到2個,一個
<a href="#">測試</a>
這個好理解,
這個不要忘記<span>哈哈</span>,因為他對最后一個a來說也是長子,而且還是獨生子呢。
所有,記住:
:first-child是指的這些元素對于他們的父元素來說是長子的元素
:first-child和*:first-child同。
$("p *:first-child")也是可以的。
如果你只想找父子級別的,那么用
$("p>*:first-child")
還可以做限制篩選,比如$("p>a:first-child")表示的意思是,從p元素的鏈接孩子中看看有沒有長子a元素。
2.:last-child同上
3.隨機找:nth-child(n)這里n是從1開始的。
$("p :nth-child(3)")表示,在p的子孫元素里,找在他們家里排老三的。
$("p>:nth-child(3)")在孩子中找老三。
當(dāng)然也可以限制還可以和id,類混用。
4.:only-child
找獨生子。
注意上面的偽類和前面講的區(qū)別
比如$("p>a:first")和$("p>a:first-child")