選擇器的意義就是將眾多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)容。

常用的選擇器介紹到此結(jié)束。謝謝觀看。