jQuery Academy · บทเรียน

คลาสเทียมและตัวเลือกแบบกำหนดเอง

ทำความเข้าใจคลาสเทียมในตัว เช่น :has(), :not() และ :nth-child() จากนั้นเรียนรู้การสร้างตัวเลือกแบบกำหนดเองเพื่อกรององค์ประกอบและนำกลับมาใช้ซ้ำ

คลาสเทียมและตัวเลือกแบบกำหนดเอง เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

ปลดล็อกพลังด้วยคลาสเทียม

ยินดีต้อนรับสู่ตัวเลือกขั้นสูง! วันนี้เราจะสำรวจเรื่องคลาสเทียม ซึ่งเป็นคีย์เวิร์ดพิเศษที่เพิ่มลงในตัวเลือกเพื่อกำหนดสถานะพิเศษขององค์ประกอบที่เลือก

คลาสเทียมช่วยให้คุณเลือกองค์ประกอบที่เลือกได้ยากด้วยแอตทริบิวต์หรือชื่อมาตรฐานของ HTML
ลองนึกภาพว่าคลาสเทียมเป็นตัวกรองแบบไดนามิกสำหรับการเลือกของคุณ

คลาสเทียมจะเริ่มต้นด้วยโคลอน (:) เช่น :hover หรือ :first-child

เลือกตามตำแหน่ง: :nth-child()

คลาสเทียม :nth-child() ใช้เลือกองค์ประกอบตามตำแหน่งภายในกลุ่มองค์ประกอบพี่น้อง เหมาะอย่างยิ่งสำหรับจัดรูปแบบรายการหรือแถวในตาราง

:nth-child(n): เลือกลูกลำดับที่ n
:nth-child(odd): เลือกลูกที่มีลำดับเป็นเลขคี่
:nth-child(even): เลือกลูกที่มีลำดับเป็นเลขคู่

การนับจะเริ่มจาก 1 ซึ่งเป็นลำดับของลูกตัวแรก

จัดรูปแบบด้วย :nth-child(odd/even)

มาดูกันว่า :nth-child(odd) และ :nth-child(even) สามารถใช้กำหนดรูปแบบสลับกันได้อย่างรวดเร็ว เช่น ลายแถบสลับสีในรายการ

ลองเรียกใช้ตัวอย่างนี้เพื่อดูผลลัพธ์:

$(document).ready(function() {
  // Selects odd list items and makes their text blue
  $('li:nth-child(odd)').css('color', 'blue');
  // Selects even list items and makes their text green
  $('li:nth-child(even)').css('color', 'green');
});

// HTML Structure (imagine this is in your page):
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
//   <li>Item 4</li>
// </ul>

สูตร :nth-child() ขั้นสูง

คุณสามารถใช้สูตรที่ซับซ้อนมากขึ้นภายใน :nth-child() เช่น An+B โดย A แทนขนาดของรอบ และ B แทนค่าชดเชย

:nth-child(3n): เลือกลูกทุกตัวที่ 3 (ตัวที่ 3, 6, 9...)
:nth-child(3n+1): เลือกลูกตัวที่ 1, 4, 7...

จึงสามารถเลือกองค์ประกอบตามช่วงห่างได้อย่างแม่นยำมาก

ยกเว้นองค์ประกอบด้วย :not()

คลาสเทียม :not() ช่วยให้คุณยกเว้นองค์ประกอบที่ต้องการออกจากการเลือกได้ เปรียบเสมือนการบอกว่า "เลือกย่อหน้าทั้งหมด ยกเว้นย่อหน้าที่มีคลาส 'intro'"

รับตัวเลือกอื่นเป็นอาร์กิวเมนต์: :not(selector)
มีประโยชน์สำหรับปรับการเลือกที่มีอยู่ให้ละเอียดขึ้น โดยไม่ต้องเขียนตัวเลือกใหม่ที่ซับซ้อน

การใช้ :not() ในทางปฏิบัติ

ลองนึกภาพว่าคุณต้องการเพิ่มเส้นขอบให้กับรายการทุกตัว ยกเว้นตัวแรก :not(:first-child) เหมาะสำหรับกรณีนี้อย่างยิ่ง

ดูว่า :not() ช่วยยกเว้นรายการตัวแรกได้อย่างไร:

$(document).ready(function() {
  // Selects all list items that are NOT the first child
  $('li:not(:first-child)').css('border-top', '1px solid gray');
});

// HTML Structure:
// <ul>
//   <li>First Item</li>
//   <li>Second Item</li>
//   <li>Third Item</li>
// </ul>

เลือกองค์ประกอบแม่ด้วย :has()

คลาสเทียม :has() มีลักษณะเฉพาะ คือจะเลือกองค์ประกอบเมื่อภายในมีองค์ประกอบอย่างน้อยหนึ่งตัวที่ตรงกับตัวเลือกซึ่งส่งเป็นอาร์กิวเมนต์

เปรียบเสมือนการถามว่า "ขอ <div> ทั้งหมดที่ มีแท็ก <p> อยู่ภายใน"
ช่วยให้คุณเลือกองค์ประกอบแม่ตามคุณลักษณะขององค์ประกอบลูกได้

เน้นองค์ประกอบด้วย :has()

สมมติว่าคุณต้องการเน้นเฉพาะคอนเทนเนอร์ <div> ที่มีรูปภาพอยู่ภายใน :has('img') ช่วยทำงานนี้ได้อย่างมีประสิทธิภาพ

เรียกใช้โค้ดนี้เพื่อดูว่า div ใดจะมีเส้นขอบ:

$(document).ready(function() {
  // Selects divs that contain an image and adds a border
  $('div:has(img)').css('border', '2px solid red');
});

// HTML Structure:
// <div id="container1">
//   <p>Text only</p>
// </div>
// <div id="container2">
//   <img src="example.png" alt="An image">
//   <p>Text and image</p>
// </div>

ตัวเลือกกำหนดเอง: ขยายความสามารถของ jQuery

ถ้าตัวเลือกที่มีมาให้ใน jQuery ยังไม่เพียงพอ คุณสามารถสร้าง ตัวเลือกคลาสเทียมแบบกำหนดเองได้ วิธีนี้ช่วยให้คุณกรององค์ประกอบด้วยตรรกะเฉพาะที่กำหนดเองได้

ลงทะเบียนตัวเลือกด้วย jQuery.expr[':']
ทำให้โค้ดสำหรับเลือกองค์ประกอบอ่านง่ายและนำกลับมาใช้ซ้ำได้

นี่เป็นความสามารถขั้นสูงสำหรับความต้องการกรององค์ประกอบที่มีลักษณะเฉพาะอย่างแท้จริง

สร้าง :contains-word() แบบกำหนดเอง

มาสร้างตัวเลือกแบบกำหนดเองชื่อ :contains-word() ซึ่งค้นหาองค์ประกอบที่มีคำเต็มคำหนึ่งอยู่ภายใน ไม่ใช่เพียงส่วนหนึ่งของคำ

ตัวอย่างนี้กำหนด :contains-word() แล้วนำไปใช้งาน:

$(document).ready(function() {
  // Define a custom pseudo-selector ':contains-word'
  $.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
    var pattern = new RegExp('\b' + word + '\b', 'i');
    return function(elem) {
      return pattern.test($(elem).text());
    };
  });

  // Use the custom selector to find paragraphs containing 'hello'
  $('p:contains-word("hello")').css('background-color', 'yellow');
});

// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>

โจทย์ท้าทายเรื่องคลาสเทียม

พิจารณา HTML ต่อไปนี้:

<ul>
  <li class="special">One</li>
  <li>Two</li>
  <li class="special">Three</li>
  <li>Four</li>
  <li class="special">Five</li>
</ul>

ตัวเลือก jQuery ใดจะเลือก เฉพาะ 'Two' และ 'Four'?

สรุป: คลาสเทียมและตัวเลือกกำหนดเอง

คุณเชี่ยวชาญเทคนิคการเลือกองค์ประกอบด้วย jQuery ที่มีประสิทธิภาพแล้ว!

คลาสเทียม (เช่น :nth-child(), :not(), :has()) ช่วยให้คุณเลือกองค์ประกอบตามสถานะหรือความสัมพันธ์กับองค์ประกอบอื่น
:nth-child() เลือกองค์ประกอบตามตำแหน่ง และรองรับการใช้สูตร
:not() ยกเว้นองค์ประกอบออกจากการเลือก
:has() เลือกองค์ประกอบแม่ตามองค์ประกอบลูก
คุณยังสามารถสร้าง ตัวเลือกคลาสเทียมแบบกำหนดเองด้วย jQuery.expr[':'] เพื่อการกรองที่เฉพาะเจาะจงมาก

หมั่นฝึกใช้สิ่งเหล่านี้เพื่อปรับการเลือกองค์ประกอบใน DOM ให้แม่นยำยิ่งขึ้น!

คำถามที่พบบ่อย

บทเรียน “คลาสเทียมและตัวเลือกแบบกำหนดเอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คลาสเทียมและตัวเลือกแบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คลาสเทียมและตัวเลือกแบบกำหนดเอง”

ทำความเข้าใจคลาสเทียมในตัว เช่น :has(), :not() และ :nth-child() จากนั้นเรียนรู้การสร้างตัวเลือกแบบกำหนดเองเพื่อกรององค์ประกอบและนำกลับมาใช้ซ้ำ คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “คลาสเทียมและตัวเลือกแบบกำหนดเอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ตัวเลือกแอตทริบิวต์ขั้นสูง
คลาสเทียมและตัวเลือกแบบกำหนดเอง
เทคนิคการท่องผ่าน DOM อย่างมีประสิทธิภาพ

← กลับไปที่ jQuery Academy