溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

大話jQuery--選擇器(2)

發(fā)布時間:2020-03-30 20:19:42 來源:網(wǎng)絡(luò) 閱讀:2766 作者:xcf007 欄目:web開發(fā)
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")
向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI