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

ตั้งค่าเนื้อหา - text()、html() และ val()

เราจะใช้วิธีที่เหมือนกันสามวิธีจากบทก่อนหน้านี้เพื่อตั้งค่าเนื้อหา

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

ตัวอย่างด้านล่างแสดงว่าเราจะเชื่อมโยงความหมายด้วยวิธี 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 ของ jQuery คือ text()、html() และ val() มีฟังก์ชันคลิกบกับอีกด้วย ฟังก์ชันคลิกมีสองตัวอักษราะหัน คือตัวเลขที่ระบุลำดับขององค์ประกอบที่มีค่าในรายการที่ถูกเลือก และค่าเดิม (เก่า) หลังจากนั้นจะเริ่มด้วยฟังก์ชันตัวแทนค่าใหม่ที่คุณต้องการใช้ข้อความ

ตัวอย่างด้านล่างนี้แสดงวิธีการใช้ฟังก์ชัน callback กับ 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()

วิธีการ attr() ของ jQuery ยังใช้ในการตั้งค่าหรือเปลี่ยนค่าคุณสมบัติ

ตัวอย่างด้านล่างนี้แสดงวิธีการเปลี่ยน (ตั้งค่า) ค่าของคุณสมบัติ href ในลิงก์:

ตัวอย่าง

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

ลองด้วยตัวเอง

วิธีการ attr() ยังอนุญาตให้คุณตั้งค่าคุณสมบัติหลายรายการพร้อมกัน

ตัวอย่างด้านล่างนี้แสดงวิธีการตั้งค่าคุณสมบัติ href และ title พร้อมกัน:

ตัวอย่าง

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery Tutorial"
  });
});

ลองด้วยตัวเอง

ฟังก์ชัน callback ของ attr()

วิธีการ attr() ของ jQuery ก็มีฟังก์ชัน callback ซึ่งมีสองอัตรายะทรัพย์: ดัชนีขององค์ประกอบที่ถูกเลือกในรายการ และค่าเดิม (เก่า) หลังจากนั้นจะกลับค่าตัวเองด้วยตัวเอง

ตัวอย่างด้านล่างนี้แสดงวิธีการใช้ฟังก์ชัน callback กับหน้าต่าง attr()

ตัวอย่าง

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

ลองด้วยตัวเอง

คู่มืออ้างอิง jQuery HTML

ถ้าต้องการเอกสารที่เต็มตัวเกี่ยวกับวิธีการ jQuery HTML โปรดเข้าถึงคู่มืออ้างอิงด้านล่าง: