jQuery - รับเนื้อหาและคุณสมบัติ


jQuery มีวิธีการที่มีประสิทธิภาพสำหรับการเปลี่ยนแปลงและจัดการองค์ประกอบและแอตทริบิวต์ HTML


การจัดการ jQuery DOM

ส่วนสำคัญอย่างหนึ่งของ jQuery คือความเป็นไปได้ในการจัดการ DOM

jQuery มาพร้อมกับวิธีการที่เกี่ยวข้องกับ DOM มากมาย ซึ่งทำให้ง่ายต่อการเข้าถึงและจัดการองค์ประกอบและแอตทริบิวต์

DOM = Document Object Model

DOM กำหนดมาตรฐานสำหรับการเข้าถึงเอกสาร HTML และ XML:

"W3C Document Object Model (DOM) เป็นแพลตฟอร์มและอินเทอร์เฟซที่เป็นกลางทางภาษาที่ช่วยให้โปรแกรมและสคริปต์สามารถเข้าถึงและปรับปรุงเนื้อหา โครงสร้าง และ รูปแบบของเอกสาร”


รับเนื้อหา - text(), html() และ val()

วิธี jQuery ที่เรียบง่าย แต่มีประโยชน์สามวิธีสำหรับการจัดการ DOM คือ:

  • text() - ตั้งค่าหรือส่งคืนเนื้อหาข้อความขององค์ประกอบที่เลือก
  • html() - ตั้งค่าหรือส่งคืนเนื้อหาขององค์ประกอบที่เลือก (รวมถึงมาร์กอัป HTML)
  • val() - ตั้งค่าหรือคืนค่าของฟิลด์แบบฟอร์ม

ตัวอย่างต่อไปนี้สาธิตวิธีรับเนื้อหาด้วย jQuery text()และhtml()วิธีการ:

ตัวอย่าง

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

ตัวอย่างต่อไปนี้สาธิตวิธีรับค่าของช่องใส่ข้อมูลด้วยval()วิธี jQuery:

ตัวอย่าง

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});


รับแอตทริบิวต์ - attr()

วิธี jQuery attr()ใช้เพื่อรับค่าแอตทริบิวต์

ตัวอย่างต่อไปนี้สาธิตวิธีรับค่าแอตทริบิวต์ href ในลิงก์:

ตัวอย่าง

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

บทต่อไปจะอธิบายวิธีตั้งค่า (เปลี่ยนแปลง) เนื้อหาและค่าแอตทริบิวต์


แบบฝึกหัด jQuery

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ใช้เมธอด jQuery เพื่อส่งคืนเนื้อหาข้อความขององค์ประกอบ <div>

$("div").();


การอ้างอิง jQuery HTML

สำหรับภาพรวมทั้งหมดของเมธอด jQuery HTML โปรดไปที่ jQuery HTML/CSS Referenceของเรา