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 HTML
สำหรับภาพรวมทั้งหมดของเมธอด jQuery HTML โปรดไปที่ jQuery HTML/CSS Referenceของเรา