最新的Web開發教程
 

jQuery選擇器


jQuery的選擇器

使用我們的jQuery選擇測試儀來演示不同的選擇。

選擇 選擇
* $("*") 所有元素
# id $("#lastname") 與元素id="lastname"
. class $(".intro") 與所有元素class="intro"
. class, . class $(".intro,.demo") 與所有元素class "intro""demo"
element $("p") 所有<p>元素
el1 , el2 , el3 $("h1,div,p") 所有<h1>, <div> <p> <h1>, <div> <p>元素
   
:first $("p:first") 第一個<p>元素
:last $("p:last") 最後一個<p>元素
:even $("tr:even") 所有甚至<tr>元素
:odd $("tr:odd") 所有奇數<tr>元素
   
:first-child $("p:first-child") 所有<p>這是他們的父母的第一個孩子元素
:first-of-type $("p:first-of-type") 所有<p>這是第一要素<p>它們的父元素
:last-child $("p:last-child") 所有<p>元素是其父的最後一個子
:last-of-type $("p:last-of-type") 所有<p>元素是最後<p>它們的父元素
:nth-child( n ) $("p:nth-child(2)") 所有<p>元素是其父母的第二個孩子
:nth-last-child( n ) $("p:nth-last-child(2)") 所有<p>元素是其父母的第二個孩子,從最後一個子計數
:nth-of-type( n ) $("p:nth-of-type(2)") 所有<p>這是第二個元素<p>它們的父元素
:nth-last-of-type( n ) $("p:nth-last-of-type(2)") 所有<p>這是第二個元素<p>它們的父元素,從最後一個子計數
:only-child $("p:only-child") 所有<p>這是他們的父母的獨子元素
:only-of-type $("p:only-of-type") 所有<p>這是唯一的孩子,它的類型,它們的父元素
   
parent > child $("div > p") 所有<p>這是一個直接子元素<div>元素
parent descendant $("div p") 所有<p>這是一個的後代元素<div>元素
element + next $("div + p")<p>元素是一個接一個<div>元素
element ~ siblings $("div ~ p") 所有<p>這是姐弟元素<div>元素
   
:eq( index ) $("ul li:eq(3)") 在列表中的第四個元素(索引從0開始)
:gt( no ) $("ul li:gt(3)") 與索引列表元素大於3
:lt( no ) $("ul li:lt(3)") 與索引列表元素小於3
:not( selector ) $("input:not(:empty)") 所有輸入元素不為空
   
:header $(":header") 所有頭元素<h1>, <h2> ...
:animated $(":animated") 所有的動畫元素
:focus $(":focus") 當前具有焦點的元素
:contains( text ) $(":contains('Hello')") 其中包含文本的所有元素"Hello"
:has( selector ) $("div:has(p)") 有一個<p>元素所有<div>元素
:empty $(":empty") 這是空的所有元素
:parent $(":parent") 這是另一種元素的父所有元素
:hidden $("p:hidden") 所有隱藏的<p>元素
:visible $("table:visible") 所有可見的表
:root $(":root") 該文檔的根元素
:lang( language ) $("p:lang(de)") 所有<p>用lang屬性值開始的元素"de"
   
[ attribute ] $("[href]") 與所有元素href屬性
[ attribute = value ] $("[href='default.htm']") 與所有元素href屬性值等於"default.htm"
[ attribute != value ] $("[href!='default.htm']") 與所有元素href屬性值不等於"default.htm"
[ attribute $= value ] $("[href$='.jpg']") 與所有元素href結尾的屬性值".jpg"
[attribute|=value] $("[title|='Tomorrow']") 帶有標題的所有元素屬性值等於'Tomorrow' ,或開始'Tomorrow'後跟一個連字符
[attribute^=value] $("[title^='Tom']") 帶有標題的所有元素屬性值開始的"Tom"
[attribute~=value] $("[title~='hello']") 具有title屬性值的所有元素都包含特定單詞"hello"
[attribute*=value] $("[title*='hello']") 具有title屬性值的所有元素都包含單詞"hello"
   
:input $(":input") 所有輸入元素
:text $(":text") 所有輸入元素與type="text"
:password $(":password") 所有輸入元素與type="password"
:radio $(":radio") 所有輸入元素與type="radio"
:checkbox $(":checkbox") 所有輸入元素與type="checkbox"
:submit $(":submit") 與所有的輸入元素type="submit"
:reset $(":reset") 與所有的輸入要素type="reset"
:button $(":button") 所有輸入元素與type="button"
:image $(":image") 所有輸入元素與type="image"
:file $(":file") 所有輸入元素與type="file"
:enabled $(":enabled") 所有enabled輸入元素
:disabled $(":disabled") 所有disabled輸入元素
:selected $(":selected") 所有selected輸入元素
:checked $(":checked") 所有checked輸入元素