Issarangul's Blog: January 2012

ในตอนที่แล้วได้เรียนรู้ jQuery Selectors ไปแล้ว ในตอนนี้เราจะมาเรียนรู้ jQuery Filters ซึ่งก็ตามชื่อใช้กรอง elements ที่ถูก select อีกทีนึง รูปแบบการใช้งาน Filters ก็มีดังนี้
Basic Filter

:even และ :odd เป็นการ select เฉพาะ element คู่และคี่ จาก element ทั้งมันที่ถูก select ทั้งนี้เริ่มนับ element แรกเป็น 0 มายกตัวอย่าง
```
$('tr:even')
$('table.maintable tr:odd')
```
บรรทัดแรกเป็นการ select element แท็ก tr ทุกๆอัน แต่ filter เฉพาะ element คู่ ส่วนบรรทัดถัดมา select element แท็ก tr ทุกอันใน table ที่ class = "maintable" และ filter เฉพาะ element คี่เท่านั้น
:first และ :last เป็นการกรองเอาฉพาะ element แรก และ element สุดท้ายจาก element ทั้งหมดที่ถูก select มา ยกตัวอย่าง
```
$('tr:even')
$('p:first')
$('div:last')
```
บรรทัดแรกเลือก element แท็ก p ทุกอันแล้วกรองเอาเฉพาะแท็ก p อันแรกเท่านั้น ส่วนบรรทัดที่สองเราก็ได้แท็ก div ท้ายสุด
:not(selector) เป็นการกรอง element ที่ระบุใน () ออกไป ยกตัวอย่างเช่น
```
$('a:not(.navmenu)')
$('a:not([href^="http://"])')
```
บรรทัดแรก select element แท็ก a ทั้งหมดยกเว้นแท็ก a ที่ class="navmenu ส่วนบรรทัดที่สอง select element แท็ก a ทั้งหมดยกเว้นแท็ก a ที่ href ขึ้นต้นด้วย http://
:eq(index) ให้มอง element ทั้งหมดที่ถูก select มาเป็นอาเรย์เริ่มจาก 0 แล้ว filter นี้จะกรองเอาเฉพาะ element ที่ตำแหน่งในอาเรย์ที่เราต้องการ ยกตัวอย่งเช่น
```
$('td:eq(2)')
```
ก็จะเป็นการ select element แท็ก td ตัวที่ 3 จากทั้งหมด (อย่าลืมว่านับจาก 0 ดังนั้น :eq(2) จึงหมายถึงอันที่ 3)
:gt(index) และ :lt(index) เช่นเดียวกับ :eq() เพียงแต่ :gt(index) จะกรองเอาเฉพาะที่มากกว่าค่า index และ :lt() จะกรองเอาเฉพาะที่น้อยกว่าค่า index
:focus ใช้สำหรับการหา element ที่กำลังถูก focus อยู่ ดังตัวอย่างด้านล่างนี่
```
$(':focus')
$('*:focus')
$('input:focus')
```
สองบรรดทัดแรกจะได้ผลลัพธ์เหลือนกัน คือจะได้ element ที่ถูก focus คือเราสามารถละ * ได้นั้นเอง ส่วนบรรทัดที่ 3 จะ select element เฉพาะที่เป็นแท็ก input ที่ถูก focus เท่านั้น ลองดูตัวอย่างด้านล่างนี่คือการนำไปใช้งาน
```
<!DOCTYPE html>
<html>
<head>
  <style>
.focused {
    background: #abcdef;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

<script>
$( "#content" ).on( "focus blur", "*", function( event ) {
    var elem = $( this );
    elem.toggleClass( "focused", elem.is( ":focus" ) );
});
</script>

</body>
```
:header เป็นการ select เฉพาะ element แท็ก h1 h2 h3 h4.. ตัวอย่างก็เช่น
```
$(':header')
```

Child Filter

:first-child selector filter นี้จะเป็นการ select ทุก element ที่เป็น element ลูกอันแรกของ parent ต่างจาก :first ที่จะได้เพียง element ลูกอันแรก ของ element parent ตัวแรก ถ้างงๆ ลองดูตัวอย่างด้านล่าง

<!DOCTYPE html>
<html>
<head>
  <style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>

  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>

  </div>
<script>
    $("div span:first")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

</script>

</body>
</html>

จะเห็นว่าถ้าใช้ :first-child จะได้ element มา 2 ตัวคือ

<span>John,</span>
<span>Glen,</span>

แต่ถ้าลองเปลี่ยไปใช้ :first จะได้ element เดียวคือ

<span>John,</span>

:last-child อันนี้จะคล้ายกับ :first-child เพียงแต่จะ select ทุก element ที่เป็น element ลูกอันสุดท้ายของ parent
:nth-child() จะสามารถใช้งานได้หลายรูปแบบดังด้านล่างนี่
```
$('td:nth-child(even)')
$('td:nth-child(odd)')
$('td:nth-child(2n)')
$('td:nth-child(2n + 1)')
$('td:nth-child(2)')
```
สองบรรทัดแรกจะคล้ายๆกับ :even และ :odd เพียงแต่ :nth-child(even) และ :nth-child(odd) จะนับ element ลูกของแต่ละ parent เริ่มจาก 1 ส่วน :even และ :odd จะนับ element แรกเริ่มจาก 0 โดยนับไปเรื่อยๆไม่ว่าจะเป็น element ลูกของ element ไหนก็ตาม ที่เหลือผมไม่ขออธบาย เพราะอาจอธิบายแล้วคนอานอาจจะงง ก็ลองดูตัวอย่างจากเว็ป jQuery น่าจะเข้าใจมากกว่า
http://api.jquery.com/nth-child-selector/
:only-child อันนี้เป็นการ select element ลูก ถ้า element นั้นเป็น element ลูกเพียงตัวเดียวของ parent เช่น
```
$('p:only-child')
```
element แท็ก p จะถูก select ถ้า element parent มีแท็ก p element เดียวเป็น element ลูก

Contain Filter

:contains() เป็น filter ที่กรองเอาเฉพาะ element ที่มีข้อความหรือสตริงที่เรากำหนด เช่นถ้าใน html มี element ตามด้านล่างนี้
```
John Resig
George Martin
Malcom John Sinclair
J. Ohn
```
หากเราใช้คำสั่ง
```
$("div:contains('John')")
```
element 1 และ 3 ก็จะถูก select หรือถ้าเราใช้ำคำสั่ง
```
$("div:contains('oh')")
```
element 1 และ 3 ก็จะถูก select แต่ element ที่ 4 ไม่ถูก select เพราะ O ตัวใหญ่นั่นเอง
:empty เป็น filter ที่กรองเอาเฉพาะ element ที่ไม่มี element ลูก หรือไม่มีข้อความ (Textnode) ใน element นั้นๆ ดังตัวอย่างด้านล่างนี่
```
<table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>
    <tr><td></td><td>TD#5</td></tr>
</table>
```
ถ้าเราจะหาแท็ก td ที่ว่างไม่มีข้องความ หรือ element ลูก ก็ทำได้โดย
```
$('td:empty')
```
:parent filter นี้จะตรงข้ามกับ :empty เพราะจะกรองเอาเฉพาะ element ที่มี element ลูก หรือมีข้อความ(Textnode) ใน element นั้นๆ
:has(selector) เป็น filter ที่กรองเอาเฉพาะ element ที่มี element ลูกตามที่เราระบุ อย่างน้อยหนึ่ง element ยกตัวอย่างเช่น
```
<div><p>Hello in a paragraph</p></div>
<div>Hello again! (with no paragraph)</div>
```
ถ้าเราจะหา element div ที่มี element p เป็น element ลูก ก็ทำได้โดย
```
$('div:has(p)')
```

เป็นอันจบเกี่ยวกับ jQuery Filters ไว้ผมอ่าน jQuery ต่อแล้ว ผมจะมาเขียนสรุปตอนต่อๆไปเรื่อยๆครับ

Issarangul's Blog

Friday, January 06, 2012

เรียนรู้ jQuery ตอนที่ 2 : Filters