jQuery Academy · บทเรียน

การใช้แอตทริบิวต์ข้อมูลของ HTML5

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

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

ทำความรู้จักแอตทริบิวต์ข้อมูลของ HTML5

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

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

เหตุใดแอตทริบิวต์ข้อมูลจึงมีประโยชน์

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

คลาส/รหัส: มักถูกนำไปใช้ผิดวัตถุประสงค์เพื่อจัดรูปแบบหรือเลือกองค์ประกอบ แทนที่จะใช้เก็บข้อมูล
ช่องรับข้อมูลที่ซ่อนอยู่: ทำให้ DOM รกรุงรังและมีไว้สำหรับส่งข้อมูลแบบฟอร์ม

แอตทริบิวต์ข้อมูลเป็นวิธีมาตรฐานที่สะอาดตาในการฝังข้อมูลกำหนดเองไว้ตรงตำแหน่งที่เหมาะสม

กฎการตั้งชื่อ `data-`

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

data-id="123"
data-status="active"
data-item-price="9.99"

คำนำหน้ามาตรฐานนี้ช่วยให้มั่นใจว่าแอตทริบิวต์กำหนดเองของคุณจะไม่ขัดแย้งกับแอตทริบิวต์ HTML ที่มีอยู่หรืออาจมีในอนาคต

ฝังข้อมูลใน HTML

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

ตัวอย่างเช่น เราจะเพิ่ม data-product-id และ data-category ให้กับปุ่มหนึ่ง

<button id="buyButton" data-product-id="456" data-category="electronics">
  Buy Now
</button>

<script>
  // JavaScript goes here later
</script>

รับข้อมูลด้วย jQuery

jQuery มีเมธอด .data() ที่สะดวกมากสำหรับดึงค่าจากแอตทริบิวต์ข้อมูล โดยจะจัดการคำนำหน้า data- ให้คุณโดยอัตโนมัติ

หากต้องการรับแอตทริบิวต์เฉพาะ ให้ส่งชื่อของแอตทริบิวต์ (โดยไม่รวม data-) ไปยัง .data()

<button id="myButton" data-user-id="101" data-role="admin">
  User Profile
</button>

<script>
  $(document).ready(function() {
    const userId = $('#myButton').data('user-id');
    const userRole = $('#myButton').data('role');
    
    console.log("User ID:", userId);
    console.log("User Role:", userRole);
  });
</script>

เปลี่ยนข้อมูลได้ทันที

เมธอด .data() ไม่ได้มีไว้สำหรับอ่านข้อมูลเท่านั้น คุณยังใช้เมธอดนี้เพื่ออัปเดตหรือเพิ่มแอตทริบิวต์ข้อมูลใหม่แบบไดนามิกได้ด้วย

ส่งอาร์กิวเมนต์สองรายการ ได้แก่ ชื่อแอตทริบิวต์ (โดยไม่รวม data-) และค่าใหม่ วิธีนี้จะอัปเดตแคชข้อมูลภายในของ jQuery และสำหรับแอตทริบิวต์ข้อมูลของ HTML5 ก็จะอัปเดตแอตทริบิวต์ใน DOM ด้วย

<div id="statusBox" data-status="pending">
  Current Status
</div>

<script>
  $(document).ready(function() {
    console.log("Initial status:", $('#statusBox').data('status'));
    
    // Update the status
    $('#statusBox').data('status', 'complete');
    
    console.log("Updated status:", $('#statusBox').data('status'));
  });
</script>

การจัดการชนิดข้อมูลอย่างชาญฉลาด

คุณสมบัติที่น่าสนใจอย่างหนึ่งของ .data() ใน jQuery คือการแปลงชนิดข้อมูลโดยอัตโนมัติ เมื่อดึงแอตทริบิวต์ข้อมูล jQuery จะพยายามแปลงค่าข้อความให้เป็นชนิดข้อมูล JavaScript ที่เหมาะสมกว่า

"true", "false" จะกลายเป็นค่าบูลีน
"123" จะกลายเป็นตัวเลข
"[1,2]", "{name:'X'}" จะกลายเป็นอาร์เรย์/ออบเจ็กต์ (หากเป็น JSON ที่ถูกต้อง)

ช่วยให้คุณไม่ต้องแยกวิเคราะห์ข้อมูลด้วยตนเอง

การใช้งานจริง: การสลับสถานะ

แอตทริบิวต์ข้อมูลเหมาะอย่างยิ่งสำหรับจัดการสถานะขององค์ประกอบในส่วนติดต่อผู้ใช้ มาสร้างปุ่มสลับอย่างง่ายที่เปลี่ยนข้อความและสถานะตามแอตทริบิวต์ data-active กัน

คลิกปุ่มเพื่อดูการเปลี่ยนแปลงสถานะ

<button id="toggleBtn" data-active="false">
  Activate Feature
</button>

<script>
  $(document).ready(function() {
    $('#toggleBtn').on('click', function() {
      let isActive = $(this).data('active');
      
      if (isActive) {
        $(this).data('active', false);
        $(this).text('Activate Feature');
        $(this).css('background-color', '#f0f0f0');
      } else {
        $(this).data('active', true);
        $(this).text('Deactivate Feature');
        $(this).css('background-color', '#d4edda');
      }
      console.log("Active state:", $(this).data('active'));
    });
  });
</script>

เคล็ดลับการใช้แอตทริบิวต์ข้อมูล

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

ใช้กับสถานะของส่วนติดต่อผู้ใช้: เหมาะสำหรับจัดเก็บสถานะชั่วคราวของส่วนติดต่อผู้ใช้ การตั้งค่า หรือข้อมูลอ้างอิง
หลีกเลี่ยงข้อมูลขนาดใหญ่: ไม่ควรใช้จัดเก็บชุดข้อมูลขนาดใหญ่ ควรเก็บค่าให้กระชับ
ตั้งชื่อให้สื่อความหมาย: เลือกชื่อที่ชัดเจนและบอกความหมาย (เช่น data-user-id แทน data-u)
อย่าใช้แทนข้อมูลจากระบบเบื้องหลัง: ยังคงดึงข้อมูลที่ซับซ้อนจากเซิร์ฟเวอร์ อย่าฝังข้อมูลทั้งหมดไว้ในหน้าเว็บ

แบบทดสอบแอตทริบิวต์ข้อมูล

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

<div id="item" data-price="25.50" data-available="true">
  Product Info
</div>

<script>
  $(document).ready(function() {
    const itemDiv = $('#item');
    const price = itemDiv.data('price');
    const available = itemDiv.data('available');
    
    itemDiv.data('stock', 100);
    const stock = itemDiv.data('stock');
    
    console.log(typeof price);
    console.log(typeof available);
    console.log(stock);
  });
</script>

สิ่งใดจะถูกบันทึกลงในคอนโซล

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

ทบทวน: ใช้ประโยชน์จากแอตทริบิวต์ข้อมูลอย่างเต็มที่

ยินดีด้วยครับ/ค่ะ! คุณได้เรียนรู้วิธีใช้ประโยชน์จากแอตทริบิวต์ข้อมูลของ HTML5 ร่วมกับ jQuery แล้ว

แอตทริบิวต์เหล่านี้ช่วยให้ฝังข้อมูลที่กำหนดเองลงใน HTML ได้อย่างเป็นระเบียบ
เมธอด .data() ของ jQuery ช่วยให้ดึงข้อมูลและอัปเดตข้อมูลเหล่านี้ได้อย่างง่ายดาย
การแปลงชนิดข้อมูลโดยอัตโนมัติช่วยให้จัดการข้อมูลได้สะดวกขึ้น
เหมาะอย่างยิ่งสำหรับจัดการสถานะของส่วนติดต่อผู้ใช้และสร้างอินเทอร์เฟซแบบไดนามิก

หมั่นฝึกฝนต่อไป แล้วคุณจะพบวิธีอีกนับไม่ถ้วนในการทำให้เว็บแอปพลิเคชันของคุณฉลาดและโต้ตอบกับผู้ใช้ได้มากขึ้น!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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