Sep
19
เอาละ มาแล้วต่อๆ ก่อนที่จะไม่มีอารมณ์เขียน พักนี้มัวเสียเวลาไปศึกษา เรื่องนู้นเรื่องนี้ จนไม่ค่อยได้มาอัพเดทอะไรเท่าไหร่ วันนี้ชิลด์ ชิลด์ เลยมาเขียนต่อ
ครั้งที่แล้วค้างกันไว้ถึง Basic Filter วันนี้มาต่อกันเลยละกัน
select อีกแบบนึงที่คิดว่า คงได้ใช้บ่อยๆ แน่ๆ ก็คือชุดของ..
Basic Filter:
:first
ตัวนี้คงไม่ต้องอธิบายอะไรมาก เพราะชื่อของมันก็บ่งบอกอยู่แล้ว ว่า first หมายถึงการเรียก element แรกนั่นเองซึ่งกันใช้ก็ไม่ยากอะไร
สมมุติว่าผมมีชุด el ดังนี้
-
<ul>
-
<li>data 1</li>
-
<li>data 2</li>
-
<li>data 3</li>
-
</ul>
ผมต้องการ el แรกก็จะเขียนแค่
-
var first = $(’ul > li:first’).text();
-
alert( first );
output ที่จะออกมาก็ต้องเป็น data 1 ซึ่งเป็น element แรก ของชุดนี้ ง่ายดีมั้ยล่ะ ต่อๆ ตัวต่อไปกัน เริ่มง่วงแล้ว ขอไปเร็วๆ เลยนะ
:last
อันนี้คงไม่ต้องไปอธิบาย อะไรอีก ก็เหมือยกับตัวข้างบนแหละ แต่ให้ค่า สุดท้าย แทน ถ้าจะ get ค่าออกจาก ชุด elements ตามด้านบน ก็จะได้ค่า data 3 แน่นอน
:not
ตัวนี้เป็น filter ที่ค่อนข้างใช้บ่อยอยู่เหมือนกัน คือระบุค่าที่จะไม่เอาไปเลย เช่น ผมมี input แบบนี้
-
<div id="xx">
-
<input type="checkbox" name="tee[]" value="1" />
-
<input type="checkbox" name="tee[]" value="2" checked />
-
<input type="checkbox" name="tee[]" value="3" />
-
</div>
ทีนี้อยากให้สี bg ของ ตัวที่ไม่เช็ค มันเปลี่ยน ก็จะเขียนแบบนี้
-
$(’[@name="tee[]"]:not(:checked)).css(’background’, ‘#000′);
** การใช้ selector แบบ attribute ตามตัวอย่างข้างบน เดี๋ยวจะอธิบายใน ภาค 3 อีกทีนะ ใจเย็น
ต่อจากข้างล่าง ถ้าทำตามข้างบนได้แล้วคงไม่ต้องเพิ่ง ตัวอย่างเท่าไหร่ ตอนนี้ก็ดึกมากแล้ว เอาเป็นว่า จะไม่เขียนตัว อย่างแต่จะอธิบายว่า แต่ละตัวให้ค่าอะไรบ้างแทนละกัน ^^
:even
จะ select elements ที่เป็นลำดับ ค่าคี่ เช่น 1, 3, 5
:odd
จะ select elements ที่เป็นลำดับ ค่าคู่ เช่น 2, 4, 6
:eq
ใช้สำหรับ get element ในลำดับที่แน่นอน โดยเริ่มตั้งแต่ 0 = first element เช่น
-
$(’li:eq(0)’)
:gt
ตัวนี้คือ greater than นั่นเอง โดยจะ ให้ค่าทั้งหมดที่มากกว่า index ที่เราระบุ (index เริ่มที่ 0 นะคร๊าบบบ)
-
$(’li:gt(0)’)
แบบนี้จะหมายถึงเอาทุกตัวที่มี index ของ element ที่มากกว่า 0 เช่น ตำแหน่งที่ 2 3 4 อะไรก็ว่าไป
:lt
ตัวนี้ตรงข้ามกัยตัวข้างบน คือเอาค่าที่น้อยกว่าที่ระบุไป
:header
ไอ้นี่ไม่ค่อยได้ใช้บ่อยนัก คือจะเอาค่า ที่เป็น header เช่นมี html
-
<div>
-
<h1></h1>
-
<span>xxx</span>
-
</div>
จะเปลี่ยนสีมันเป็นสีอื่นๆ
-
$(’:header’).css(’color’, ‘red’);
:animate
ตัวนี้จะจัดการกับค่า element ที่กำลังถูก animate อยู่ อธิบายยากเหลือเกิน ลองดูตัวอย่างของ jQuery.com#animate_filter กันเองดีกว่า
2 Responses to “jQuery’s selectors Part 2”
ผมเพิ่งจะเคยเห็น filter อย่างพวก odd, even นะครับเนี่ย
ทีแรกนึกว่าเป็น filter ของ jquery ซะอีก
พอไปค้นๆ ดู กลายเป็นของ css3 ไปซะนี่
แล้วแบบนี้ ถ้าเอาไปใช้กับพวก ie6 จะได้มั้ยเนี่ย?
By Oppertunity on Sep 19, 2008
ตามมาอ่าน part 2 ครับ แล้วก็ขอบคุณเช่นเคยสำหรับ บทความดีๆ
By Diesel on Sep 26, 2008