選擇器的意義就是將眾多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將全部選中
www.zixue.it
www.itbool.com
這樣的也會被選中
$('p ~ span').css('background' , 'gray');
www.itbool.com
像這樣的span和p屬於同一級別。將被選中。
例:
例如這樣的,你想細緻到具體的某乙個。則需要加上特殊的說明
$('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:empty').css('background' , 'green');
empty是空的意思,所以內容為空的都會選出來,但是,如果內容內有空格的話,就不會選中了
$('td:has(span)').css('background' , 'pink');
td裡含有某元素的話,就會被找出來。
被選中的,則整個td都會被選中。比如這樣的22
不是改變span而是改變td這個單元。22
1124
$('p:parent').css('background' , 'black');
單元裡面有東西的都會被選中,但是空格不算。
表單型別過濾器
這兩個是乙個性質的$('input[type="text"]').css('background' , 'gray');
$('input:text').css('background' , 'blue');
"text" />
選中input裡的type屬性作為目標。
其他屬性password則替換text就可以了同理。
可見性過濾器
$('div:hidden').css('display','block');
利用觸發器,可以選中原本display屬性為hidden的div。
子元素過濾器
$('p:last-of-type').css('background','gray');
可以選中同一級別下最後乙個p標籤。
這樣的話,含有b的p標籤就會被塗上顏色。a
b
特殊情況
兩個有class名的div會被產生作用。
class='a1'>
div>
div>
class='a2'>div>
div>
$('li a:only-child').css('background','blue')
匹配 li 下作為獨生子的 a 標籤。例如
不能有其他標籤,但是可以有內容。""> 導航
常用的選擇器介紹到此結束。謝謝**。
Jquery 選擇器 簡單的選擇器
1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...
JQuery選擇器 選擇器簡介
在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...
Jquery選擇器 基本選擇器
jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...