欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery常見的選擇器及用法介紹

 更新時間：2016年12月20日 10:03:26   作者：布爾教育  
選擇器的意義就是將眾多html代碼中準(zhǔn)確的找出我們想找的單元。接下來將常見的選擇器以及作用列舉出來，對jQuery常見的選擇器及用法感興趣的朋友一起看看吧

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

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

基本選擇器

$('#test1').css('background' , 'gray');
可以找到id = test1的單元。
$('p').css('background' , 'blue');
所有的P標(biāo)簽都會被選中。
 $('.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>
這樣的也會被選中
$('p ~ span').css('background' , 'gray');
<div><p></p><span>www.itbool.com</span></div>
像這樣的span和P屬于同一級別。將被選中。

基礎(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ì)致到具體的某一個。則需要加上特殊的說明

$('li:first').css('background','red');

找第 1 個

$('li:odd').css('background','blue');

找第奇數(shù)個 , 從 0 計數(shù)這里有一個細(xì)節(jié)，就是我們通常認(rèn)為的第一個，在這里認(rèn)為成第0個，就是說如果用這個的話，則是我們經(jīng)常輸出來的2 4 6 8個將被選中。換成even則是選出所有偶數(shù)的li了

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

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

內(nèi)容過濾器

可以通過內(nèi)容找到要找的目標(biāo)

$('td:contains(" 女 ")').css('background' , 'blue');

可以選出內(nèi)容是女的單元

<td> 女 </td>

但是不會選出

<td> 趙云女 </td>

這樣的

$('td:empty').css('background' , 'green');

Empty是空的意思，所以內(nèi)容為空的都會選出來，但是，如果內(nèi)容內(nèi)有空格的話，就不會選中了

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

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

<td><span>22</span></td>

被選中的，則整個td都會被選中。比如這樣的

<td><span>22</span><p>11</p>24</td>

不是改變span而是改變td這個單元。

$('p:parent').css('background' , 'black');

單元里面有東西的都會被選中，但是空格不算。

表單類型過濾器

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

這兩個是一個性質(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');

可以選中同一級別下最后一個P標(biāo)簽。

<div><p>a</p><p>b</p></div>

這樣的話，含有b的p標(biāo)簽就會被涂上顏色。

特殊情況

<div></div>
<div class='a1'>
<div></div>
<div></div>
<div class='a2'></div>
</div>

兩個有class名的div會被產(chǎn)生作用。

$('li a:only-child').css('background','blue')

匹配 li 下作為獨生子的 a 標(biāo)簽。例如

<li><a href=""> 導(dǎo)航 </a></li>

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

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

相關(guān)文章

最新評論