การเลือกองค์ประกอบด้วย jQuery

สวัสดีครับ

jQuery ใช้ไวยากรณ์ XPath เพื่อเลือกองค์ประกอบ DOM

ดังนั้น หากคุณใช้ CSS หรือเคยใช้ XPath เพื่อเลือกโหนดใน XML คุณก็รู้วิธีเลือกองค์ประกอบด้วย jQuery อยู่แล้ว!

มาใช้ตัวเลือกเหล่านี้กับ jQuery กัน 🚀

ตัวเลือกคลาส

องค์ประกอบในคลาสที่ต้องการจะถูกเลือกโดยใช้ตัวดำเนินการ จุด(.)

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบทั้งหมดที่มีคลาส title และเปลี่ยนสีขององค์ประกอบเหล่านั้น 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

เราจะแนะนำเมธอด css() ในบทเรียนถัด ๆ ไป 

ในตอนนี้ โปรดทราบไว้ก่อนว่า เมธอด css() ใช้กำหนดรูปแบบขององค์ประกอบ

ตัวเลือกไอดี

สามารถเลือกองค์ประกอบที่มีไอดีที่ต้องการได้โดยใช้ตัวดำเนินการ #(เครื่องหมายแฮช) อย่างที่ทราบกันว่า ค่าไอดีเดียวกันสามารถกำหนดให้กับองค์ประกอบได้เพียงหนึ่งองค์ประกอบในหน้า HTML เท่านั้น

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบที่มีไอดี title และเปลี่ยนสีขององค์ประกอบนั้น

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

ตัวเลือกแท็ก

องค์ประกอบในแท็กที่ต้องการ สามารถเลือกได้โดยใช้เพียงชื่อแท็ก

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบที่มีแท็ก span และเปลี่ยนสีขององค์ประกอบนั้น

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

ตัวเลือกลูก

หากต้องการเลือกองค์ประกอบลูกขององค์ประกอบหนึ่ง เราจะใช้ตัวดำเนินการ มากกว่า(>)

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบลูกทั้งหมดขององค์ประกอบที่ต้องการ

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

ตัวเลือกแอตทริบิวต์

เราสามารถเลือกองค์ประกอบที่ต้องการได้โดยตรวจสอบว่าแอตทริบิวต์ขององค์ประกอบนั้นมีค่าหรือไม่

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบที่มีแท็ก <a> และมีแอตทริบิวต์ target ที่มีค่าเป็น _blank

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

jQuery ช่วยให้เลือกองค์ประกอบใน DOM ได้ง่ายขึ้น โดยมีเมธอดต่าง ๆ รวมถึงตัวเลือก XPath ให้ใช้

มาเรียนรู้เมธอดเหล่านี้กัน

เมธอด parent()

เราสามารถเลือกองค์ประกอบแม่ขององค์ประกอบที่ต้องการได้โดยใช้เมธอด parent() ที่ jQuery จัดเตรียมไว้

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบแม่ขององค์ประกอบนั้น แล้วเปลี่ยนสีข้อความขององค์ประกอบแม่

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

เมธอด children()

เราสามารถเลือกองค์ประกอบลูกทั้งหมดขององค์ประกอบที่ต้องการได้โดยใช้เมธอด children() ที่ jQuery จัดเตรียมไว้

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบลูกทั้งหมดขององค์ประกอบนั้น แล้วเปลี่ยนสีข้อความขององค์ประกอบลูก

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

เมธอด parents()

เราสามารถเลือกองค์ประกอบบรรพบุรุษขององค์ประกอบที่ต้องการได้โดยใช้เมธอด parents() ที่ jQuery จัดเตรียมไว้

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบบรรพบุรุษขององค์ประกอบนั้น แล้วเปลี่ยนสีข้อความขององค์ประกอบแม่

ความแตกต่างระหว่างเมธอดนี้กับเมธอดอื่นที่เราเรียนรู้คือ เมธอดนี้สามารถรับพารามิเตอร์ได้

ดังนั้น เราจะส่งตัวเลือก XPath เป็นพารามิเตอร์เพื่อระบุว่าต้องการเลือกบรรพบุรุษใด

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

เมธอด next()

เมธอด next() จะเลือกองค์ประกอบพี่น้องถัดไปขององค์ประกอบที่ต้องการ

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบพี่น้องแรกถัดไปขององค์ประกอบที่มีแท็ก a

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

เมธอด nextAll()

เมธอด nextAll() ใช้เลือกองค์ประกอบพี่น้องถัดไปขององค์ประกอบที่ต้องการ

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบพี่น้องทั้งหมดที่อยู่หลังองค์ประกอบที่มีแท็ก div

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

เมธอด siblings()

คุณสามารถเลือกองค์ประกอบพี่น้องทั้งหมดขององค์ประกอบที่ต้องการได้โดยใช้เมธอด siblings()

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบพี่น้องทั้งหมดขององค์ประกอบที่มีแท็ก p

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

เมธอด prev()

เมธอด prev() ใช้เลือกองค์ประกอบพี่น้องก่อนหน้าขององค์ประกอบ

เลือกองค์ประกอบพี่น้องแรกก่อนหน้าขององค์ประกอบที่มีแท็ก a

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

เมธอด prevAll()

เมธอด prevAll() ใช้เลือกองค์ประกอบพี่น้องก่อนหน้าขององค์ประกอบที่ต้องการ

ในตัวอย่างด้านล่าง ระบบจะเลือกองค์ประกอบพี่น้องทั้งหมดที่อยู่ก่อนองค์ประกอบที่มีแท็ก div

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

ขอแสดงความยินดี 🎉

ในส่วนนี้ เราได้เรียนรู้การเลือกองค์ประกอบ DOM

ในส่วนถัดไป เราจะเรียนรู้เกี่ยวกับการจัดการ DOM ต่อ