選擇器的意義就是將眾多html代碼中準確的找出我們想找的單元。
接下來將常見的選擇器以及作用列舉出來。
基本選擇器
$('#test1').css('background' , 'gray');可以找到id = test1的單元。$('p').css('background' , 'blue');所有的P標簽都會被選中。 $('.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屬于同一級別。將被選中。基礎過濾器
例：
<ul><li> 導航 1</li><li> 導航 2</li><li> 導航 3</li><li> 導航 4</li><li> 導航 5</li><li> 導航 6</li></ul>
例如這樣的，你想細致到具體的某一個。則需要加上特殊的說明
$('li:first').css('background','red');找第 1 個
$('li:odd').css('background','blue');找第奇數個 , 從 0 計數這里有一個細節，就是我們通常認為的第一個，在這里認為成第0個，就是說如果用這個的話，則是我們經常輸出來的2 4 6 8個將被選中。換成even則是選出所有偶數的li了
$('li:eq(2)').css('background' , 'purple');同上選出第二個，就是我們通常所屬的第三個。
內容過濾器
可以通過內容找到要找的目標
$('td:contains(" 女 ")').css('background' , 'blue');可以選出內容是女的單元
<td> 女 </td>
但是不會選出
<td> 趙云女 </td>
這樣的
$('td:empty').css('background' , 'green');Empty是空的意思，所以內容為空的都會選出來，但是，如果內容內有空格的話，就不會選中了
$('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');這兩個是一個性質的
<input type="text" />
選中input里的type屬性作為目標。
其他屬性password則替換text就可以了同理。
可見性過濾器
$('div:hidden').css('display','block');利用觸發器，可以選中原本display屬性為hidden的div。
子元素過濾器
$('p:last-of-type').css('background','gray');可以選中同一級別下最后一個P標簽。
<div><p>a</p><p>b</p></div>
這樣的話，含有b的p標簽就會被涂上顏色。
特殊情況
<div></div><div class='a1'><div></div><div></div><div class='a2'></div></div>
兩個有class名的div會被產生作用。
$('li a:only-child').css('background','blue')匹配 li 下作為獨生子的 a 標簽。例如
<li><a href=""> 導航 </a></li>
不能有其他標簽，但是可以有內容。
以上所述是小編給大家介紹的jQuery常見的選擇器及用法介紹，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
