jQuery Academy · บทเรียน

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

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

เหตุใดจึงต้องใช้ตัวเลือกแบบกำหนดเอง

ตัวเลือกในตัวของ jQuery มีประสิทธิภาพอย่างมาก แต่บางครั้งคุณอาจพบความต้องการในการกรองเฉพาะที่ซับซ้อนหรือเกิดขึ้นซ้ำ ๆ

นี่คือจุดที่ ตัวเลือกเสมือนแบบกำหนดเองมีประโยชน์ ตัวเลือกเหล่านี้ช่วยให้คุณกำหนดตัวกรองเฉพาะทางของตนเอง ทำให้ตรรกะการเลือกที่ซับซ้อนง่ายขึ้น และทำให้โค้ดสะอาดและอ่านเข้าใจง่ายขึ้น

เมื่อตัวเลือกเริ่มต้นไม่เพียงพอ

ลองนึกภาพว่าคุณต้องเลือกองค์ประกอบ <div> ทั้งหมดที่ไม่เพียงมีคลาสเฉพาะ แต่ยังมีแอตทริบิวต์ data-status ที่ตั้งค่าเป็น 'active' ด้วย

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

ทำความรู้จัก jQuery.expr[':']

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

เมื่อ jQuery พบตัวเลือกอย่าง :myCustomSelector jQuery จะค้นหา myCustomSelector ในออบเจ็กต์นี้ คุณกำหนดฟังก์ชันให้กับคีย์ (ชื่อของตัวเลือก) จากนั้น jQuery จะเรียกใช้ฟังก์ชันดังกล่าวกับแต่ละองค์ประกอบที่กำลังทดสอบ

การกำหนด `:has-tooltip`

มาสร้างตัวเลือกแบบกำหนดเองอย่างง่าย :has-tooltip ซึ่งใช้ระบุองค์ประกอบที่มีแอตทริบิวต์ title นี่คือวิธีเพิ่มตัวเลือกดังกล่าวลงใน jQuery.expr[':']

ฟังก์ชันที่คุณกำหนดจะได้รับ DOM elem ปัจจุบันที่กำลังทดสอบ ฟังก์ชันควรส่งคืน true หากองค์ประกอบตรงตามเกณฑ์ และส่งคืน false หากไม่ตรง

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

การใช้ตัวเลือกแบบกำหนดเองของคุณ

เมื่อกำหนดตัวเลือก :has-tooltip แล้ว เราก็สามารถใช้ตัวเลือกนี้ได้เหมือนกับตัวเลือกเสมือนอื่น ๆ ของ jQuery ลองเรียกใช้ตัวอย่างด้านล่าง

ตัวอย่างนี้จะเน้นองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ title ซึ่งแสดงให้เห็นถึงความสามารถของตัวกรองแบบกำหนดเองตัวใหม่นี้

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

อาร์กิวเมนต์ `elem`, `i` และ `match`

เมื่อฟังก์ชันตัวเลือกแบบกำหนดเองทำงาน ฟังก์ชันจะได้รับอาร์กิวเมนต์สำคัญสามรายการ:

elem: องค์ประกอบ DOM ปัจจุบันที่กำลังทดสอบ
i: ดัชนีของ elem ภายในชุดองค์ประกอบที่ jQuery กำลังวนซ้ำ
match: อาร์เรย์ที่มีผลลัพธ์จากนิพจน์ทั่วไปซึ่งใช้แยกวิเคราะห์ตัวเลือก อาร์กิวเมนต์นี้จำเป็นสำหรับตัวเลือกที่รับอาร์กิวเมนต์

สำหรับตัวเลือกอย่างง่าย คุณจะใช้อาร์กิวเมนต์ elem เป็นหลัก

ตัวเลือกตามแอตทริบิวต์ข้อมูล

มาสร้างตัวเลือก :data-status(active) เพื่อค้นหาองค์ประกอบที่มีแอตทริบิวต์ data-status เท่ากับ 'active' ตัวอย่างนี้แสดงวิธีใช้อาร์กิวเมนต์ match

ค่า 'active' (อาร์กิวเมนต์ภายในวงเล็บ) จะอยู่ใน match[3] ทำให้ตัวเลือกของคุณปรับเปลี่ยนตามอาร์กิวเมนต์ได้

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

ทำความเข้าใจ `match[3]`

อาร์เรย์ match เป็นผลลัพธ์จากการแยกวิเคราะห์สตริงตัวเลือกด้วยนิพจน์ทั่วไปภายในของ jQuery สำหรับตัวเลือกอย่าง :yourSelector(argument) โดยทั่วไปส่วน argument จะถูกจับไว้ใน match[3]

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

ตรรกะขั้นสูง: `:containsExact`

มาสร้างตัวเลือกขั้นสูงขึ้นกัน: :containsExact(text) ซึ่งแตกต่างจาก :contains() เริ่มต้นของ jQuery ตรงที่จะจับคู่เฉพาะองค์ประกอบที่มีเนื้อหาข้อความทั้งหมด (ไม่รวมองค์ประกอบลูก) ตรงกับข้อความที่ระบุเท่านั้น

โดยมักต้องเปรียบเทียบ $(elem).text().trim() อย่างรอบคอบเพื่อให้แน่ใจว่าตรงกันทุกประการ

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

เคล็ดลับสำหรับตัวเลือกแบบกำหนดเอง

โปรดคำนึงถึงแนวทางปฏิบัติที่ดีเหล่านี้เมื่อสร้างตัวเลือกแบบกำหนดเอง:

ประสิทธิภาพ: ตรรกะที่ซับซ้อนอาจส่งผลต่อประสิทธิภาพ โดยเฉพาะเมื่อใช้กับ DOM ขนาดใหญ่ ควรปรับปรุงฟังก์ชันตัวเลือกให้มีประสิทธิภาพ
ความชัดเจน: ตั้งชื่อตัวเลือกให้สื่อความหมาย เพื่อให้ทุกคนที่อ่านโค้ดเข้าใจจุดประสงค์ได้ทันที
การนำกลับมาใช้ใหม่: ออกแบบให้เป็นแบบทั่วไปมากพอที่จะใช้ได้ในบริบทต่าง ๆ ไม่ใช่เฉพาะสถานการณ์ใดสถานการณ์หนึ่ง
หลีกเลี่ยงความขัดแย้ง: เลือกชื่อที่ไม่ซ้ำ เพื่อป้องกันการชนกับตัวเลือก jQuery ในอนาคตหรือปลั๊กอินอื่นที่คุณอาจใช้

โจทย์ท้าทาย: ตัวเลือกแบบกำหนดเอง

คุณต้องการสร้างตัวเลือกแบบกำหนดเอง :is-empty เพื่อเลือกองค์ประกอบที่ไม่มีเนื้อหาข้อความและไม่มีองค์ประกอบลูก ซึ่งคล้ายกับตัวเลือกในตัวของ jQuery อย่าง :empty

ข้อมูลโค้ดใดต่อไปนี้กำหนดตัวเลือกเทียมแบบกำหนดเองนี้ได้ถูกต้อง

ทบทวน: ตัวเลือกแบบกำหนดเอง

ในบทเรียนนี้ คุณได้เรียนรู้วิธีขยายความสามารถอันทรงพลังในการเลือกของ jQuery ด้วยการสร้างตัวเลือกเทียมแบบกำหนดเองผ่าน jQuery.expr[':']

คุณได้ทดลองกำหนดตัวเลือกแบบง่าย ส่งอาร์กิวเมนต์ให้ตัวเลือกผ่านอาร์เรย์ match และนำไปใช้เพื่อทำให้ตรรกะการกรองที่ซับซ้อนง่ายขึ้น ส่งผลให้โค้ด jQuery อ่านง่าย ดูแลรักษา และทำงานได้มีประสิทธิภาพมากขึ้น

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

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

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

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

เรียนรู้การลงทะเบียนตัวเลือกคลาสเทียมแบบกำหนดเองของคุณด้วย jQuery.expr[':'] เพื่อทำให้ตรรกะการเลือกองค์ประกอบที่ซับซ้อนง่ายขึ้นและปรับปรุงความอ่านง่ายของโค้ด คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

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

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

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

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

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

การสร้างตัวเลือกคลาสเทียมแบบกำหนดเอง
การกรองขั้นสูงด้วย .filter()
การยกเว้นองค์ประกอบด้วย .not()

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