top
Loading...
jQuery 選擇器

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> 元素
:first $("p:first") 第一個 <p> 元素
:last $("p:last") 最後一個 <p> 元素
:even $("tr:even") 所有偶數 <tr> 元素,索引值從 0 開始,第一個元素是偶數 (0),第二個元素是奇數 (1),以此類推。
:odd $("tr:odd") 所有奇數 <tr> 元素,索引值從 0 開始,第一個元素是偶數 (0),第二個元素是奇數 (1),以此類推。
: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") <div> 元素的直接子元素的所有 <p> 元素
parent descendant $("div p") <div> 元素的後代的所有 <p> 元素
element + next $("div + p") 每個 <div> 元素相鄰的下一個 <p> 元素
element ~ siblings $("div ~ p") <div> 元素同級的所有 <p> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四個元素(index 值從 0 開始)
:gt(no) $("ul li:gt(3)") 列舉 index 大於 3 的元素
:lt(no) $("ul li:lt(3)") 列舉 index 小於 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)") 所有 lang 屬性值為 "de" 的 <p> 元素
     
[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']") 所有帶有 title 屬性且值等於 'Tomorrow' 或者以 'Tomorrow' 後跟連接符作為開頭的字符串
[attribute^=value] $("[title^='Tom']") 所有帶有 title 屬性且值以 "Tom" 開頭的元素
[attribute~=value] $("[title~='hello']") 所有帶有 title 屬性且值包含單詞 "hello" 的元素
[attribute*=value] $("[title*='hello']") 所有帶有 title 屬性且值包含字符串 "hello" 的元素
[name=value][name2=value2] $( "input[id][name$='man']" ) 帶有 id 屬性,併且 name 屬性以 man 結尾的輸入框
     
:input $(":input") 所有 input 元素
:text $(":text") 所有帶有 type="text" 的 input 元素
:password $(":password") 所有帶有 type="password" 的 input 元素
:radio $(":radio") 所有帶有 type="radio" 的 input 元素
:checkbox $(":checkbox") 所有帶有 type="checkbox" 的 input 元素
:submit $(":submit") 所有帶有 type="submit" 的 input 元素
:reset $(":reset") 所有帶有 type="reset" 的 input 元素
:button $(":button") 所有帶有 type="button" 的 input 元素
:image $(":image") 所有帶有 type="image" 的 input 元素
:file $(":file") 所有帶有 type="file" 的 input 元素
:enabled $(":enabled") 所有啟用的元素
:disabled $(":disabled") 所有禁用的元素
:selected $(":selected") 所有選定的下拉列表元素
:checked $(":checked") 所有選中的復選框選項
.selector $(selector).selector 在jQuery 1.7中已經不被贊成使用。返回傳給jQuery()的原始選擇器
:target $( "p:target" ) 選擇器將選中ID和URI中一個格式化的標識符相匹配的<p>元素

北斗有巢氏 有巢氏北斗