ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
 

jQuery selectors


jQuery Selectors

ใช้งานของเรา 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> องค์ประกอบที่เป็นลูกคนที่ 2 ของพ่อแม่
:nth-last-child( n ) $("p:nth-last-child(2)") ทั้งหมด <p> องค์ประกอบที่เป็นลูกคนที่ 2 ของผู้ปกครองของพวกเขานับจากเด็กที่ผ่านมา
:nth-of-type( n ) $("p:nth-of-type(2)") ทั้งหมด <p> องค์ประกอบที่ 2 <p> องค์ประกอบของพ่อแม่ของพวกเขา
:nth-last-of-type( n ) $("p:nth-last-of-type(2)") ทั้งหมด <p> องค์ประกอบที่ 2 <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)") ทั้งหมด <div> องค์ประกอบที่มี <p> องค์ประกอบ
: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']") องค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ชื่อที่มีเฉพาะคำ "hello"
[attribute*=value] $("[title*='hello']") องค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ชื่อมีคำว่า "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 องค์ประกอบของการป้อนข้อมูล