jQueryTips by Tee++; » selectors 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 jQuery’s selectors Part 1 http://www.jquerytips.com/2008/09/11/jquerys-selectors-part-1/ http://www.jquerytips.com/2008/09/11/jquerys-selectors-part-1/#comments Wed, 10 Sep 2008 17:00:09 +0000 Tee++; http://www.jquerytips.com/?p=130 มีหลายคนเริ่มบ่น ว่าทำไมผม พูดแต่เรื่องอะไรที่เข้าใจยาก อืมม์ คงผิดที่ผมเองแหละ ที่ไม่ได้ ปูพื้นให้มากมายนัก เอาเป็นว่า 4-5 บทความต่อไปนี้ ผมจะกลับมาพูดเรื่อง Basic ที่มัน Simple Simple สุดๆ กันก่อนดีกว่า เพื่อที่จะได้เป็นแนวทางสำหรับ คนที่เพิ่งจะเริ่ม และเป็นการทบทวนความรู้ของตัวเองไปใน ตัว นั้นขอลอก จาก manual jQuery มาแปลไทยภาษาชาวบ้านๆ กันเลยละกัน 555+

Selectors สำหรับตัวผมเองแล้วคิดว่านี่แหละ คือหัวใจที่ทำให้ผมตัดสินใจเลือกที่จะใช้ jquery เป็น Framework ตัวหลักเลย เพราะมันมี Syntax ของ selector ที่แสนจะง่ายได้ ไม่ว่าจะหยิบจับ DOM ส่วนไหนมาใช้ก็ง่ายนิดเดียว ทำให้จัดการอะไรได้ทุกอย่าง ในหน้าเอกสาร HTML, XML มาเริ่มเข้าเรื่องกันเลยนะ

Basics:
#id
ตัวนี้ไม่มี อะไรยากครับ เป็นการเรียก id ของหน้าเอกสาร ซึ่งเหมือนกับคำสั่ง document.getElementById(‘xxx’) นั่นแหละ แต่พอมาอยู่ในรูปแบบ jQuery ทำให้เราเรียกง่ายๆ แค่

  1. $(‘#idName’)

element
แบบนี้คือการเรียกเจาะจง element ของ DOM ครับเช่น ผมจะเรียก Body ทั้งหมด

  1. $(‘body’)

หรือ

  1. $(‘div’)

.class
แบบนี้คือการระบุ ClassName ครับ เช่นเอกสาร html เรามี

  1. <div class="xxx">Something</div>

เราก็จะเรียก

  1. $(‘.xxx’)

*
อันนี้คงไม่ได้ใช้บ่อยนัก คือ มันจะจับทุก elements เลย

  1. (‘*’)

selector1, selector2, selectorN
แบบนี้เป็นการเรียกรวม elements หลายตัว หลายๆ แบบ mix กันตามใจชอบเช่น

  1. $(‘input, .className, #myID’)

ซึ่งทุกตัวที่เรียกจะ ถูกทำงานใน คำสั่งที่เราจะเขียน

Hierarchy:
ancestor descendant
การเรียกแบบไล่ไปตาม node จะมีรูปแบบการเขียนคือ
$('#parent p')
แบบนี้จะเป็นการหา p ทั้งหมดที่มี parent แม่เป็น #parent เช่นเอกสาร html

  1. <ul id="parent">
  2.   <li><p>xxx</p></li>
  3.   <li><p>xxx</p></li>
  4. </ul>
  5.  

ซึ่งสังเกตุได้ ตัว selector แบบนี้จะมุ่งหาตัว p โดยที่ไม่สนใจว่าจะมี element > li มาคั่นอยู่

parent > child
การหาแบบนี้จะเป็นการรุบุ child ไล่ไปตาม node ที่แท้จริง เช่นผมมี html อยู่แบบนี้

  1. <ul id="parent">
  2.   <li><p>xxx</p></li>
  3.   <li><p>xxx</p></li>
  4. </ul>
  5.  

ถ้าผมเขียนแบบนี้ จะหาไม่เจออะไรเลย

  1. $(‘#parent > p’)

ที่ถูกต้องตามรูปแบบ Selector แบบนี้ก้คือ

  1. $(‘#parent > li > p’)

prev + next
ต่อไปเป็นการหา ในรูปแบบ หน้า และ หลังครับ คือ ตัวที่อ้างอิงไม่ได้เป็น parent เป็นเพียงแค่ตัวก่อนหน้ามันเท่านั้น

  1. <form>
  2. <p>
  3.   <input….. />
  4.   <div></div>
  5. </p>
  6. </form></code>
  7. <pre lang="html">$(‘input + div’)

สังเกตุดูได้ครับ ว่าตัวที่เอามาอิง เป็นเพียงแค่ตัวที่อยู่ก่อนหน้ามัน คือ input มันเป็น element ที่อยู่หน้า div เท่านั้นเองไม่ได้เป็น parent แต่อย่างใด

prev ~ siblings
ตัวนี้อธิบายยากแฮะ -*- มันก็ คือการหา child ที่อยู่ในราก เดียวกับมัน เพียงแต่ว่าจะอยู่หลังจาก ตัวที่เราอ้างอิง เช่นผมมี html แบบนี้

  1. <div>
  2.   <p></p>
  3.   <p id="prev"></p>
  4.   <p></p>
  5.   <p></p>
  6. </div>

ถ้าผมเขียน selector แบบนี้

  1. $(‘#prev ~ p’)

สิ่งที่ผมจะได้ออกมาก็คือ p สองชุดหลังเท่านั้น เพราะว่า p สองชุดหลัง อยู่ในรากเดียวกับ p ที่ระบุ id=prev ซึ่งที่ตัวบน ไม่ได้มาด้วยเพราะว่า การระบุแบบนี้จะเรียกเฉพาะ ตัวที่อยู่หลัง element ที่เราอ้างอิงเท่านั้น

เอาล่ะ วันนี้พอแค่นี้แหละ ขอบอกไว้ก่อนครับ ผมจะไม่พล่ามไปจนจบ manual ของ selectors ทั้งหมดของ jQuery หรอกนะ เพราะมันเยอะอ่ะ แต่จะบอกส่วนที่สำคัญๆ และเป็นพื้นให้ศึกษาตัว ต่อไปได้ไม่ยาก ถ้าใครอยากจะได้ทั้งหมดก็นี่เลยครับ

http://docs.jquery.com/Selectors

คลิกอ่านเอาให้หมดทำความเข้าใจซะ แล้วคราวหน้าผมจะมาต่อเรื่อง selector ภาค 2 แล้วก็จะไปต่อ บทอื่นเลยละกัน วันนี้ไปนอนแล้ว หมดแรง

]]> http://www.jquerytips.com/2008/09/11/jquerys-selectors-part-1/feed/ 4