標籤:ccf ted ack 大於 一個 指定 通過 學生 返回
在介紹jQuery選取器之前,先簡單介紹一下CSS選取器--->
一、CSS選取器
常見的CSS選取器有以下幾種:
選取器 |
文法 |
描述 |
樣本 |
標籤選取器 |
E{CSS規則} |
以文件項目為選擇符 |
td{font-size:10px;} a{tetx-decoration:none;} |
ID選取器 |
#ID{CSS規則} |
以文件項目的唯一標示ID為選擇符 |
#node{corlor:red;} |
類別選取器 |
.className{CSS規則} |
以文件項目的class作為選擇符 |
div.node{background-color:yellow;} |
群組選取器 |
E1,E2,E3{CSS規則} |
以多個文件項目作為選擇符 |
p,div,a,span{font-size:10px;} |
後代選取器 |
E F{CSS規則} |
以元素E的任意後代元素F作為選取器 |
div input{font:10px black;} |
通配選取器 |
*{CSS規則} |
以文檔所有元素作為選取器 |
*{font-size:10px;} |
二、jQuery選取器
jQuery選取器完全繼承CSS選取器,可以快速找到DOM元素並添加對應的行為。
jQuery共有基本選取器、層次選取器、過濾選取器和表單選取器。下面對這幾類別選取器一一介紹
1、基本選取器
基本選取器
選取器 |
描述 |
返回 |
樣本 |
element |
根據給定的元素名稱匹配元素 |
集合元素 |
$("p")選取所有的p元素 |
#id |
根據給定的id匹配指定的元素 |
一個元素 |
$("#nodeName")選取id為nodeName的元素 |
#className |
根據給定的class名稱匹配元素 |
集合元素 |
$("div.span")選擇class為span的所有div |
* |
匹配所有的元素 |
集合元素 |
$("*")選擇所有的元素 |
selecter1,selecter,...,selecterN |
將每一個選取器匹配的元素合并後返回 |
集合元素 |
$("div,span,p.info")選擇所有的div\span和class為info的p元素 |
2、層次選取器
層次選取器
選取器 |
描述 |
返回 |
樣本 |
$("ancestor descendant") |
選擇ancestor裡的所有descendant(後代)元素 |
集合元素 |
$("div span")選取div裡的所有span元素 |
$("parent > child") |
選擇parent的child(子)元素 PS:$("ancestor descendant")是選擇後代(包括孫輩元素) $("parent > child")只選擇子項目 |
集合元素 |
$("div > span")選擇div元素下名為span的子項目 |
$("pre + next‘) |
選擇緊接在pre元素後的下一個同輩元素 |
集合元素 |
$(".one + div")選擇class為one後面的第一個div同輩元素 |
$("pre ~ siblings") |
選擇pre元素後面的所有同輩元素 |
集合元素 |
$("#two ~ div")選擇id為two後面的所有div同輩元素 |
jQuery中的方法可以代替上面的某些選取器:
- next()方法等價於$("pre + next")。所以$(".one + div")就等價於$(".one").next();
- nextAll()方法等價於$("pre ~ siblings")。所以$("#two ~ div")就等價於$("#two").nextAll();
- siblings()方法是擷取當前元素的所有同輩元素,不分前後;
3、過濾選取器
過濾選取器主要是通過特定的過濾規則來篩選出所需的DOM元素,過濾規則與CSS的偽類別選取器文法相同,即選取器都是以一個冒號(:)開頭,按照不同的過濾規則,過濾選取器可以分為:
基本過濾、內容過濾、可見度過濾、屬性過濾、子項目過濾、表單對象屬性過濾
基本過濾選取器
選取器 |
描述 |
返回 |
樣本 |
:first |
選擇第一個元素 |
單個元素 |
$("div:first")選擇所有div中的第一個元素 |
:last |
選擇最後一個元素 |
單個元素 |
$("div:last")選擇所有div中的最後一個元素 |
:not(selector) |
去所有與給定選取器匹配的元素 |
集合元素 |
$("div:not(‘.div1‘)")選擇class不是div1所有div元素 |
:even |
選擇索引值為偶數的元素 |
集合元素 |
$("tr:even")選擇索引值為偶數的tr元素 |
:odd |
選擇索引值為奇數的元素 |
集合元素 |
$("tr:odd")選擇索引值為奇數的tr元素 |
:eq(index) |
選擇索引值等於index的元素 |
單個元素 |
$("input:eq(2)")選擇索引值為2的元素,即第三個input元素(索引從0開始) |
:gt(index) |
選擇索引值大於index的元素 |
集合元素 |
$("inputgt(2)")選擇索引值大於2的元素,即第三個input後面的元素(索引從0開始) |
:lt(index) |
選擇索引值小於index的元素 |
集合元素 |
$("input:lt(2)")選擇索引值小於2的元素,即第三個input前面的元素(索引從0開始) |
:header |
選擇所有的標題元素,例如h1,h2等 |
集合元素 |
$("header")選擇網頁中所有的標題元素h1到h6 |
:animated |
選擇當前正在執行動畫的元素 |
集合元素 |
$("div:animated")選擇正在執行動畫的div元素 |
:focus |
選擇所有擷取焦點的元素 |
集合元素 |
$(":focus")選擇網頁中所有擷取焦點的元素 |
內容過濾選取器:它的過濾規則主要體現在它所包含的子項目或常值內容上。
內容過濾選取器
選取器 |
描述 |
返回 |
樣本 |
:contains(text) |
選擇常值內容包含text的元素 |
集合元素 |
$("div:contains(‘學生‘)")選擇常值內容包含“學生”的所有div元素 |
:empty |
選擇不包含子項目或內容為空白的元素 |
集合元素 |
$("div:empty")選擇不包含子項目或者內容為空白的div元素 |
:has(selector) |
選擇包含匹配選取器元素的元素 |
集合元素 |
$("div:has(p)")選擇包含p元素的div元素 |
:parent |
選擇含有子項目或者文本的元素 |
集合元素 |
$("div:parent")選擇含有子項目或者常值內容不為空白的div元素 |
可見度過濾選取器根據元素的可見和不可見度來選擇元素。
可見度過濾選取器
選取器 |
描述 |
返回 |
樣本 |
:hidden |
選擇所有的隱藏元素 |
集合元素 |
$(":hidden")選擇頁面所有的隱藏元素 PS:隱藏元素包括樣式屬性display為none,visibility為hidden及隱藏的表單域 |
:visible |
選擇所有的可見元素 |
集合元素 |
$("div:visible")選擇所有可見的div元素 |
屬性過濾選取器是根據元素屬性選擇相應的元素
屬性過濾選取器
過濾器 |
描述 |
返回 |
樣本 |
[attribute] |
選擇包含該屬性的元素 |
集合元素 |
$("div[id]")選擇含有id屬性的div元素 |
[attribute=value] |
選擇屬性值等於value的元素 |
集合元素 |
$("div[id=‘div1‘]")選擇id屬性值等於div1的div元素 |
[attribute!=value] |
選擇屬性值不等於value的元素 |
集合元素 |
$("div[id!=‘div1‘]選擇id屬性值不等於div1的div元素 |
[attribute^=value] |
選擇屬性值以value開頭的元素 |
集合元素 |
$("div[id^=‘div1‘]選擇id屬性值以div1開頭的div元素 |
[attribute$=value] |
選擇屬性值以value結尾的元素 |
集合元素 |
$("div[id$=‘div1‘]選擇id屬性值以duv1結尾的div元素 |
[attribute*=value] |
選擇屬性值包含value的元素 |
集合元素 |
$("div[id*=‘div1‘]選擇id屬性值包含div1的div元素 |
[attribute|=value] |
選擇屬性值為value或以value為首碼(該字串後面跟一個連字號’-‘)的元素 |
集合元素 |
$("div[id|=‘div1‘]選擇id屬性值為div1或者以div1為首碼的div元素 |
[attribute~=value] |
選擇屬性用空格分隔的值中包含一個給定值的元素 |
集合元素 |
$("div[id~=‘div1‘]選擇id屬性用空格分隔的值中等於div1的div元素 |
[attribute1][attribute2][attribute3] |
用屬性選取器合并成一個複合屬性選取器,滿足多個條件,沒選擇依一次,縮小一次選擇 |
集合元素 |
$("div[id][title=‘hello‘])選擇含有id屬性並且title的屬性值為hello的div元素 |
子項目過濾選取器是針所有父元素進行過濾,而不只是某一個指定的父元素
子項目過濾選取器
選取器 |
描述 |
返回 |
樣本 |
:nth-child(index/even/odd/equation) |
選擇每個父元素下第index的子項目或者奇偶於元素(index從1開始) |
集合元素 |
:eq(index)只匹配一個元素,而:nth-child(index)將匹配每一個父元素中索引值為index的子項目,且前者的索引從0開始,後者索引從1開始。 |
:first-child |
選擇每個父元素的第一個子項目 |
集合元素 |
:first只返回單個元素,而:first-child將返回每一個父元素中的第一個元素 $("ul li:last-child")選擇每個ul中的第一個元素 |
:last-child |
選擇每一個父元素的最後一個子項目 |
集合元素 |
:last只返回打個元素,而:last-child將返回每一個父元素中的最後一個元素 $("ul li:first-child")選擇每個ul中的最後一個元素 |
:only-child |
如果某個元素是它父元素中的唯一子項目,那麼它將被匹配,否則不會被匹配 |
集合元素 |
$("ul li:only-child")擷取的是ul中的唯一子項目li |
表單元素屬性過濾器,主要是對所選擇的的表單元素進行過濾。
表單對象屬性過濾器
選取器 |
描述 |
返回 |
樣本 |
:enabled |
選擇所有可用的表單元素 |
集合元素 |
$("#form1 :enabled")選擇id=form1的表單內所有可用元素 |
:disabled |
選擇所有停用表單元素 |
集合元素 |
$("#form1 :disabled")選擇id=form1的表單內所有不可用元素 |
:checked |
選擇所有被選中的元素(包括單選框、複選框) |
集合元素 |
$("#input:checked")選擇所有被選中的input元素 |
:selected |
選擇所有被選中的選項元素(下拉式清單) |
集合元素 |
$("select option:selected")選擇i所有被選中的選項元素 |
至此,所有的過濾選取器就介紹完了,下面介紹最後一種選取器-----表單選取器
3、表單選取器
利用表單選取器可以方便地擷取到某個或某種類型的元素
表單選取器
選取器 |
描述 |
返回 |
樣本 |
:input |
選擇所有的input、textarea、button、select元素 |
集合元素 |
$(":input")選擇所有的input、textarea、select、button元素 |
:text |
選擇所有的單行文字框 |
集合元素 |
$(":text")選擇所有的單行文字框 |
:password |
選擇所有的密碼框 |
集合元素 |
$(":password")選擇所有的密碼框 |
:radio |
選擇所有的單選框 |
集合元素 |
$(":radio")選擇所有的單選框 |
:checkbox |
選擇所有的複選框 |
集合元素 |
$(":checkbox")選擇所有的複選框 |
:submit |
選擇所有的提交按鈕 |
集合元素 |
$(":submit")選擇所有的提交按鈕 |
:image |
選擇所有的圖片按鈕 |
集合元素 |
$(":image")選擇所有的圖片按鈕 |
:reset |
選擇所有的重設按鈕 |
集合元素 |
$(":reset")選擇所有的重設按鈕 |
:button |
選擇所有的按鈕 |
集合元素 |
$(":button")選擇所有的按鈕 |
:file |
選擇所有的上傳域 |
集合元素 |
$(":file")選擇搜有的上傳域 |
:hidden |
選擇所有的隱藏欄位 |
集合元素 |
$(":hidden")選擇所有的隱藏欄位(這個已經在之前的不可見度過濾器中講到過) |
以上就是jQuery中所有的選取器及使用方法,這麼多的選取器,要想每一個都能理解,關鍵還在實踐。
鋒利的jQuery學習筆記之jQuery選取器