jQuery Selector : สอน method และ property ของ Selector, เรียน method และ property ของ Selector
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • selector พื้นฐานที่ใช้ใน jQuery ได้แก่ a, #id, .class, a#id.class, a.class เป็นต้น
    selector ที่ใช้ใน jQuery เช่น E > F, E + F, E ~ F, E:has(F) เป็นต้น
    selector ที่เข้าถึงตำแหน่งใน jQuery เช่น first, last, first-child, last-child, nth-child(n) เป็นต้น
    selector ที่ใช้ในการกรอง element ของ jQuery เ่ช่น :input, :password, :checked, :visible, :header เป็นต้น
  • subject :
    selector พื้นฐานที่ใช้ใน jQuery

    content :
    a	         -> 	อ้างถึง tag a
    #id       	-> 	อ้างถึง tag ใดๆ ที่มี id ตามที่กำหนด
    .class	    -> 	อ้างถึง tag ใดๆ ที่มี class ตามที่กำหนด
    a#id.class	-> 	อ้างถึง tag a ที่มี id และ class ตามที่กำหนด
    a.class	   -> 	อ้างถึง tag a ที่มี class ตามที่กำหนด

  • subject :
    selector พื้นฐานที่ใช้ใน jQuery

    content :
    *	     -> 	อ้างถึง tag ทั้งหมด
    E	     -> 	อ้างถึง tag E ทั้งหมด
    E F	   -> 	อ้างถึง tag F ทั้งหมด ที่อยู่ภายใน tag E โดยไม่จำเป็นต้องเป็นลูกเท่านั้น
    E > F	 -> 	อ้างถึง tag F ทั้งหมด ที่อยู่ภายใน tag E โดยจำเป็นต้องเป็นลูกเท่านั้น
    E + F	 -> 	อ้างถึง tag F ทั้งหมด ที่ tag F ติดอยู่กับ tag E
    E ~ F	 -> 	อ้างถึง tag F ทั้งหมด ที่อยู่ต่อจาก tag E ที่เป็น tag ในระดับเดียวกัน
    
    E:has(F)	-> 	อ้างถึง tag E ทั้งหมด ที่มี tag F อย่างน้อย 1 tag อยู่ภายใน
    E.C	     -> 	อ้างถึง tag E ทั้งหมด ที่มี Class คือ C
    E#I	     -> 	อ้างถึง tag E ทั้งหมด ที่มี ID คือ I
    E[A]    	-> 	อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า อะไรก็ได้
    E[A=V]	  -> 	อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า V
    E[A!=V]	 -> 	อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่ไม่ใช่ค่า V
    E[A^=V]	 -> 	อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่ขึ้นต้นด้วย V
    E[A$=V]	 -> 	อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่จบด้วย V
    E[A*=V]	 -> 	อ้างถึง tag E ทั้งหมด ที่มี Attribute คือ A และ ค่าข้อมูลของ Attribute นั้นเป็นค่า ที่มีคำว่า V

  • subject :
    selector ที่เข้าถึงตำแหน่งใน jQuery

    content :
    :first		     ->	อ้างถึงเฉพาะ element ตัวแรกสุด
    :last	      	->	อ้างถึงเฉพาะ element ต้วท้ายสุด
    :first-child	->	อ้างถึงเฉพาะ child element ตัวแรกสุด
    :last-child		->	อ้างถึงเฉพาะ child element ตัวท้ายสุด
    
    :only-child     	->	อ้างถึงเฉพาะ child element
    :nth-child(n)   	->	อ้างถึงเฉพาะ child element ตำแหน่งที่ n
    :nth-child(even)	->	อ้างถึงเฉพาะ child element ที่เป็นตำแหน่ง เลขคู่
    :nth-child(odd) 	->	อ้างถึงเฉพาะ child element ที่เป็นตำแหน่ง เลขคี่
    :nth-child(Xn+Y)	->	อ้างถึงเฉพาะ child element ที่ได้มาจากสูตรคำนวณ เช่น 3n หรือ 5n+1 เป็นต้น
    
    :eq(n)		->	อ้างถึงเฉพาะ element ตำแหน่งที่ n
    :gt(n)		->	อ้างถึง element ทั้งหมด ที่อยุ่หลังจากตำแหน่งที่ n
    :lt(n)		->	อ้างถึง element ทั้งหมด ที่อยุ่ก่อนหน้าตำแหน่งที่ n

  • subject :
    selector ที่ใช้ในการกรอง element ของ jQuery

    content :
    :input		    ->	อ้างถึง element ทั้งหมดที่เป็น tag input, tag select, tag textarea, tag button
    :password  	->	อ้างถึง element ทั้งหมดที่เป็น password ได้แก่ input[type=password]
    :text	     	->	อ้างถึง element ทั้งหมดที่เป็น text ได้แก่ input[type=text]
    :checkbox 		->	อ้างถึง element ทั้งหมดที่เป็น checkbox ได้แก่ input[type=checkbox]
    :radio	    	->	อ้างถึง element ทั้งหมดที่เป็น radio ได้แก่ input[type=radio]
    :button	   	->	อ้างถึง element ทั้งหมดที่เป็น button ได้แก่ input[type=submit], input[type=reset], input[type=button], button
    :reset	    	->	อ้างถึง element ทั้งหมดที่เป็น reset button ได้แก่ input[type=reset]
    :submit   		->	อ้างถึง element ทั้งหมดที่เป็น submit button ได้แก่ input[type=submit], button[type=submit]
    :image	    	->	อ้างถึง element ทั้งหมดที่เป็น image ได้แก่ input[type=image]
    :file     		->	อ้างถึง element ทั้งหมดที่เป็น file ได้แก่ input[type=file]
    
    :checked  		->	อ้างถึง element ทั้งหมดที่เป็น checkbox หรือ radio ที่กำลังถูกเลือกอยู่ ( checked )
    :selected 		->	อ้างถึง element ทั้งหมดที่ถูกเลือก ( option ของ select ที่ถูกเลือก )
    
    :disabled  	->	อ้างถึง element ทั้งหมดที่ถูก disabled อยู่
    :enabled  		->	อ้างถึง element ทั้งหมดที่ถูก enabled อยู่
    :hidden	   	->	อ้างถึง element ทั้งหมดที่ถูก ซ่อน อยู่
    :visible  		->	อ้างถึง element ทั้งหมดที่ถูก เห็นอยู่
    
    :animated	 	->	อ้างถึง element ทั้งหมดที่อยู่ภายใต้การควบคุมของ animated control
    :header	   	->	อ้างถึง element ทั้งหมดที่เป็น header ได้แก่ h1, h2, h3, h4, h5, h6
    :parent   		->	อ้างถึง element ทั้งหมดที่มี child element อยู่ภายใน ( ไม่รวม empty elements )
    
    :contains(foo)	->	อ้างถึง element ทั้งหมดที่ภายใน tag มีคำว่า foo
    :not(filter)  	->	อ้างถึง element ทั้งหมดที่ ยกเว้นที่ตรงใน filter เช่น input:not(:checkbox), div p:not(:hidden), :checkbox:checked:enabled
    :empty  	-> อ้างถึง element ทั้งหมดที่ภายใน tag ไม่มีอะไรอยู่เลย เช่น <div></div>

 
Share This Chapter Login with Facebook