鋒利的jQuery學習筆記之jQuery選取器

來源:互聯網
上載者:User

標籤: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選取器

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.