jQueryTips by Tee++; » Add new tag http://www.jquerytips.com Coding is fun. Sun, 25 Apr 2010 11:30:33 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jQuery’s selectors Part 2 http://www.jquerytips.com/2008/09/19/jquery%e2%80%99s-selectors-part-2/ http://www.jquerytips.com/2008/09/19/jquery%e2%80%99s-selectors-part-2/#comments Thu, 18 Sep 2008 18:51:53 +0000 Tee++; http://www.jquerytips.com/?p=134 เอาละ มาแล้วต่อๆ ก่อนที่จะไม่มีอารมณ์เขียน พักนี้มัวเสียเวลาไปศึกษา เรื่องนู้นเรื่องนี้ จนไม่ค่อยได้มาอัพเดทอะไรเท่าไหร่ วันนี้ชิลด์ ชิลด์ เลยมาเขียนต่อ

ครั้งที่แล้วค้างกันไว้ถึง Basic Filter วันนี้มาต่อกันเลยละกัน

select อีกแบบนึงที่คิดว่า คงได้ใช้บ่อยๆ แน่ๆ ก็คือชุดของ..

Basic Filter:
:first
ตัวนี้คงไม่ต้องอธิบายอะไรมาก เพราะชื่อของมันก็บ่งบอกอยู่แล้ว ว่า first หมายถึงการเรียก element แรกนั่นเองซึ่งกันใช้ก็ไม่ยากอะไร

สมมุติว่าผมมีชุด el ดังนี้

  1. <ul>
  2. <li>data 1</li>
  3. <li>data 2</li>
  4. <li>data 3</li>
  5. </ul>

ผมต้องการ el แรกก็จะเขียนแค่

  1. var first = $(‘ul > li:first’).text();
  2. alert( first );

output ที่จะออกมาก็ต้องเป็น data 1 ซึ่งเป็น element แรก ของชุดนี้ ง่ายดีมั้ยล่ะ ต่อๆ ตัวต่อไปกัน เริ่มง่วงแล้ว ขอไปเร็วๆ เลยนะ

:last
อันนี้คงไม่ต้องไปอธิบาย อะไรอีก ก็เหมือยกับตัวข้างบนแหละ แต่ให้ค่า สุดท้าย แทน ถ้าจะ get ค่าออกจาก ชุด elements ตามด้านบน ก็จะได้ค่า data 3 แน่นอน

:not
ตัวนี้เป็น filter ที่ค่อนข้างใช้บ่อยอยู่เหมือนกัน คือระบุค่าที่จะไม่เอาไปเลย เช่น ผมมี input แบบนี้

  1. <div id="xx">
  2. <input type="checkbox" name="tee[]" value="1" />
  3. <input type="checkbox" name="tee[]" value="2" checked />
  4. <input type="checkbox" name="tee[]" value="3" />
  5. </div>

ทีนี้อยากให้สี bg ของ ตัวที่ไม่เช็ค มันเปลี่ยน ก็จะเขียนแบบนี้

  1. $(‘[@name="tee[]"]:not(:checked)).css(‘background’, ‘#000′);

** การใช้ selector แบบ attribute ตามตัวอย่างข้างบน เดี๋ยวจะอธิบายใน ภาค 3 อีกทีนะ ใจเย็น

ต่อจากข้างล่าง ถ้าทำตามข้างบนได้แล้วคงไม่ต้องเพิ่ง ตัวอย่างเท่าไหร่ ตอนนี้ก็ดึกมากแล้ว เอาเป็นว่า จะไม่เขียนตัว อย่างแต่จะอธิบายว่า แต่ละตัวให้ค่าอะไรบ้างแทนละกัน ^^

:even
จะ select elements ที่เป็นลำดับ ค่าคี่ เช่น 1, 3, 5

:o dd
จะ select elements ที่เป็นลำดับ ค่าคู่ เช่น 2, 4, 6

:eq
ใช้สำหรับ get element ในลำดับที่แน่นอน โดยเริ่มตั้งแต่ 0 = first element เช่น

  1. $(‘li:eq(0)’)

:gt
ตัวนี้คือ greater than นั่นเอง โดยจะ ให้ค่าทั้งหมดที่มากกว่า index ที่เราระบุ (index เริ่มที่ 0 นะคร๊าบบบ)

  1. $(‘li:gt(0)’)

แบบนี้จะหมายถึงเอาทุกตัวที่มี index ของ element ที่มากกว่า 0 เช่น ตำแหน่งที่ 2 3 4 อะไรก็ว่าไป

:lt
ตัวนี้ตรงข้ามกัยตัวข้างบน คือเอาค่าที่น้อยกว่าที่ระบุไป

:header
ไอ้นี่ไม่ค่อยได้ใช้บ่อยนัก คือจะเอาค่า ที่เป็น header เช่นมี html

  1. <div>
  2. <h1></h1>
  3. <span>xxx</span>
  4. </div>

จะเปลี่ยนสีมันเป็นสีอื่นๆ

  1. $(‘:header’).css(‘color’, ‘red’);

:animate
ตัวนี้จะจัดการกับค่า element ที่กำลังถูก animate อยู่ อธิบายยากเหลือเกิน ลองดูตัวอย่างของ jQuery.com#animate_filter กันเองดีกว่า

]]> http://www.jquerytips.com/2008/09/19/jquery%e2%80%99s-selectors-part-2/feed/ 3