jQuery常見的選擇器及用法介紹
選擇器的意義就是將眾多html代碼中準(zhǔn)確的找出我們想找的單元。
接下來(lái)將常見的選擇器以及作用列舉出來(lái)。
基本選擇器
$('#test1').css('background' , 'gray'); 可以找到id = test1的單元。 $('p').css('background' , 'blue'); 所有的P標(biāo)簽都會(huì)被選中。 $('.test2').css('background' , 'green'); Class = test2的單元全部被選中。 $('*').css('background','pink'); *指的就是所有元素,慎用。
層次選擇器
$('div span').css('background' , 'orange'); div下的span將全部選中 <div><span>www.zixue.it</span></div> <div><p><span>www.itbool.com</span></p></div> 這樣的也會(huì)被選中 $('p ~ span').css('background' , 'gray'); <div><p></p><span>www.itbool.com</span></div> 像這樣的span和P屬于同一級(jí)別。將被選中。
基礎(chǔ)過(guò)濾器
例:
<ul> <li> 導(dǎo)航 1</li> <li> 導(dǎo)航 2</li> <li> 導(dǎo)航 3</li> <li> 導(dǎo)航 4</li> <li> 導(dǎo)航 5</li> <li> 導(dǎo)航 6</li> </ul>
例如這樣的,你想細(xì)致到具體的某一個(gè)。則需要加上特殊的說(shuō)明
$('li:first').css('background','red');
找第 1 個(gè)
$('li:odd').css('background','blue');
找第奇數(shù)個(gè) , 從 0 計(jì)數(shù)這里有一個(gè)細(xì)節(jié),就是我們通常認(rèn)為的第一個(gè),在這里認(rèn)為成第0個(gè),就是說(shuō)如果用這個(gè)的話,則是我們經(jīng)常輸出來(lái)的2 4 6 8個(gè)將被選中。換成even則是選出所有偶數(shù)的li了
$('li:eq(2)').css('background' , 'purple');
同上選出第二個(gè),就是我們通常所屬的第三個(gè)。
內(nèi)容過(guò)濾器
可以通過(guò)內(nèi)容找到要找的目標(biāo)
$('td:contains(" 女 ")').css('background' , 'blue');
可以選出內(nèi)容是女的單元
<td> 女 </td>
但是不會(huì)選出
<td> 趙云女 </td>
這樣的
$('td:empty').css('background' , 'green');
Empty是空的意思,所以內(nèi)容為空的都會(huì)選出來(lái),但是,如果內(nèi)容內(nèi)有空格的話,就不會(huì)選中了
$('td:has(span)').css('background' , 'pink');
td里含有某元素的話,就會(huì)被找出來(lái)。
<td><span>22</span></td>
被選中的,則整個(gè)td都會(huì)被選中。比如這樣的
<td><span>22</span><p>11</p>24</td>
不是改變span而是改變td這個(gè)單元。
$('p:parent').css('background' , 'black');
單元里面有東西的都會(huì)被選中,但是空格不算。
表單類型過(guò)濾器
$('input[type="text"]').css('background' , 'gray'); $('input:text').css('background' , 'blue');
這兩個(gè)是一個(gè)性質(zhì)的
<input type="text" />
選中input里的type屬性作為目標(biāo)。
其他屬性password則替換text就可以了同理。
可見性過(guò)濾器
$('div:hidden').css('display','block');
利用觸發(fā)器,可以選中原本display屬性為hidden的div。
子元素過(guò)濾器
$('p:last-of-type').css('background','gray');
可以選中同一級(jí)別下最后一個(gè)P標(biāo)簽。
<div><p>a</p><p>b</p></div>
這樣的話,含有b的p標(biāo)簽就會(huì)被涂上顏色。
特殊情況
<div></div> <div class='a1'> <div></div> <div></div> <div class='a2'></div> </div>
兩個(gè)有class名的div會(huì)被產(chǎn)生作用。
$('li a:only-child').css('background','blue')
匹配 li 下作為獨(dú)生子的 a 標(biāo)簽。例如
<li><a href=""> 導(dǎo)航 </a></li>
不能有其他標(biāo)簽,但是可以有內(nèi)容。
以上所述是小編給大家介紹的jQuery常見的選擇器及用法介紹,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
基于jquery打造的百分比動(dòng)態(tài)色彩條插件
主要是為了往后的項(xiàng)目中方便實(shí)現(xiàn)這類型的功能,在之前做問(wèn)卷調(diào)查那個(gè)應(yīng)用中,就用到這個(gè)來(lái)顯示結(jié)果,但當(dāng)時(shí)開發(fā)時(shí)并不用是插件的,一大堆代碼,看也煩,用起來(lái)很麻煩2012-09-09Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI Datagrid右鍵菜單的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可拖拽模態(tài)對(duì)話框完整實(shí)例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊按鈕彈出可拖拽模態(tài)對(duì)話框的方法,結(jié)合完整實(shí)例形式分析了jQuery調(diào)用模態(tài)對(duì)話框的基本原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2023-04-04jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢實(shí)例分析
這篇文章主要介紹了jsonp跨域請(qǐng)求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號(hào)碼查詢的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jsonp跨域請(qǐng)求數(shù)據(jù)的原理與查詢號(hào)碼的應(yīng)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印
jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印,不可思議吧,接下來(lái)為您介紹它的使用方法及操作步驟,感興趣的朋友可以了解下2013-01-01jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果,通過(guò)jQuery模擬select下拉選擇效果,并具有點(diǎn)擊選中下拉項(xiàng)進(jìn)入輸入框的功能,非常美觀實(shí)用,需要的朋友可以參考下2015-11-11jQuery Mobile的loading對(duì)話框顯示/隱藏方法分享
jQuery Mobile提供兩個(gè)方法,使得開發(fā)者在編寫JavaScript業(yè)務(wù)編輯時(shí),可以隨意的控制loading提示框2013-11-11