Sep
11
มีหลายคนเริ่มบ่น ว่าทำไมผม พูดแต่เรื่องอะไรที่เข้าใจยาก อืมม์ คงผิดที่ผมเองแหละ ที่ไม่ได้ ปูพื้นให้มากมายนัก เอาเป็นว่า 4-5 บทความต่อไปนี้ ผมจะกลับมาพูดเรื่อง Basic ที่มัน Simple Simple สุดๆ กันก่อนดีกว่า เพื่อที่จะได้เป็นแนวทางสำหรับ คนที่เพิ่งจะเริ่ม และเป็นการทบทวนความรู้ของตัวเองไปใน ตัว นั้นขอลอก จาก manual jQuery มาแปลไทยภาษาชาวบ้านๆ กันเลยละกัน 555+
Selectors สำหรับตัวผมเองแล้วคิดว่านี่แหละ คือหัวใจที่ทำให้ผมตัดสินใจเลือกที่จะใช้ jquery เป็น Framework ตัวหลักเลย เพราะมันมี Syntax ของ selector ที่แสนจะง่ายได้ ไม่ว่าจะหยิบจับ DOM ส่วนไหนมาใช้ก็ง่ายนิดเดียว ทำให้จัดการอะไรได้ทุกอย่าง ในหน้าเอกสาร HTML, XML มาเริ่มเข้าเรื่องกันเลยนะ
Basics:
#id
ตัวนี้ไม่มี อะไรยากครับ เป็นการเรียก id ของหน้าเอกสาร ซึ่งเหมือนกับคำสั่ง document.getElementById(’xxx’) นั่นแหละ แต่พอมาอยู่ในรูปแบบ jQuery ทำให้เราเรียกง่ายๆ แค่
-
$(’#idName’)
element
แบบนี้คือการเรียกเจาะจง element ของ DOM ครับเช่น ผมจะเรียก Body ทั้งหมด
-
$(’body’)
หรือ
-
$(’div’)
.class
แบบนี้คือการระบุ ClassName ครับ เช่นเอกสาร html เรามี
-
<div class="xxx">Something</div>
เราก็จะเรียก
-
$(’.xxx’)
*
อันนี้คงไม่ได้ใช้บ่อยนัก คือ มันจะจับทุก elements เลย
-
(’*')
selector1, selector2, selectorN
แบบนี้เป็นการเรียกรวม elements หลายตัว หลายๆ แบบ mix กันตามใจชอบเช่น
-
$(’input, .className, #myID’)
ซึ่งทุกตัวที่เรียกจะ ถูกทำงานใน คำสั่งที่เราจะเขียน
Hierarchy:
ancestor descendant
การเรียกแบบไล่ไปตาม node จะมีรูปแบบการเขียนคือ
$('#parent p')
แบบนี้จะเป็นการหา p ทั้งหมดที่มี parent แม่เป็น #parent เช่นเอกสาร html
-
<ul id="parent">
-
<li><p>xxx</p></li>
-
<li><p>xxx</p></li>
-
</ul>
-
ซึ่งสังเกตุได้ ตัว selector แบบนี้จะมุ่งหาตัว p โดยที่ไม่สนใจว่าจะมี element > li มาคั่นอยู่
parent > child
การหาแบบนี้จะเป็นการรุบุ child ไล่ไปตาม node ที่แท้จริง เช่นผมมี html อยู่แบบนี้
-
<ul id="parent">
-
<li><p>xxx</p></li>
-
<li><p>xxx</p></li>
-
</ul>
-
ถ้าผมเขียนแบบนี้ จะหาไม่เจออะไรเลย
-
$(’#parent > p’)
ที่ถูกต้องตามรูปแบบ Selector แบบนี้ก้คือ
-
$(’#parent > li > p’)
prev + next
ต่อไปเป็นการหา ในรูปแบบ หน้า และ หลังครับ คือ ตัวที่อ้างอิงไม่ได้เป็น parent เป็นเพียงแค่ตัวก่อนหน้ามันเท่านั้น
-
<form>
-
<p>
-
<input….. />
-
<div></div>
-
</p>
-
</form></code>
-
<pre lang="html">$(’input + div’)
สังเกตุดูได้ครับ ว่าตัวที่เอามาอิง เป็นเพียงแค่ตัวที่อยู่ก่อนหน้ามัน คือ input มันเป็น element ที่อยู่หน้า div เท่านั้นเองไม่ได้เป็น parent แต่อย่างใด
prev ~ siblings
ตัวนี้อธิบายยากแฮะ -*- มันก็ คือการหา child ที่อยู่ในราก เดียวกับมัน เพียงแต่ว่าจะอยู่หลังจาก ตัวที่เราอ้างอิง เช่นผมมี html แบบนี้
-
<div>
-
<p></p>
-
<p id="prev"></p>
-
<p></p>
-
<p></p>
-
</div>
ถ้าผมเขียน selector แบบนี้
-
$(’#prev ~ p’)
สิ่งที่ผมจะได้ออกมาก็คือ p สองชุดหลังเท่านั้น เพราะว่า p สองชุดหลัง อยู่ในรากเดียวกับ p ที่ระบุ id=prev ซึ่งที่ตัวบน ไม่ได้มาด้วยเพราะว่า การระบุแบบนี้จะเรียกเฉพาะ ตัวที่อยู่หลัง element ที่เราอ้างอิงเท่านั้น
เอาล่ะ วันนี้พอแค่นี้แหละ ขอบอกไว้ก่อนครับ ผมจะไม่พล่ามไปจนจบ manual ของ selectors ทั้งหมดของ jQuery หรอกนะ เพราะมันเยอะอ่ะ แต่จะบอกส่วนที่สำคัญๆ และเป็นพื้นให้ศึกษาตัว ต่อไปได้ไม่ยาก ถ้าใครอยากจะได้ทั้งหมดก็นี่เลยครับ
http://docs.jquery.com/Selectors
คลิกอ่านเอาให้หมดทำความเข้าใจซะ แล้วคราวหน้าผมจะมาต่อเรื่อง selector ภาค 2 แล้วก็จะไปต่อ บทอื่นเลยละกัน วันนี้ไปนอนแล้ว หมดแรง
3 Responses to “jQuery’s selectors Part 1”
เริ่มหัดใช้ jQuery อยู่ครับชอบบทความมากเลย อ่านง่ายและเข้าใจดีครับ จะมาคิดตามบ่อยๆ นะครับ
By Diesel on Sep 13, 2008
ระบบ selector ของ js framework ส่วนใหญ่จะเป็น CSS Selector ครับ
ขอแค่เข้าใจตัว css ก็สามารถใช้งาน css selector ใน js framework ต่างๆ ได้แล้วครับ
By Oppertynity on Sep 14, 2008
เพิ่งลองจับๆ เขียน ajax ไปหน่อยนึง ช่างง่ายดายยิ่งนัก 4-5 บรรทัด จบ
ถ้าเขียนละเอียดๆแบบนี้ สงสัยต่อไปต้องใช้ jquery ตลอดเพราะมันง่ายจัง
By 7 on Sep 16, 2008