成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

選擇器的意義就是將眾多html代碼中準(zhǔn)確的找出我們想找的單元。

接下來將常見的選擇器以及作用列舉出來。

基本選擇器

$('#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ǔ)過濾器

例：

<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è)。則需要加上特殊的說明

$('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è)，就是說如果用這個(gè)的話，則是我們經(jīng)常輸出來的2 4 6 8個(gè)將被選中。換成even則是選出所有偶數(shù)的li了

$('li:eq(2)').css('background' , 'purple');

同上選出第二個(gè)，就是我們通常所屬的第三個(gè)。

內(nèi)容過濾器

可以通過內(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ì)選出來，但是，如果內(nèi)容內(nèi)有空格的話，就不會(huì)選中了

$('td:has(span)').css('background' , 'pink');

td里含有某元素的話，就會(huì)被找出來。

<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ì)被選中，但是空格不算。

表單類型過濾器

$('input[type="text"]').css('background' , 'gray');
$('input:text').css('background' , 'blue');

這兩個(gè)是一個(gè)性質(zhì)的

<input type="text" />

選中input里的type屬性作為目標(biāo)。

其他屬性password則替換text就可以了同理。

可見性過濾器

$('div:hidden').css('display','block');

利用觸發(fā)器，可以選中原本display屬性為hidden的div。

子元素過濾器

$('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 > 導(dǎo)航 </a></li>

不能有其他標(biāo)簽，但是可以有內(nèi)容。

以上所述是小編給大家介紹的jQuery常見的選擇器及用法介紹，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)綠夏網(wǎng)網(wǎng)站的支持！