jQuery - ตั้งค่าเนื้อหาและคุณสมบัติ
ตั้งค่าเนื้อหา - text(), html() และ val()
เราจะใช้สามวิธีเดียวกันจากหน้าก่อนหน้าเพื่อตั้งค่าเนื้อหา :
text()- ตั้งค่าหรือส่งคืนเนื้อหาข้อความขององค์ประกอบที่เลือกhtml()- ตั้งค่าหรือส่งคืนเนื้อหาขององค์ประกอบที่เลือก (รวมถึงมาร์กอัป HTML)val()- ตั้งค่าหรือคืนค่าของฟิลด์แบบฟอร์ม
ตัวอย่างต่อไปนี้สาธิตวิธีการตั้งค่าเนื้อหาด้วย jQuery text(), html(), และval()เมธอด:
ตัวอย่าง
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
ฟังก์ชันเรียกกลับสำหรับ text(), html() และ val()
วิธี jQuery ทั้งสามวิธีข้างต้น: text(), html(), และval()มาพร้อมฟังก์ชันเรียกกลับด้วย ฟังก์ชันเรียกกลับมีสองพารามิเตอร์: ดัชนีขององค์ประกอบปัจจุบันในรายการองค์ประกอบที่เลือกและค่าเดิม (เก่า) จากนั้นคุณส่งคืนสตริงที่คุณต้องการใช้เป็นค่าใหม่จากฟังก์ชัน
ตัวอย่างต่อไปนี้แสดงให้เห็นtext()และhtml()มีฟังก์ชันเรียกกลับ:
ตัวอย่าง
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
ตั้งค่าแอตทริบิวต์ - attr()
วิธี jQuery attr()ยังใช้เพื่อตั้งค่า/เปลี่ยนค่าแอตทริบิวต์
ตัวอย่างต่อไปนี้สาธิตวิธีการเปลี่ยน (ตั้งค่า) ค่าของแอตทริบิวต์ href ในลิงก์:
ตัวอย่าง
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
วิธีattr()นี้ยังช่วยให้คุณตั้งค่าแอตทริบิวต์หลายรายการพร้อมกันได้
ตัวอย่างต่อไปนี้สาธิตวิธีตั้งค่าทั้งแอตทริบิวต์ href และชื่อพร้อมกัน:
ตัวอย่าง
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
ฟังก์ชันเรียกกลับสำหรับ attr()
วิธี jQuery attr()ยังมาพร้อมกับฟังก์ชันเรียกกลับ ฟังก์ชันเรียกกลับมีสองพารามิเตอร์: ดัชนีขององค์ประกอบปัจจุบันในรายการองค์ประกอบที่เลือกและค่าแอตทริบิวต์เดิม (เก่า) จากนั้นคุณจะส่งคืนสตริงที่คุณต้องการใช้เป็นค่าแอตทริบิวต์ใหม่จากฟังก์ชัน
ตัวอย่างต่อไปนี้แสดงให้เห็นattr()ด้วยฟังก์ชันเรียกกลับ:
ตัวอย่าง
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
แบบฝึกหัด jQuery
การอ้างอิง jQuery HTML
สำหรับภาพรวมทั้งหมดของเมธอด jQuery HTML โปรดไปที่ jQuery HTML/CSS Referenceของเรา