Issarangul's Blog: December 2011

jQuery Selectors

Tag Selector เลือก (select) element ตาม Tag HTML
```
$('a') // select element ที่เป็น tag <a>
$('div')   // select element ที่เป็น tag <div>
$('img')   // select element ที่เป็น tag <img> 
$('div, span')   // select element ที่เป็น tag <div> และ <span>
```
จากบรรทัดสุดท้ายด้านยนนั้นจะเห็นว่าเราเลือก element พร้อมๆกันดีเดียวก็ได้ ในทีนี้เราเลือกแท็ก div และ span พร้อมๆกัน
ID Selector
เลือก (select) element ตาม ID เช่นใน HTML มี element ตามด้านล่างนี่
```
<p id="subject">Hello!!.</p>
<p id="message">Hello, how are you?.</p>
```
ถ้าต้องการ select เฉพาะ element ที่มี ID มีค่าเฉพาะเจาะจง ก็ทำได้ตามด้านล่าง
```
$('#message')   
$('#subject, #message')
```
ซึ่งบรรทัดแรกเรา select เฉพาะ element ที่มี id = message ส่วนบรรทัดที่สองเรา select element ที่มี id เป็น subject และ message
Class Selector
เลือก (select) element ตาม Class
```
$('.submenu')
$('.submenu1, .submenu2, .submenu3') 
$('div#mainmenu.submenu')   
```
จะเห็นว่าเราสามารถผสมผสาน select โดยระบุ tag id และ class ร่วมกันได้
Descendent Selector
เป็นการ select element โดยการะบุ selector ตามระดับชั้นของแท๊กใน HTML ด้านล่างลองดูโค้ด HTML ด้านล้าง
```
<html>
<body>
 <h1>Welcome to Codesniper.Org</h1>
 <p class="intro">Hello jQuery!</p>
 <p>jQuery selectors</p>
Learning jQuery is fun :)
 <div id="main">
  <p>Paragraph one</p>
  <p>Paragraph two</p>
  <p>Paragraph three</p>
  <div id="sub">
   <p>Paragraph subone</p>
   <p>Paragraph subtwo</p>
  </div>
 </div>
</body>
</html>
```
จาก HTML ด้านบนถ้าเราลองใช้คำสั่งตามด้านล่างนี้
```
$('#main p')
```
จะเป็นการ select ทุกแท็ก <p> รวมถึงที่อยู่ภายใต้แท็ก <div> ที่ id = sub ด้วยเพราะถือว่าอยู่ภายในแท็ก <div> ที่ id = main
Child Selector
ทีนี้ถ้าเราต้องการเลือก element ที่อยู่ภายในแท็กใดแท็กหนึ่งเพียงแค่ 1 ระดับ เช่นจาก HTML ด้านบน เราต้องการเลือกเฉพาะแท็ก <p> ภายใน <div> ที่ id = main เท่านั้นไม่รวมแท็ก <p> ที่ id = sub เราก็สามารถทำได้โดย
```
$('#main > p')
```
จะเป็นการ select แท็ก <p> ทั้ง 3 แท็กที่อยู่ภายในแท็ก <div>
Adjacent sibling Selector
เป็นการ select element ที่อยู่ระดับเดียวกันและอยู่ติดกัน เช่นใน HTML ด้านบนถ้าเราจะ select element แท็ก <p> ที่อยู่ถัดจากแท็ก <h1> หรือ element ในบรรทัดที่สองถ้าดูด้านล่างนี่
```
 <h1>Welcome to Codesniper.Org</h1>
 <p class="intro">Hello jQuery!</p>
 <p>jQuery selectors</p>
```
เราก็สามารถใช้คำสั่งดังนี้
```
$('h1 + p')
```
หรือถ้าจะ select element ในบรรทัดที่ 3 ก็ใช้คำสั่ง
```
$('.intro + p')
```
Attribute Selector
เป็นการ select element โดยดูจาก attribute ว่าเป็นไปตามที่เราต้องการจะ select หรือเปล่า โดยรูปแบบก็มีดังนี้
- [attribute] เป็นการ select element ที่มี attribute ตามที่เรากำหนด เช่น
```
$('a[href]')
$('div[id]')
```
  บรรทัดแรกเป็นการ select element แท็ก a ที่มีการระบุ attribute href อยู่ภายในแท็ก ส่วนบรรทัดที่สองเป็นการ select element แท็ก div ที่มี attribute id
- [attribute ="value"] อันนี้จะ select โดยระบุละเอียดขึ้นไปอีกโดยระบุทั้ง attribute และ value ของ attribute เช่น
```
$('a[href="http://www.codesniper.org"]')
$('input[type="text"])
```
- [attribute|="value"] จะ select element ทุกๆ element ที่มี attribute มีค่าขึ้นต้นตามที่เราระบุไว้ หรือมีค่าขึ้นต้นตามที่เราระบุไว้และตามด้วย "-" ยกตัวอย่างถ้าใน HTML เรามี element ตามด้านล่างนี่
```
<a href="example.html" hreflang="en">Some text</a> 
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
```
  ถ้าเราต้องการ select element แท็ก a ที่มี attribute hreflang มีค่า "en" และ "en-UK" แต่ไม่รวม "english" เราก็สามารถทำได้โดย
```
$('a[hreflang|="en"]')
```
- [attribute^="value"] เป็นการ select element โดยระบุ attribute จะต้องมีค่าขึ้นต้นด้วยข้อมความที่เราระบุไว้ เช่นถ้าต้องหาร select element แท็ก a ที่ลิ้งก์ไปยังเว็ปไซต์ต่างๆ เราก็สามารถทำได้โดย ระบุหา attribute "href" ที่มีค่าขึ้นต้นด้วย "htttp:// นั่นเอง
```
$('a[href^="http://"]')
```
  หรือถ้าจะ select element แท็ก a ทุกๆอันที่ที่เป็นลิงก์ส่งอีเมล์ก็สามารถทำได้โดย
```
$('a[href^="mailto:"]')
```
- [attribute$="value"] รูปแบบคำสั่งนี้เป็นการ select element ที่ attribute มีค่าลงท้ายตามที่เราระบุ เช่นถ้าเราต้องการ select element แท็ก a ทุกอันที่เป็นลิ้งก์ไปยังไฟล์ zip ก็สามารถทำได้ดังนี้
```
$('a[href$=".zip"]')
```
- [attribute*="value"] รูปแบบคำสั่งนี้เป็นการ select element ที่ attribute มีค่าที่เราระบุตรงส่วนใดก็ใด้ เช่นถ้าเราต้องการ element แท็ก a ที่มีค่า attribute "href" หรือลิ้งก์ไปยังเว็ปไซต์ใดๆที่มีคำว่า "codesniper" ลองดู element ด้านล่างนี่
```
<a href="http://www.codesniper.org">main link</a>
<a href="http://www.codesniper.net">mirror 1</a>
<a href="http://codesniper.dyndns.org">mirror 2</a>
```
  ถ้าเราก็ใช้คำสั่ง
```
$('a[href*="codsniper"]')
```
  ก็จะเป็นการ select element ทุกๆอันเพราะทุก element แท็ก a นั้น attribute href ที่มีคำว่า codesniper อยู่ภายในนั่นเอง
- [attribute~="value"] รูปแบบคำสั่งนี้เป็นการ select element ที่ attribute มีค่าที่เราระบุตรงส่วนใดก็ใด้ภายในค่าของ attribute แต่คำที่เราระบุจะต้องเป็นคำโดดๆ ยกตัวอย่าง element ต่อไปนี้
```
<input name="man-news" />
<input name="milk man" />
<input name="letterman2" />
<input name="newmilk" />
ถ้าเราใช้ selector ตามด้านล่าง
$('a[href~="man"]')
จะมีเฉพาะ element แรกเท่านั้นที่ถูก select
```
- [attribute!="value"] รูปแบบคำสั่งนี้เป็นการ select element ที่ attribute มีค่าใดๆก็ตามที่ไม่ใช่ค่าที่เราระบุ จาก html element ในหัวข้อที่แล้วหากเราใช้คำสั่ง
```
$('a[href!="newmilk"]')
```
  ก็จะเป็นการ select element 3 อันแรกคือ
```
<input name="man-news" />
<input name="milk man" />
<input name="letterman2" />
```

ทั้งหมดนี้เป็นการสรุปใช้ jQuery Selector แบบคร่าวๆ จากที่ได้อ่านได้ศึกษามา ที่ต้องมาสรุปเขียนใน Blog เพราะอ่านแล้วกลัวลืมยิ่งถ้าไม่ค่อยได้ใช้อาจลืม เลยสรุปไว้เผื่อเวลาจะใช้จะได้มาอ่าน โดยไม่เสียเวลามาก :)

Issarangul's Blog

Friday, December 30, 2011

เรียนรู้ jQuery ตอนที่1 : Selector