jQuery Academy · บทเรียน

ตัวเลือกแอตทริบิวต์ขั้นสูง

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

บทเรียน 1 จาก 311 ขั้นตอน

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

สวัสดีครับ ตัวเลือกแอตทริบิวต์!

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

ลองนึกภาพว่าแอตทริบิวต์คือข้อมูลเพิ่มเติมที่แนบอยู่กับแท็ก HTML เช่น id, class, href, data-* และอื่น ๆ

การเลือกตามการมีอยู่ของแอตทริบิวต์

ตัวเลือกแอตทริบิวต์ที่ง่ายที่สุดจะค้นหาองค์ประกอบที่มีแอตทริบิวต์หนึ่ง ๆ โดยไม่สนใจค่าของแอตทริบิวต์นั้น เขียนได้เป็น [attributeName]

วิธีนี้มีประโยชน์มากเมื่อคุณเพียงต้องการตรวจสอบว่าองค์ประกอบมีแอตทริบิวต์นั้นอยู่หรือไม่ ตัวอย่างเช่น $('[title]') จะค้นหาองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ title

ลองทำดู: การมีอยู่ของแอตทริบิวต์

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

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

การจับคู่ค่าของแอตทริบิวต์แบบตรงทั้งหมด

หากต้องการเลือกองค์ประกอบที่แอตทริบิวต์มีค่าตรงทั้งหมด ให้ใช้ [attributeName="value"]

ตัวเลือกนี้แม่นยำมาก! ระบบจะจับคู่ก็ต่อเมื่อค่าของแอตทริบิวต์ตรงกับค่าที่คุณระบุทุกประการ รวมถึงตัวพิมพ์ด้วย (การจับคู่ค่าแอตทริบิวต์ของ jQuery แยกแยะตัวพิมพ์เล็กใหญ่)

การจับคู่ตรงทั้งหมดในการใช้งานจริง

ค้นหาองค์ประกอบที่มีแอตทริบิวต์ data-type ซึ่งมีค่าเป็น "primary" ตรงทั้งหมด

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

ค่าของแอตทริบิวต์ที่ขึ้นต้นด้วย...

ตัวเลือก [attributeName^="value"] จะค้นหาองค์ประกอบที่ค่าของแอตทริบิวต์นั้นขึ้นต้นด้วยสตริงที่ระบุ

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

ลงท้ายด้วยและมีค่าที่ระบุอยู่

ตัวเลือกเหล่านี้ช่วยให้จับคู่บางส่วนได้ยืดหยุ่นมากขึ้น:

[attributeName$="value"]: จับคู่เมื่อค่าแอตทริบิวต์ลงท้ายด้วยสตริงที่ระบุ
[attributeName*="value"]: จับคู่เมื่อค่าแอตทริบิวต์มีสตริงที่ระบุอยู่ที่ใดก็ตาม

การสาธิตสด: การจับคู่บางส่วน

สังเกตว่า ^=, $= และ *= เลือกองค์ประกอบต่างกันอย่างไร โดยพิจารณาจากค่าบางส่วนของแอตทริบิวต์ในแอตทริบิวต์ href

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

ตัวเลือกคำและยัติภังค์

ตัวเลือกเฉพาะทางอีกสองแบบ:

[attributeName~="value"]: จับคู่เมื่อค่าแอตทริบิวต์มีคำที่ระบุ โดยคั่นด้วยช่องว่าง มักใช้กับแอตทริบิวต์ class
[attributeName|="value"]: จับคู่เมื่อค่าแอตทริบิวต์เท่ากับ "value" พอดี หรือขึ้นต้นด้วย "value-" (ตามด้วยยัติภังค์) มักใช้กับรหัสภาษา เช่น lang="en-US"

ตรวจสอบอย่างรวดเร็ว: ตัวเลือก

ตัวเลือก jQuery ใดบ้างที่สามารถระบุองค์ประกอบ <div> ด้านล่างได้อย่างถูกต้อง

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

ตอบคำถามในบทเรียนแบบโต้ตอบ

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

เก่งมากครับ! คุณเชี่ยวชาญตัวเลือกแอตทริบิวต์ขั้นสูงแล้ว:

[attr]: ตรวจสอบการมีอยู่ของแอตทริบิวต์
[attr="val"]: จับคู่ค่าที่ตรงทั้งหมด
[attr^="val"]: จับคู่ค่าที่ขึ้นต้นด้วย
[attr$="val"]: จับคู่ค่าที่ลงท้ายด้วย
[attr*="val"]: จับคู่ค่าที่มีสตริงนั้นอยู่
[attr~="val"]: จับคู่ค่าที่มีคำซึ่งคั่นด้วยช่องว่าง
[attr|="val"]: จับคู่ค่าที่ตรงทั้งหมดหรือขึ้นต้นด้วย 'val-'

นำตัวเลือกเหล่านี้ไปเขียนโค้ด jQuery ที่แม่นยำและมีประสิทธิภาพกันครับ!

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 22
บทเรียน: 48

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “ตัวเลือกแอตทริบิวต์ขั้นสูง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ตัวเลือกแอตทริบิวต์ขั้นสูง”

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

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

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

บทเรียน “ตัวเลือกแอตทริบิวต์ขั้นสูง” ใช้เวลานานแค่ไหน

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

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

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

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

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

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